/* ============================================================
   AIdapt — Design Tokens
   Brand: gold/amber on charcoal · friendly tech · French AI agency
   ============================================================ */

/* Fonts: self-hosted from ./fonts/.
   - Space Grotesk: hero / display moments
   - Inter: UI, body, navigation
   - Quicksand: the wordmark face — only used for "aidapt" lockups
   - JetBrains Mono: code, data, technical labels
*/
@import url("./fonts/fonts.css");

:root {
  /* ====================================================
     COLORS — raw tokens
     ==================================================== */

  /* Gold / Yellow — brand accent (taken from official AIdapt logo) */
  --amber-50:  #FFFCE0;
  --amber-100: #FFF4B3;
  --amber-200: #FFE872;
  --amber-300: #FFDD3A;
  --amber-400: #FFD200;   /* secondary highlight */
  --amber-500: #FFC400;   /* primary brand color — matches the logo body */
  --amber-600: #E5AC00;
  --amber-700: #B88800;
  --amber-800: #7A5A00;
  --amber-900: #4A3700;

  /* Cool charcoal neutrals (dark-leaning brand) */
  --paper:     #FAFAFA;   /* light mode page bg */
  --mist:      #F2F2F4;
  --ash:       #E5E5E8;
  --silver:    #C4C4C9;
  --smoke:     #8E8E94;
  --graphite:  #48484C;
  --carbon:    #1C1C20;   /* dark surface */
  --carbon-2:  #131316;   /* deeper dark */
  --black:     #0A0A0B;   /* hero bg, matches logo presentation */
  --white:     #FFFFFF;

  /* Semantic — paired to work alongside gold without clashing */
  --success-500: #00C896;   /* mint — distinct from gold */
  --warn-500:    #FF9500;   /* orange — only with extra label since close to amber */
  --error-500:   #E5484D;   /* red */
  --info-500:    #4A9CFF;   /* blue */

  /* ====================================================
     COLORS — semantic (LIGHT mode = default)
     ==================================================== */
  --color-bg:           var(--paper);
  --color-bg-elevated:  var(--white);
  --color-bg-sunken:    var(--mist);
  --color-bg-inverse:   var(--black);

  --color-surface:      var(--white);
  --color-surface-alt:  var(--mist);
  --color-surface-dark: var(--carbon);

  --color-border:       rgba(10, 10, 11, 0.08);
  --color-border-strong:rgba(10, 10, 11, 0.18);
  --color-border-inverse:rgba(255, 255, 255, 0.10);

  --color-fg:           var(--carbon);     /* primary text */
  --color-fg-muted:     var(--graphite);   /* secondary text */
  --color-fg-subtle:    var(--smoke);      /* tertiary */
  --color-fg-faint:     var(--silver);     /* hints */
  --color-fg-inverse:   var(--white);

  --color-accent:       var(--amber-500);
  --color-accent-hover: var(--amber-400);
  --color-accent-press: var(--amber-600);
  --color-accent-soft:  var(--amber-100);
  --color-accent-fg:    var(--black);      /* dark text on gold — gold is too light for white text */

  --color-success:      var(--success-500);
  --color-warn:         var(--warn-500);
  --color-error:        var(--error-500);
  --color-info:         var(--info-500);

  /* Focus ring: gold halo */
  --ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--amber-500);

  /* ====================================================
     TYPOGRAPHY
     ==================================================== */
  --font-display:  "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-wordmark: "Quicksand", system-ui, sans-serif;     /* the logotype only */
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --text-2xs:  0.6875rem;  /* 11 */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.0625rem;  /* 17 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  2rem;       /* 32 */
  --text-3xl:  2.75rem;    /* 44 */
  --text-4xl:  3.75rem;    /* 60 */
  --text-5xl:  5.25rem;    /* 84 */
  --text-6xl:  7rem;       /* 112 */

  --leading-tight:  1.02;
  --leading-snug:   1.18;
  --leading-normal: 1.45;
  --leading-relaxed:1.6;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-eyebrow:0.14em;

  /* ====================================================
     SPACING — 4px base
     ==================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ====================================================
     RADII
     ==================================================== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ====================================================
     SHADOWS — cool, sharp.
     On dark surfaces, we use gold glow instead.
     ==================================================== */
  --shadow-xs: 0 1px 0 rgba(10, 10, 11, 0.06);
  --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.06), 0 1px 1px rgba(10, 10, 11, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 10, 11, 0.08), 0 2px 4px rgba(10, 10, 11, 0.04);
  --shadow-lg: 0 14px 32px rgba(10, 10, 11, 0.12), 0 4px 10px rgba(10, 10, 11, 0.06);
  --shadow-xl: 0 28px 56px rgba(10, 10, 11, 0.18), 0 8px 16px rgba(10, 10, 11, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Yellow glow — used on dark backgrounds around the logo / primary surfaces */
  --glow-gold-sm: 0 0 24px rgba(255, 196, 0, 0.25);
  --glow-gold-md: 0 0 48px rgba(255, 196, 0, 0.35);
  --glow-gold-lg: 0 8px 80px rgba(255, 196, 0, 0.45);

  /* Layout */
  --max-content: 1240px;
  --max-prose:   680px;
  --header-h:    72px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ====================================================
   DARK MODE — opt-in via .dark on a parent
   ==================================================== */
.dark, [data-theme="dark"] {
  --color-bg:           var(--black);
  --color-bg-elevated:  var(--carbon);
  --color-bg-sunken:    var(--carbon-2);
  --color-bg-inverse:   var(--white);

  --color-surface:      var(--carbon);
  --color-surface-alt:  var(--carbon-2);
  --color-surface-dark: var(--black);

  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-strong:rgba(255, 255, 255, 0.18);
  --color-border-inverse:rgba(10, 10, 11, 0.10);

  --color-fg:           #F5F5F7;
  --color-fg-muted:     #B8B8BC;
  --color-fg-subtle:    var(--smoke);
  --color-fg-faint:     var(--graphite);
  --color-fg-inverse:   var(--carbon);

  --ring: 0 0 0 2px var(--black), 0 0 0 4px var(--amber-500);
}

/* ====================================================
   SEMANTIC TEXT CLASSES
   ==================================================== */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size:   var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  font-weight: 500;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size:   var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

.t-display-bold {
  font-family: var(--font-display);
  font-weight: 600;
  font-size:   var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--color-fg);
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size:   var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--color-fg);
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size:   var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size:   var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-muted);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
}

.t-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-fg-muted);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-fg-subtle);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size:   var(--text-sm);
  font-feature-settings: "ss01", "tnum";
  color: var(--color-fg);
}

/* Signature moment: a phrase highlighted in gold inside otherwise-default text.
   Use ONCE per view. */
.t-display em.brand,
.t-body em.brand,
.t-lead em.brand,
.t-h1 em.brand,
.t-h2 em.brand {
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--amber-500);
  background: linear-gradient(180deg, var(--amber-300), var(--amber-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}