/* ============================================================
   Duel 4.0: Brand tokens
   Aeonik typography. Cyan + lilac on cream + ink.
   ============================================================ */

/* ── Aeonik (local OTF, Duel's primary brand typeface) ─────── */
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Mono fallback (only used for the rare data cell) */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── Brand / Base ─────────────────────────────────────────── */
  --duel-ink:             #101010;    /* signature near-black */
  --duel-cream:           #FAF6EE;    /* Duel signature warm canvas */
  --duel-cream-2:         #F3EDDF;    /* deeper cream for surfaces */
  --duel-cream-3:         #E9E1CC;    /* deepest cream / inset */
  --duel-paper:           #FFFFFF;
  --duel-content:         #101010;
  --duel-content-on-dark: #FFFFFF;

  /* ── Accents (Duel 4.0 palette) ───────────────────────────── */
  --duel-cyan:        #56CDED;
  --duel-cyan-bright: #00D4F5;
  --duel-cyan-deep:   #008AA9;
  --duel-lilac:       #DF9EFF;
  --duel-lilac-soft:  #F1CFFF;
  --duel-white:       #FFFFFF;
  --duel-gray:        #424242;
  --duel-green:       #B4ED3E;
  --duel-orange:      #ECA436;
  --duel-red:         #EE372E;
  --duel-purple:      #61456F;

  /* ── Accent (cyan-forward, tweakable) ─────────────────────── */
  --accent:        var(--duel-cyan);
  --accent-strong: var(--duel-cyan-deep);
  --accent-soft:   rgba(86, 205, 237, 0.16);
  --accent-edge:   rgba(86, 205, 237, 0.42);
  --accent-glow:   rgba(86, 205, 237, 0.32);
  --accent-2:      var(--duel-lilac);
  --accent-2-soft: rgba(223, 158, 255, 0.18);

  /* ── Foreground semantics ─────────────────────────────────── */
  --fg-1: #101010;
  --fg-2: rgba(16, 16, 16, 0.78);
  --fg-3: rgba(16, 16, 16, 0.62);
  --fg-4: rgba(16, 16, 16, 0.44);
  --fg-5: rgba(16, 16, 16, 0.26);
  --fg-inverse: #FFFFFF;

  /* ── Stroke / divider opacities (tuned for cream) ─────────── */
  --stroke-5:  rgba(16, 16, 16, 0.05);
  --stroke-10: rgba(16, 16, 16, 0.09);
  --stroke-20: rgba(16, 16, 16, 0.18);
  --stroke-40: rgba(16, 16, 16, 0.38);

  /* ── Surface tints ────────────────────────────────────────── */
  --surface-app:   var(--duel-cream);
  --surface-card:  #FFFFFF;
  --surface-inset: var(--duel-cream-2);
  --surface-deep:  var(--duel-cream-3);
  --surface-ink:   var(--duel-ink);
  --surface-glass: rgba(250, 246, 238, 0.72);

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-round: 999px;

  /* ── Spacing scale ────────────────────────────────────────── */
  --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; --space-40: 160px;

  /* ── Shadows (warm-toned for cream surfaces) ──────────────── */
  --shadow-xs: 0 1px 2px 0 rgba(40, 30, 10, 0.04);
  --shadow-sm: 0 2px 6px -1px rgba(40, 30, 10, 0.06), 0 1px 3px -1px rgba(40, 30, 10, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(40, 30, 10, 0.10), 0 2px 6px -3px rgba(40, 30, 10, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(40, 30, 10, 0.14), 0 6px 12px -6px rgba(40, 30, 10, 0.08);
  --shadow-xl: 0 32px 64px -16px rgba(40, 30, 10, 0.18), 0 10px 20px -10px rgba(40, 30, 10, 0.10);
  --shadow-cyan: 0 16px 48px -16px rgba(86, 205, 237, 0.45);
  --shadow-cyan-sm: 0 8px 24px -8px rgba(86, 205, 237, 0.40);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-sans: "Aeonik", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tailwind-aligned type scale */
  --fs-xxs:  10px;  --lh-xxs:  12px;
  --fs-xs:   12px;  --lh-xs:   16px;
  --fs-sm:   13px;  --lh-sm:   18px;
  --fs-base: 16px;  --lh-base: 22px;
  --fs-lg:   18px;  --lh-lg:   26px;
  --fs-xl:   20px;  --lh-xl:   28px;
  --fs-2xl:  24px;  --lh-2xl:  32px;
  --fs-3xl:  30px;  --lh-3xl:  38px;
  --fs-4xl:  38px;  --lh-4xl:  46px;
  --fs-5xl:  52px;  --lh-5xl:  60px;
  --fs-6xl:  72px;  --lh-6xl:  80px;
  --fs-7xl:  96px;  --lh-7xl:  100px;
  --fs-8xl: 132px;  --lh-8xl: 132px;

  --lh-tight:  1.02;
  --lh-snug:   1.12;
  --lh-normal: 1.45;
  --lh-relax:  1.6;

  /* ── 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: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   Base elements
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "kern";
}
h1, h2, h3, h4, h5, h6 { color: var(--fg-1); font-family: var(--font-sans); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }
a { color: inherit; text-decoration: none; }