/* =========================================================
   FinalLayer Design System tokens — extracted from
   design system/FinalLayer Design System v1.9.1.html
   Primitives + gradients + semantic (light + dark) layers.
   Source of truth: the HTML file. Do not edit token values
   here without updating the source.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");

/* Tell the browser we manage our own theming. Without this,
   browsers auto-apply dark mode to plain HTML which inverts
   our typography against light backgrounds. */
:root { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }

:root {
  /* Primary (Indigo-Blue) */
  --color-primary: #EBEEFD;
  --color-primary-100: #E1E6FC;
  --color-primary-200: #C1CBF9;
  --color-primary-300: #3756ED;
  --color-primary-400: #324DD5;
  --color-primary-500: #2C45BE;
  --color-primary-600: #2941B2;
  --color-primary-700: #21348E;
  --color-primary-800: #19276B;
  --color-primary-900: #131E53;

  /* Secondary (Sky) */
  --color-secondary: #EBF7FD;
  --color-secondary-100: #E1F3FC;
  --color-secondary-200: #C1E7F9;
  --color-secondary-300: #37B1ED;
  --color-secondary-400: #329FD5;
  --color-secondary-500: #2C8EBE;
  --color-secondary-600: #2985B2;
  --color-secondary-700: #216A8E;
  --color-secondary-800: #19506B;
  --color-secondary-900: #133E53;

  /* Tertiary (Violet) */
  --color-tertiary: #F1EBFD;
  --color-tertiary-100: #EAE1FC;
  --color-tertiary-200: #D4C1F9;
  --color-tertiary-300: #7337ED;
  --color-tertiary-400: #6832D5;
  --color-tertiary-500: #5C2CBE;
  --color-tertiary-600: #5629B2;
  --color-tertiary-700: #45218E;
  --color-tertiary-800: #34196B;
  --color-tertiary-900: #281353;

  /* Red */
  --color-red: #FDEBEE;
  --color-red-100: #FCE1E6;
  --color-red-200: #F9C1CB;
  --color-red-300: #ED3756;
  --color-red-400: #D5324D;
  --color-red-500: #BE2C45;
  --color-red-600: #B22941;
  --color-red-700: #8E2134;
  --color-red-800: #6B1927;
  --color-red-900: #53131E;

  /* Green */
  --color-green: #EBF7EC;
  --color-green-100: #E1F3E3;
  --color-green-200: #C2E6C5;
  --color-green-300: #39AD44;
  --color-green-400: #339C3D;
  --color-green-500: #2E8A36;
  --color-green-600: #2B8233;
  --color-green-700: #226829;
  --color-green-800: #1A4E1F;
  --color-green-900: #143D18;

  /* Orange */
  --color-orange: #FDF6EB;
  --color-orange-100: #FCF1E1;
  --color-orange-200: #F9E2C1;
  --color-orange-300: #EDA137;
  --color-orange-400: #D59132;
  --color-orange-500: #BE812C;
  --color-orange-600: #B27929;
  --color-orange-700: #8E6121;
  --color-orange-800: #6B4819;
  --color-orange-900: #533813;

  /* Neutral-Cool ("White" in source — not pure white) */
  --color-white: #FDFDFE;
  --color-white-100: #FBFCFD;
  --color-white-200: #ECF1F8;
  --color-white-300: #E6EBF4;
  --color-white-400: #CFD4DC;
  --color-white-500: #B8BCC3;
  --color-white-600: #ADB0B7;
  --color-white-700: #8A8D92;
  --color-white-800: #676A6E;
  --color-white-900: #515255;
  --color-white-5:  rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.10);
  --color-white-30: rgba(255, 255, 255, 0.30);

  /* Ink ("Black" in source) */
  --color-black: #E9EAEB;
  --color-black-100: #DFDFE2;
  --color-black-200: #BCBDC2;
  --color-black-300: #27293B;
  --color-black-400: #232535;
  --color-black-500: #1F212F;
  --color-black-600: #1D1F2C;
  --color-black-700: #171923;
  --color-black-800: #12121B;
  --color-black-900: #0E0E15;

  /* Grey */
  --color-gray: #EFF0F1;
  --color-gray-100: #E8E8EA;
  --color-gray-200: #CFCFD5;
  --color-gray-300: #636576;
  --color-gray-400: #595B6A;
  --color-gray-500: #4F515E;
  --color-gray-600: #4A4C59;
  --color-gray-700: #3B3D47;
  --color-gray-800: #2D2D35;
  --color-gray-900: #232329;

  /* App-specific solids */
  --color-background-dark: #060609;
  --color-warning: #EDA137;

  /* Brand accent (gradient endpoints) */
  --color-brand-gradient-from: #D56EFF;
  --color-brand-gradient-to: #4B93EB;

  /* Data-viz palette */
  --color-dv-1: #3756ED;
  --color-dv-2: #37B1ED;
  --color-dv-3: #7337ED;
  --color-dv-4: #39AD44;
  --color-dv-5: #EDA137;
  --color-dv-6: #ED3756;
  --color-dv-7: #2985B2;
  --color-dv-8: #5629B2;

  /* Spacing (13 steps) */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 999px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Instrument Serif', 'Cambria', 'Times New Roman', serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* Numeric system */
  --num-display-size: 96px;
  --num-metric-size:  36px;
  --num-inline-size:  1em;
  --num-unit-scale:   0.55;
  --num-unit-weight:  500;
  --num-unit-color:   var(--color-fg-secondary);
  --num-unit-gap:     0.05em;
  --num-unit-baseline: 0.18em;
  --num-pre-scale:    0.58;
  --num-pre-gap:      0.03em;
  --num-pre-weight:   500;
  --num-pre-color:    var(--color-fg-secondary);

  /* Motion */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Z-index */
  --z-0: 0;
  --z-10: 10;
  --z-sticky: 100;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* Gradients — signature brand family only */
  --gradient-brand-start: #6E86FF;
  --gradient-brand-end:   #D56EFF;
  --gradient-brand: linear-gradient(135deg, #6E86FF 0%, #9A6BFF 55%, #D56EFF 100%);
  --gradient-brand-subtle: linear-gradient(135deg, #F5F7FF 0%, #FBF5FF 100%);

  --gradient-mesh-aurora:
    radial-gradient(at 18% 14%, rgba(110, 134, 255, 0.42) 0, transparent 45%),
    radial-gradient(at 82% 22%, rgba(213, 110, 255, 0.36) 0, transparent 48%),
    radial-gradient(at 68% 92%, rgba(110, 205, 255, 0.32) 0, transparent 50%),
    radial-gradient(at 10% 88%, rgba(154, 107, 255, 0.28) 0, transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #FBF7FF 100%);

  --gradient-mesh-horizon:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(110, 134, 255, 0.38) 0, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(213, 110, 255, 0.32) 0, transparent 60%),
    radial-gradient(at 88% 50%, rgba(154, 107, 255, 0.24) 0, transparent 50%),
    linear-gradient(180deg, #FFFFFF 0%, #FCF7FF 100%);

  --gradient-mesh-spotlight:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(213, 110, 255, 0.46) 0, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 30%, rgba(154, 107, 255, 0.34) 0, transparent 60%),
    radial-gradient(at 92% 92%, rgba(110, 134, 255, 0.24) 0, transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%);

  /* Ember — pink-forward, warmer, violet stays, indigo retreats. Marketing surfaces. */
  --gradient-mesh-ember:
    radial-gradient(at 78% 18%, rgba(213, 110, 255, 0.48) 0, transparent 48%),
    radial-gradient(at 20% 24%, rgba(154, 107, 255, 0.38) 0, transparent 46%),
    radial-gradient(at 50% 95%, rgba(110, 134, 255, 0.32) 0, transparent 50%),
    radial-gradient(at 92% 88%, rgba(213, 110, 255, 0.26) 0, transparent 44%),
    linear-gradient(180deg, #FFFBFF 0%, #FCF4FF 100%);

  /* Glacier — indigo-forward, cool, sky-accented. Calm / focus surfaces. */
  --gradient-mesh-glacier:
    radial-gradient(at 14% 20%, rgba(110, 134, 255, 0.46) 0, transparent 48%),
    radial-gradient(at 78% 14%, rgba(110, 205, 255, 0.36) 0, transparent 46%),
    radial-gradient(at 62% 90%, rgba(154, 107, 255, 0.28) 0, transparent 50%),
    radial-gradient(at 12% 84%, rgba(110, 205, 255, 0.22) 0, transparent 44%),
    linear-gradient(180deg, #FEFEFF 0%, #F7FAFF 100%);

  --gradient-stroke-accent: linear-gradient(180deg, #6E86FF 0%, #D56EFF 100%);
}

html[data-theme='dark'] {
  --gradient-brand-subtle: linear-gradient(135deg, rgba(90, 116, 255, 0.22) 0%, rgba(202, 91, 255, 0.18) 100%);
  --gradient-mesh-aurora:
    radial-gradient(at 18% 14%, rgba(144, 160, 255, 0.42) 0, transparent 45%),
    radial-gradient(at 82% 22%, rgba(202, 91, 255, 0.30) 0, transparent 48%),
    radial-gradient(at 68% 92%, rgba(92, 195, 255, 0.24) 0, transparent 50%),
    radial-gradient(at 10% 88%, rgba(138, 92, 255, 0.32) 0, transparent 45%),
    linear-gradient(180deg, #11121A 0%, #151722 100%);
  --gradient-mesh-horizon:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(144, 160, 255, 0.36) 0, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(202, 91, 255, 0.28) 0, transparent 60%),
    radial-gradient(at 88% 50%, rgba(138, 92, 255, 0.24) 0, transparent 50%),
    linear-gradient(180deg, #11121A 0%, #171220 100%);
  --gradient-mesh-spotlight:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(202, 91, 255, 0.40) 0, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 30%, rgba(138, 92, 255, 0.30) 0, transparent 60%),
    radial-gradient(at 92% 92%, rgba(144, 160, 255, 0.20) 0, transparent 45%),
    linear-gradient(180deg, #12131A 0%, #171320 100%);

  --gradient-mesh-ember:
    radial-gradient(at 78% 18%, rgba(202, 91, 255, 0.44) 0, transparent 48%),
    radial-gradient(at 20% 24%, rgba(138, 92, 255, 0.34) 0, transparent 46%),
    radial-gradient(at 50% 95%, rgba(144, 160, 255, 0.26) 0, transparent 50%),
    radial-gradient(at 92% 88%, rgba(202, 91, 255, 0.22) 0, transparent 44%),
    linear-gradient(180deg, #15111F 0%, #1A1326 100%);

  --gradient-mesh-glacier:
    radial-gradient(at 14% 20%, rgba(144, 160, 255, 0.42) 0, transparent 48%),
    radial-gradient(at 78% 14%, rgba(92, 195, 255, 0.30) 0, transparent 46%),
    radial-gradient(at 62% 90%, rgba(138, 92, 255, 0.24) 0, transparent 50%),
    radial-gradient(at 12% 84%, rgba(92, 195, 255, 0.20) 0, transparent 44%),
    linear-gradient(180deg, #10131C 0%, #131926 100%);
}

/* =========================================================
   SEMANTIC — LIGHT
   ========================================================= */
html[data-theme='light'], :root {
  --color-bg-1: #EBF7FD;
  --color-bg-2: #FDFDFE;
  --color-bg-3: #ECF1F8;
  --color-bg-4: #EFF0F1;

  --color-fg-primary:   #232329;
  --color-fg-secondary: #4A4C59;
  --color-fg-tertiary:  #676A6E;
  --color-fg-disabled:  #8A8D92;
  --color-fg-inverse:   #FDFDFE;

  --color-stroke-1: #E6EBF4;
  --color-stroke-2: #CFD4DC;
  --color-stroke-3: #B8BCC3;

  --color-success-bg: #E1F3E3; --color-success-text: #39AD44; --color-success-border: #C2E6C5;
  --color-failure-bg: #FDEBEE; --color-failure-text: #ED3756; --color-failure-border: #F9C1CB;
  --color-warning-bg: #FDF6EB; --color-warning-text: #EDA137; --color-warning-border: #F9E2C1;
  --color-info-bg:    #EBF7FD; --color-info-text:    #37B1ED; --color-info-border:    #C1E7F9;

  --color-interactive-primary:        #3756ED;
  --color-interactive-primary-hover:  #324DD5;
  --color-interactive-primary-active: #2C45BE;
  --color-interactive-primary-fg:     #FFFFFF;

  --color-interactive-secondary:       #37B1ED;
  --color-interactive-secondary-hover: #329FD5;
  --color-interactive-secondary-fg:    #FFFFFF;

  --color-interactive-destructive:        #ED3756;
  --color-interactive-destructive-hover:  #D5324D;
  --color-interactive-destructive-fg:     #FFFFFF;

  --color-link:         #3756ED;
  --color-link-hover:   #324DD5;
  --color-link-visited: #5629B2;

  --color-selection-bg: #C1CBF9;
  --color-selection-fg: #131E53;

  --color-skeleton-base:      #EFF0F1;
  --color-skeleton-highlight: #FDFDFE;

  --color-focus-ring: rgba(55, 86, 237, 0.35);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  --color-overlay: rgba(14, 14, 21, 0.45);
  --shadow-1: 0 1px 2px rgba(20, 25, 46, 0.06), 0 1px 3px rgba(20, 25, 46, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 25, 46, 0.08), 0 2px 4px rgba(20, 25, 46, 0.04);
  --shadow-3: 0 12px 32px rgba(20, 25, 46, 0.12), 0 4px 8px rgba(20, 25, 46, 0.06);

  --color-grid: rgba(39, 41, 59, 0.06);
}

/* =========================================================
   SEMANTIC — DARK
   ========================================================= */
html[data-theme='dark'] {
  --color-bg-1: #0E0E15;
  --color-bg-2: #1D1F2C;
  --color-bg-3: #27293B;
  --color-bg-4: #1D1F2C;

  --color-fg-primary:   #E6EBF4;
  --color-fg-secondary: #ADB0B7;
  --color-fg-tertiary:  #8A8D92;
  --color-fg-disabled:  #4A4C59;
  --color-fg-inverse:   #0E0E15;

  --color-stroke-1: #1F212F;
  --color-stroke-2: #232535;
  --color-stroke-3: #27293B;

  --color-success-bg: #143D18; --color-success-text: #C2E6C5; --color-success-border: #2B8233;
  --color-failure-bg: #53131E; --color-failure-text: #F9C1CB; --color-failure-border: #B22941;
  --color-warning-bg: #533813; --color-warning-text: #F9E2C1; --color-warning-border: #B27929;
  --color-info-bg:    #133E53; --color-info-text:    #C1E7F9; --color-info-border:    #2985B2;

  --color-interactive-primary:        #7589F2;
  --color-interactive-primary-hover:  #8A9CF4;
  --color-interactive-primary-active: #9FB2FD;
  --color-interactive-primary-fg:     #0E0E15;

  --color-interactive-secondary:       #37B1ED;
  --color-interactive-secondary-hover: #5BC0F0;
  --color-interactive-secondary-fg:    #0E0E15;

  --color-interactive-destructive:        #ED3756;
  --color-interactive-destructive-hover:  #F15C74;
  --color-interactive-destructive-fg:     #FFFFFF;

  --color-link:         #9FB2FD;
  --color-link-hover:   #C1CBF9;
  --color-link-visited: #D4C1F9;

  --color-selection-bg: #19276B;
  --color-selection-fg: #E6EBF4;

  --color-skeleton-base:      #1D1F2C;
  --color-skeleton-highlight: #27293B;

  --color-focus-ring: rgba(55, 177, 237, 0.42);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  --color-overlay: rgba(0, 0, 0, 0.7);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);

  --color-grid: rgba(230, 235, 244, 0.05);
}

::selection { background: var(--color-selection-bg); color: var(--color-selection-fg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}