/* ===================================================================
   Nanza — Design Tokens
   Source of truth for code. Generated from Figma variable exports
   (Nanza — Colors). Primitives + semantic light/dark modes.
   =================================================================== */

/* ---- Primitives (raw palette — reference via semantic tokens below) ---- */
:root {
  /* Primary */
  --primary-50: #FFF3FE;
  --primary-100: #FEE6FF;
  --primary-200: #FFCCFF;
  --primary-300: #FFA3FD;
  --primary-400: #FF6DFA;
  --primary-500: #FF4BFF;
  --primary-600: #E316DE;
  --primary-700: #BD0EB6;
  --primary-800: #9A0E93;
  --primary-900: #7E1176;
  --primary-950: #55004F;

  /* Secondary */
  --secondary-50: #F5F8F8;
  --secondary-100: #ECF2F3;
  --secondary-200: #DDE5E8;
  --secondary-300: #C7D5DA;
  --secondary-400: #B0C0C9;
  --secondary-500: #9BACB9;
  --secondary-600: #8496A7;
  --secondary-700: #708090;
  --secondary-800: #5D6976;
  --secondary-900: #4E5861;
  --secondary-950: #2E3438;

  /* Neutral */
  --neutral-50: #FFFFFF;
  --neutral-100: #F5F5F5;
  --neutral-200: #EDEDED;
  --neutral-300: #D6D6D6;
  --neutral-400: #A5A5A5;
  --neutral-500: #767676;
  --neutral-600: #575757;
  --neutral-700: #434343;
  --neutral-800: #292929;
  --neutral-900: #121212;
  --neutral-950: #010101;

  /* Condition */
  --near-mint: #99FF95;
  --very-good: #C8FF8F;
  --good: #EBFF70;
  --fair: #FFE566;
  --poor: #FFB05C;
  --damaged: #FF6567;

  /* ---- Semantic — LIGHT (default) ---- */
  --background: #FFFFFF;
  --text: #121212;
  --overlay-text: #FFFFFF;
  --surface: #F5F8F8;
  --dark-text: #010101;
  --border: #EDEDED;
  --secondary-text: #708090;
  --inactive: #9BACB9;
  --highlight: #FFA3FD;
  --action: #FF6DFA;
  --near-mint: #99FF95;
  --good: #EBFF70;
  --lightly-played: #FFE566;
  --heavily-played: #FFB05C;
  --damaged: #FF6567;
}

/* ---- Semantic — DARK (explicit opt-in) ---- */
[data-theme="dark"] {
  --background: #121212;
  --text: #FFFFFF;
  --overlay-text: #FFFFFF;
  --surface: #2E3438;
  --dark-text: #010101;
  --border: #292929;
  --secondary-text: #C7D5DA;
  --inactive: #5D6976;
  --highlight: #FFA3FD;
  --action: #FF6DFA;
  --near-mint: #99FF95;
  --good: #EBFF70;
  --lightly-played: #FFE566;
  --heavily-played: #FFB05C;
  --damaged: #FF6567;
}

/* ---- Semantic — DARK (system preference, unless light forced) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #121212;
    --text: #FFFFFF;
    --overlay-text: #FFFFFF;
    --surface: #2E3438;
    --dark-text: #010101;
    --border: #292929;
    --secondary-text: #C7D5DA;
    --inactive: #5D6976;
    --highlight: #FFA3FD;
    --action: #FF6DFA;
    --near-mint: #99FF95;
    --good: #EBFF70;
    --lightly-played: #FFE566;
    --heavily-played: #FFB05C;
    --damaged: #FF6567;
  }
}

/* ===================================================================
   TYPOGRAPHY — Euclid Circular B (TEMPORARY)
   Brand face is Roobert (see design.md); the portal renders Euclid Circular B
   until the Roobert *web* license is in place. Roobert WOFF2 are kept in /fonts.
   To swap back: see README "Swapping the font back to Roobert".
   =================================================================== */
:root {
  --font-sans: "Euclid Circular B", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --weight-regular: 400;   /* Euclid Regular  */
  --weight-medium: 500;    /* Euclid Medium   */
  --weight-semibold: 600;  /* Euclid Semibold */
  --weight-bold: 700;      /* Euclid Bold     */

  /* Type scale — PROVISIONAL (inferred). Replace with your Figma text styles. */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --leading-tight: 1.15;
  --leading-normal: 1.45;
}

/* ===================================================================
   SPACING / RADIUS / ELEVATION
   PROVISIONAL — inferred from app screenshots. Overwrite with your
   Figma spacing + corner-radius exports when you send them.
   =================================================================== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;   /* cards */
  --radius-lg: 16px;   /* sheets / large surfaces */
  --radius-pill: 999px; /* CTAs — your buttons read as full pills */

  --elevation-card: 0 1px 2px rgba(1,1,1,0.06), 0 4px 16px rgba(1,1,1,0.08);
  --elevation-overlay: 0 8px 40px rgba(1,1,1,0.24);
}

/* ===================================================================
   FONT LOADING — convert OTF/TTF -> WOFF2 for web before shipping.
   Paths assume /fonts/. (Can generate WOFF2 when we build the portal.)
   =================================================================== */
@font-face { font-family:"Euclid Circular B"; font-weight:400; font-style:normal;
  src:url("/fonts/EuclidCircularB-Regular.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Euclid Circular B"; font-weight:500; font-style:normal;
  src:url("/fonts/EuclidCircularB-Medium.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Euclid Circular B"; font-weight:600; font-style:normal;
  src:url("/fonts/EuclidCircularB-SemiBold.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Euclid Circular B"; font-weight:700; font-style:normal;
  src:url("/fonts/EuclidCircularB-Bold.woff2") format("woff2"); font-display:swap; }