/* ============================================================
   IntellaQ — Raw color palette (primitives)
   Never reference these directly in product code; use the
   semantic aliases in semantic.css. These are the source of
   truth for the brand: deep navy ink + vibrant teal accent.
   ============================================================ */
:root {
  /* ---- Teal — the brand accent. Deep, confident cyan-teal from the logo ---- */
  --teal-50:  #E4F4F7;
  --teal-100: #BEE6EC;
  --teal-200: #8FD2DD;
  --teal-300: #4FB6C8;
  --teal-400: #1D95AC;
  --teal-500: #007890; /* ◀ brand teal (logo "Q" + underline) */
  --teal-600: #066377;
  --teal-700: #0A4F5F;
  --teal-800: #0C3F4C;
  --teal-900: #0C313B;

  /* ---- Navy — the brand ink. Wordmark, headings, dark surfaces ---- */
  --navy-50:  #EAF1F5;
  --navy-100: #CFDEE7;
  --navy-200: #A3BFCE;
  --navy-300: #6E92A8;
  --navy-400: #3E6880;
  --navy-500: #1C4A62;
  --navy-600: #0C374E;
  --navy-700: #042C42;
  --navy-800: #00243C; /* ◀ brand navy (logo "INTELLA") */
  --navy-900: #001827;
  --navy-950: #000F1A;

  /* ---- Slate — cool neutral for text, borders, surfaces ---- */
  --slate-0:   #FFFFFF;
  --slate-50:  #F6F9FC;
  --slate-100: #EDF1F6;
  --slate-200: #E0E6EF;
  --slate-300: #CAD3DF;
  --slate-400: #9CAABB;
  --slate-500: #6C7B8F;
  --slate-600: #4E5C70;
  --slate-700: #38445A;
  --slate-800: #26303F;
  --slate-900: #18202B;
  --slate-950: #0E141C;

  /* ---- Semantic hues ---- */
  --green-50:  #E7F8F0;
  --green-100: #C2EEDA;
  --green-500: #15A66A;
  --green-600: #0F8A57;
  --green-700: #0C6E46;

  --amber-50:  #FEF5E7;
  --amber-100: #FBE6BF;
  --amber-500: #ED9B11;
  --amber-600: #C97F08;
  --amber-700: #9C6206;

  --red-50:   #FDECEC;
  --red-100:  #F9CFCF;
  --red-500:  #E14848;
  --red-600:  #C42F2F;
  --red-700:  #9E2424;

  --blue-50:  #EAF1FE;
  --blue-100: #CBDDFB;
  --blue-500: #3B7BF6;
  --blue-600: #2360DC;
  --blue-700: #1A4BAE;

  /* ---- Pure ---- */
  --white: #FFFFFF;
  --black: #000F1A;
}
/* ============================================================
   IntellaQ — Typography tokens
   Display: Space Grotesk · Body: Plus Jakarta Sans · Mono: JetBrains Mono
   Type scale is a 1.25 (major third) ramp tuned for SaaS UI + marketing.
   ============================================================ */
:root {
  /* Families */
  --font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* Font sizes — fluid where useful via clamp() */
  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */
  --text-6xl:  5.25rem; /* 84 — hero; pair with clamp() inline for fluidity */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.018em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.16em; /* uppercase mono eyebrows */

  /* Semantic roles */
  --font-heading: var(--font-display);
  --font-eyebrow: var(--font-mono);
}
/* ============================================================
   IntellaQ — Spacing scale (4px base grid)
   ============================================================ */
:root {
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem; /* 2  */
  --space-1:   0.25rem;  /* 4  */
  --space-1-5: 0.375rem; /* 6  */
  --space-2:   0.5rem;   /* 8  */
  --space-2-5: 0.625rem; /* 10 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-7:   1.75rem;  /* 28 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */
  --space-40:  10rem;    /* 160 */

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;
  --gutter:        clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
  --section-y:     clamp(4rem, 8vw, 8rem);     /* @kind spacing */
}
/* ============================================================
   IntellaQ — Radius & elevation
   Soft, friendly radii; layered cool-navy-tinted shadows.
   A teal "glow" for primary actions adds the vibrant SaaS feel.
   ============================================================ */
:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-3xl:  40px;
  --radius-full: 999px;

  /* Shadows — tinted with navy for cohesion */
  --shadow-xs:  0 1px 2px rgba(0,36,60,0.06);
  --shadow-sm:  0 1px 3px rgba(0,36,60,0.08), 0 1px 2px rgba(0,36,60,0.05);
  --shadow-md:  0 4px 10px -2px rgba(0,36,60,0.10), 0 2px 6px -2px rgba(0,36,60,0.07);
  --shadow-lg:  0 14px 28px -8px rgba(0,36,60,0.16), 0 6px 12px -6px rgba(0,36,60,0.08);
  --shadow-xl:  0 28px 60px -16px rgba(0,36,60,0.24), 0 10px 24px -12px rgba(0,36,60,0.12);
  --shadow-inner: inset 0 1px 2px rgba(0,36,60,0.08);

  /* Brand glow — primary buttons / focused hero elements */
  --glow-brand: 0 8px 24px -6px rgba(0,120,144,0.45);
  --glow-brand-sm: 0 4px 12px -3px rgba(0,120,144,0.40);
}

[data-theme="dark"] {
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 12px -2px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.40);
  --shadow-lg:  0 16px 32px -8px rgba(0,0,0,0.60), 0 6px 12px -6px rgba(0,0,0,0.45);
  --shadow-xl:  0 30px 64px -16px rgba(0,0,0,0.70), 0 10px 24px -12px rgba(0,0,0,0.50);
  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.45);
  --glow-brand: 0 8px 28px -6px rgba(0,120,144,0.55);
  --glow-brand-sm: 0 4px 14px -3px rgba(0,120,144,0.50);
}
/* ============================================================
   IntellaQ — Motion
   "Bold, smooth animation": confident easing, generous but
   never sluggish durations. Spring for playful entrances,
   standard ease-out for UI feedback.
   ============================================================ */
:root {
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    150ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
  --dur-slower:  680ms; /* @kind other */

  /* Easings */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */

  /* Composable transitions */
  --transition-colors: color var(--dur-fast) var(--ease-out),
                       background-color var(--dur-fast) var(--ease-out),
                       border-color var(--dur-fast) var(--ease-out),
                       box-shadow var(--dur-fast) var(--ease-out); /* @kind other */
  --transition-transform: transform var(--dur-base) var(--ease-out); /* @kind other */
}
/* ============================================================
   IntellaQ — Semantic color aliases
   These are the tokens product code should consume. Light mode
   on :root, dark mode under [data-theme="dark"]. Toggle by
   setting data-theme="dark" on <html> or any container.
   ============================================================ */
:root {
  /* Surfaces / backgrounds */
  --bg-base:        var(--slate-50);   /* app/page background */
  --bg-subtle:      var(--slate-100);  /* sunken zones, rails */
  --surface:        var(--white);      /* default card surface */
  --surface-raised: var(--white);      /* popovers, menus (with shadow) */
  --surface-sunken: var(--slate-100);  /* inset wells, inputs bg */
  --surface-inverse:var(--navy-800);   /* dark sections on light pages */

  /* Text */
  --text-strong:  var(--navy-800);  /* headings */
  --text-body:    var(--slate-700); /* paragraph copy */
  --text-muted:   var(--slate-500); /* secondary, captions */
  --text-subtle:  var(--slate-400); /* placeholder, disabled */
  --text-inverse: var(--white);     /* on dark surfaces */
  --text-brand:   var(--teal-700);  /* links / accent text on light */
  --text-on-brand:var(--white);     /* text on teal fill */

  /* Borders / dividers */
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-subtle: var(--slate-100);
  --border-inverse:rgba(255,255,255,0.14);

  /* Brand / primary action */
  --brand:         var(--teal-500);
  --brand-hover:   var(--teal-600);
  --brand-active:  var(--teal-700);
  --brand-subtle:  var(--teal-50);
  --brand-subtle-2:var(--teal-100);
  --brand-border:  var(--teal-200);
  --on-brand:      var(--white);

  /* Ink (navy as secondary/solid neutral action) */
  --ink:           var(--navy-800);
  --ink-hover:     var(--navy-700);
  --ink-active:    var(--navy-900);
  --ink-subtle:    var(--navy-50);
  --on-ink:        var(--white);

  /* Focus ring */
  --ring:          var(--teal-400);
  --ring-offset:   var(--white);

  /* Semantic states */
  --success:        var(--green-600);
  --success-subtle: var(--green-50);
  --success-border: var(--green-100);
  --success-fg:     var(--green-700);

  --warning:        var(--amber-500);
  --warning-subtle: var(--amber-50);
  --warning-border: var(--amber-100);
  --warning-fg:     var(--amber-700);

  --danger:         var(--red-500);
  --danger-subtle:  var(--red-50);
  --danger-border:  var(--red-100);
  --danger-fg:      var(--red-700);

  --info:           var(--blue-500);
  --info-subtle:    var(--blue-50);
  --info-border:    var(--blue-100);
  --info-fg:        var(--blue-700);

  /* Accent gradient (vibrant, used sparingly for hero/CTAs) */
  --gradient-brand: linear-gradient(120deg, var(--teal-400) 0%, var(--teal-600) 60%, var(--navy-700) 130%);
  --gradient-ink:   linear-gradient(150deg, var(--navy-700) 0%, var(--navy-900) 100%);
  --gradient-mesh:  radial-gradient(80% 120% at 12% 8%, rgba(0,120,144,0.18) 0%, transparent 55%),
                    radial-gradient(70% 100% at 100% 0%, rgba(29,149,172,0.16) 0%, transparent 50%); /* @kind color */
}

/* ------------------------------- DARK ------------------------------- */
[data-theme="dark"] {
  --bg-base:        var(--navy-950);
  --bg-subtle:      var(--navy-900);
  --surface:        var(--navy-800);
  --surface-raised: #0C2A49;
  --surface-sunken: var(--navy-900);
  --surface-inverse:var(--slate-50);

  --text-strong:  var(--slate-50);
  --text-body:    var(--slate-300);
  --text-muted:   var(--slate-400);
  --text-subtle:  var(--navy-400);
  --text-inverse: var(--navy-900);
  --text-brand:   var(--teal-300);
  --text-on-brand:var(--navy-900);

  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-subtle: rgba(255,255,255,0.06);
  --border-inverse:rgba(0,36,60,0.14);

  --brand:         var(--teal-400);
  --brand-hover:   var(--teal-300);
  --brand-active:  var(--teal-500);
  --brand-subtle:  rgba(0,120,144,0.14);
  --brand-subtle-2:rgba(0,120,144,0.22);
  --brand-border:  rgba(0,120,144,0.35);
  --on-brand:      var(--navy-950);

  --ink:           var(--slate-50);
  --ink-hover:     var(--white);
  --ink-active:    var(--slate-200);
  --ink-subtle:    rgba(255,255,255,0.08);
  --on-ink:        var(--navy-900);

  --ring:          var(--teal-300);
  --ring-offset:   var(--navy-950);

  --success:        #2DBE83;
  --success-subtle: rgba(21,166,106,0.16);
  --success-border: rgba(21,166,106,0.32);
  --success-fg:     #6FE3B0;

  --warning:        #F2B23E;
  --warning-subtle: rgba(237,155,17,0.16);
  --warning-border: rgba(237,155,17,0.32);
  --warning-fg:     #F8CE7E;

  --danger:         #F26464;
  --danger-subtle:  rgba(225,72,72,0.16);
  --danger-border:  rgba(225,72,72,0.32);
  --danger-fg:      #F7A0A0;

  --info:           #5C92F8;
  --info-subtle:    rgba(59,123,246,0.16);
  --info-border:    rgba(59,123,246,0.32);
  --info-fg:        #A6C4FB;

  --gradient-mesh:  radial-gradient(80% 120% at 12% 8%, rgba(0,120,144,0.22) 0%, transparent 55%),
                    radial-gradient(70% 100% at 100% 0%, rgba(29,149,172,0.14) 0%, transparent 50%); /* @kind color */
}