/* =============================================================
   AI-Ya! Design System — Core Tokens
   Colors, Type, Spacing, Radii, Shadows, Borders
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {

  /* ───────────────────────── BRAND PALETTE ─────────────────────
     The six brand colors, straight from the logo badge. */

  --teal-900:        #0f3540;   /* deepest, used sparingly       */
  --teal-700:        #1a4d5c;   /* PRIMARY — main bg/headers     */
  --teal-500:        #2a6f7f;   /* hover states on teal surfaces */
  --teal-100:        #d6ecee;   /* tint, panels on light bg      */

  --cyan-500:        #4dd0d0;   /* accent / interactive          */
  --cyan-400:        #6fdada;   /* hover on cyan                 */
  --cyan-200:        #b8ecec;   /* tint                          */

  --gold-500:        #f4b942;   /* CTA / highlights / badges     */
  --gold-600:        #e0a52d;   /* press                          */
  --gold-200:        #fce4ad;   /* tint                          */

  --coral-500:       #ff8866;   /* secondary accent              */
  --coral-600:       #ee6f4a;   /* press                          */
  --coral-200:       #ffd2c4;   /* tint                          */

  --wood-500:        #8b6543;   /* warm accent / labels          */
  --wood-300:        #b89674;   /* softer wood                   */
  --wood-100:        #ead9c4;   /* parchment tint                */

  --white:           #ffffff;
  --cream:           #fbf6ec;   /* off-white card background     */
  --paper:           #f4ecd9;   /* warm paper, "kraft" feel      */

  --ink-900:         #15252a;   /* darkest text                  */
  --ink-700:         #2a3e44;   /* body text on cream            */
  --ink-500:         #5a6f74;   /* muted                         */
  --ink-300:         #9eb0b4;   /* placeholder / divider         */

  /* ───────────────────────── SEMANTIC ROLES ──────────────────── */

  --color-bg:               var(--cream);
  --color-bg-elevated:      var(--white);
  --color-bg-inverse:       var(--teal-700);
  --color-bg-accent:        var(--gold-500);

  --color-fg:               var(--ink-900);
  --color-fg-muted:         var(--ink-500);
  --color-fg-on-dark:       var(--white);
  --color-fg-on-accent:     var(--teal-900);

  --color-primary:          var(--teal-700);
  --color-primary-hover:    var(--teal-500);
  --color-accent:           var(--cyan-500);
  --color-cta:              var(--gold-500);
  --color-cta-hover:        var(--gold-600);
  --color-warn:             var(--coral-500);

  --color-border:           var(--ink-900);   /* bold outlines */
  --color-border-soft:      #d8c8a8;          /* on cream */
  --color-border-dark:      var(--teal-900);

  /* ───────────────────────── TYPOGRAPHY ─────────────────────── */

  --font-display:  "Nunito", "Poppins", system-ui, sans-serif;
  --font-body:     "Inter", "Open Sans", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-extra:   800;
  --w-black:   900;

  /* Type scale — slightly oversized; brand is loud + friendly */
  --fs-display: 64px;     --lh-display: 1.02;
  --fs-h1:      44px;     --lh-h1:      1.08;
  --fs-h2:      32px;     --lh-h2:      1.15;
  --fs-h3:      22px;     --lh-h3:      1.25;
  --fs-lead:    20px;     --lh-lead:    1.45;
  --fs-body:    16px;     --lh-body:    1.55;
  --fs-small:   14px;     --lh-small:   1.5;
  --fs-tiny:    12px;     --lh-tiny:    1.4;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-display: -0.01em;
  --ls-caps:    0.08em;

  /* ───────────────────────── SPACING ─────────────────────────── */
  /* 4px base; generous to support 'breathing' brand feel */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ───────────────────────── RADII ───────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;   /* DEFAULT — used on cards, buttons, inputs */
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ───────────────────────── BORDERS ─────────────────────────── */
  --b-1: 1.5px;
  --b-2: 2px;     /* default bold outline */
  --b-3: 3px;     /* heavier outline for hero cards */

  /* ───────────────────── OFFSET / NEO SHADOWS ────────────────── */
  /* "neo-brutal" style offset shadows — the brand signature */
  --shadow-offset-sm: 3px 3px 0 0 var(--ink-900);
  --shadow-offset-md: 5px 5px 0 0 var(--ink-900);
  --shadow-offset-lg: 8px 8px 0 0 var(--ink-900);

  --shadow-offset-teal: 5px 5px 0 0 var(--teal-700);
  --shadow-offset-cyan: 5px 5px 0 0 var(--cyan-500);
  --shadow-offset-gold: 5px 5px 0 0 var(--gold-500);

  /* Soft drop shadows — used sparingly, for floating overlays */
  --shadow-soft-sm: 0 2px 6px rgba(15, 53, 64, 0.10);
  --shadow-soft-md: 0 6px 18px rgba(15, 53, 64, 0.14);
  --shadow-soft-lg: 0 16px 40px rgba(15, 53, 64, 0.18);

  /* ───────────────────────── MOTION ──────────────────────────── */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1);   /* gentle bounce on press release */
  --t-fast:      120ms;
  --t-base:      200ms;
  --t-slow:      320ms;
}

/* ─────────────────────── ELEMENT DEFAULTS ──────────────────── */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h-display {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  color: var(--color-fg);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.h-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--w-black); }
h1, .h1   { font-size: var(--fs-h1);      line-height: var(--lh-h1); }
h2, .h2   { font-size: var(--fs-h2);      line-height: var(--lh-h2); font-weight: var(--w-bold); }
h3, .h3   { font-size: var(--fs-h3);      line-height: var(--lh-h3); font-weight: var(--w-bold); }

.lead    { font-size: var(--fs-lead);  line-height: var(--lh-lead);  font-weight: var(--w-medium); }
.body    { font-size: var(--fs-body);  line-height: var(--lh-body); }
.small   { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-fg-muted); }
.tiny    { font-size: var(--fs-tiny);  line-height: var(--lh-tiny); letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: var(--w-bold); }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ─────────────────────── BRAND WORDMARK ───────────────────────
   "AI-Ya!" — each letter in a different brand color. Use
   the .wordmark class on a span or h1, with one nested
   <span> per letter group. */

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  letter-spacing: -0.025em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.wordmark > .l-a { color: var(--cyan-500); }
.wordmark > .l-i { color: var(--gold-500); }
.wordmark > .l-dash { color: var(--white); }
.wordmark > .l-y { color: var(--cyan-500); }
.wordmark > .l-a2 { color: var(--coral-500); }
.wordmark > .l-bang { color: var(--gold-500); }