/*
 * GENERATED FILE — DO NOT EDIT BY HAND.
 * Design tokens synced from the lichtfeld-studio-web submodule via
 * scripts/sync_design_tokens.py. Edit tokens in the marketing site,
 * then re-run the sync. Loaded before site.css so the portal inherits
 * the marketing-site design system as the single source of truth.
 */

:root {
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Manrope", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ===========================
   * Tailwind-Compatible Spacing Scale
   * =========================== */
  --spacing-0: 0px;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-16: 4rem; /* 64px */
  --spacing-18: 4.5rem; /* 72px */
  --spacing-20: 5rem; /* 80px */
  --spacing-22: 5.5rem; /* 88px */
  --spacing-24: 6rem; /* 96px */
  --spacing-26: 6.5rem; /* 104px */
  --spacing-28: 7rem; /* 112px */
  --spacing-30: 7.5rem; /* 120px */

  /* ===========================
   * Tailwind-Compatible Border Radius
   * =========================== */
  --rounded-none: 0px;
  --rounded-sm: 0.125rem;
  --rounded: 0.25rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-2xl: 1rem;
  --rounded-3xl: 1.5rem;
  --rounded-full: 9999px;

  /* ===========================
   * Legacy Variables (kept for compatibility)
   * =========================== */
  /* Colors */
  --color-primary: #1457ff;
  --color-primary-rgb: 20, 87, 255; /* rgb triplet of --color-primary for rgba() mixes */
  --ink-rgb: 15, 23, 42; /* rgb triplet of the slate "ink" used for borders/shadows */
  --color-accent: #1d4ed8;
  --color-accent-warm: #b45309;
  --color-body-strong: #344054; /* emphasized body copy (hero leads, summaries) */
  --color-success: #198754;
  --color-code-bg: #1e293b;
  --color-code-fg: #f8fafc;
  --color-primary-link: #1457ff;
  --color-primary-link-hover: #0f46d3;
  --color-heading: #101828;
  --color-body: #475467;
  --color-muted: #5b6474; /* darkened from #667085 for AA contrast on cream */
  --color-border-subtle: rgba(15, 23, 42, 0.09);
  --color-border-hover: rgba(20, 87, 255, 0.24);
  --focus-ring: rgba(20, 87, 255, 0.18);
  --focus-shadow: 0 0 0 3px var(--focus-ring);
  --color-text: #182230;
  --color-text-hover: #0f172a;
  --color-text-light: #fff;
  --color-background: rgba(255, 255, 255, 0.82);
  --background-hover: rgba(15, 23, 42, 0.04);
  --dropdown-background: rgba(255, 255, 255, 0.9);
  --body-background: #fbf8f2;

  /* Surface tokens (flat editorial: hairline rules, no glass) */
  --surface-border: rgba(15, 23, 42, 0.08);

  /* Page background */
  --page-bg:
    radial-gradient(circle at top left, rgba(20, 87, 255, 0.08), transparent 22%),
    radial-gradient(circle at top right, rgba(201, 114, 52, 0.08), transparent 16%),
    linear-gradient(180deg, rgba(251, 248, 242, 0.95) 0%, rgba(245, 239, 228, 0.98) 55%, rgba(248, 245, 238, 1) 100%);

  /* Card tokens (flat: solid fill, hairline border, no shadow/lift) */
  --card-bg: #ffffff;
  --card-border: rgba(15, 23, 42, 0.1);
  --card-shadow: none;
  --card-shadow-hover: none;
  --card-radius: 0.9rem;
  --card-hover-lift: 0px;
  --card-padding: 1.8rem;
  --card-padding-compact: 1.55rem;
  --card-gap: 1rem;

  /* Glass surfaces (frosted panels, pills, toggles) */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.92);
  --glass-blur: blur(12px);

  /* Motion */
  --transition-fast: 0.18s ease;

  /* Borders */
  --border-radius: 10px;
  --border-color: rgba(15, 23, 42, 0.08);
  --border-color-light: rgba(15, 23, 42, 0.12);
  --radius-pill: 999px;

  /* Layout */
  --nav-height: 60px;
  --nav-padding-x: 16px;
  --container-padding: 1rem;
  --content-frame-max: 1180px;

  /* Breakpoints */
  --breakpoint-lg: 992px;

  /* Shadows */
  --dropdown-shadow: 0 20px 38px rgba(15, 23, 42, 0.12);

  /* Section backgrounds */
  --section-bg-alt: #efe7d8;

  /* Theme-aware surface tokens (light defaults; overridden in [data-theme="dark"]) */
  color-scheme: light;
  --header-bg: rgba(251, 248, 242, 0.72);
  --nav-hover-bg: rgba(255, 255, 255, 0.56);
  --color-kicker: #9a5d26;
  --color-kicker-line: rgba(154, 93, 38, 0.42);
  --code-inline-bg: rgba(15, 23, 42, 0.06);
  --color-icon-github: #24292f;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #2f6bff;
  --color-primary-rgb: 47, 107, 255;
  --ink-rgb: 226, 232, 240; /* light "ink" for subtle overlays on dark */
  --color-accent: #4d7dff;
  --color-accent-warm: #e0a061;
  --color-body-strong: #d7dbe2;
  --color-success: #34d399;
  --color-code-bg: #0d1017;
  --color-code-fg: #e6edf3;
  --color-primary-link: #7aa2ff;
  --color-primary-link-hover: #a5c0ff;
  --color-heading: #f3f5f8;
  --color-body: #b9c0cb;
  --color-muted: #8a92a0;
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-border-hover: rgba(122, 162, 255, 0.42);
  --focus-ring: rgba(122, 162, 255, 0.35);
  --color-text: #e6e9ee;
  --color-text-hover: #ffffff;
  --color-background: rgba(20, 22, 27, 0.82);
  --background-hover: rgba(255, 255, 255, 0.05);
  --dropdown-background: rgba(22, 24, 30, 0.94);
  --body-background: #101216;
  --surface-border: rgba(255, 255, 255, 0.09);

  --page-bg:
    radial-gradient(circle at top left, rgba(47, 107, 255, 0.13), transparent 24%),
    radial-gradient(circle at top right, rgba(201, 114, 52, 0.08), transparent 18%),
    linear-gradient(180deg, #101216 0%, #0c0d11 60%, #0a0b0e 100%);

  --card-bg: #16181e;
  --card-border: rgba(255, 255, 255, 0.1);

  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-light: rgba(255, 255, 255, 0.14);
  --glass-bg: rgba(22, 24, 30, 0.72);
  --glass-bg-strong: rgba(22, 24, 30, 0.92);
  --dropdown-shadow: 0 20px 38px rgba(0, 0, 0, 0.55);
  --section-bg-alt: #16181e;

  --header-bg: rgba(16, 18, 22, 0.72);
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
  --color-kicker: #e0a061;
  --color-kicker-line: rgba(224, 160, 97, 0.45);
  --code-inline-bg: rgba(255, 255, 255, 0.09);
  --color-icon-github: #e6e9ee;
}