/* Rodang0819 shared design tokens.
   Canonical source of truth for color/type/spacing across every route.
   Existing per-route stylesheets keep their own :root blocks for now (see
   docs/rodang0819-design-integration-brief.md, Findings) but should read the
   same resolved values as here; new routes (reviews) use this file only. */

@font-face{font-family:"Black Han Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/black-han-sans-400.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-600.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans KR";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-kr-400.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans KR";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-kr-600.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans KR";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-kr-700.ttf") format("truetype")}

:root{
  color-scheme: light;

  /* surfaces */
  --paper:#f4eee3; --paper2:#fbf7ef; --card:#fffdf8; --soft:#e8e0d4;
  --page:var(--paper); --bg:var(--paper); --surface:var(--card); --surface-subtle:var(--paper2);

  /* ink */
  --ink:#29231d; --ink2:#5e554a; --muted:#81776a;
  --fg:var(--ink);

  /* lines */
  --line:#d8cdbb; --line2:#e9e0d2;
  --border:var(--line);

  /* brand orange (single canonical value — resolves the hub.css #f4772d /
     notice-shop-progress #d8442c / brand-block #e66f2f / court-layer #f26a21
     four-way drift found in the design-integration audit) */
  --accent:#e66f2f; --accent-deep:#bd4f20; --accent-wash:#f8dfcf; --accent-soft:var(--accent-wash);
  --orange:var(--accent); --pin-border:var(--accent); --pin-bg:var(--accent-wash);

  /* secondary / leaf-green */
  --green:#65704d; --leaf:var(--green);

  /* charcoal / feather / banner */
  --charcoal:#29231d; --brand-banner:#eee2d0; --brand-feather:#29231d; --brand-highlight:rgba(255,255,255,.14);

  /* plastic sheet-protector look (home + binder headers) */
  --plastic:rgba(255,255,255,.42); --plastic-line:rgba(75,70,64,.28);
  --binder-plastic:var(--plastic); --binder-plastic-line:var(--plastic-line);
  --binder-head:#3b3935; --binder-head-ink:#fffaf1; --binder-sheet:#fbfaf5; --binder-ring:#4a4844;
  --binder-green:#55735c; --binder-gold:#e6a750; --binder-olive:#8f8c58;
  --binder-glass:rgba(255,255,255,.15); --binder-toggle:rgba(255,255,255,.08); --binder-on-accent:#fff;

  /* status (used by shop badges, lottery verification, progress stages) */
  --ok:#2f7a4d; --ok-wash:#e2f0e4; --ok-line:#a9d3b1; --ok-solid:var(--ok); --ok-deep:#245f3c;
  --warn:#b07514; --warn-wash:#f6ebd2; --warn-line:#e3cf9a;
  --bad:#c0392b; --bad-wash:#f7e0db; --bad-line:#e7b7ad;
  --danger:var(--bad); --danger-soft:var(--bad-wash); --error:var(--bad);

  /* misc used across files */
  --on-solid:#fff; --primary-fg:#fff; --button-bg:var(--paper2);
  --grid:rgba(54,50,46,.12); --court-line:rgba(23,34,56,.055);
  --sport-white:#fffaf1; --sport-navy:#29231d; --sport-navy-deep:#1f1a16;
  --sh-rgb:41,35,29;
  --shadow:6px 6px 0 rgba(var(--sh-rgb),.13);
  --shadow-sm:3px 3px 0 rgba(var(--sh-rgb),.16);
  --cream:var(--accent-wash);

  /* type */
  --disp:"Black Han Sans","IBM Plex Sans KR",system-ui,sans-serif;
  --sans:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* radii (new — for reviews route; existing routes keep their inline radii) */
  --radius-sm:6px; --radius-md:10px; --radius-lg:20px;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#17130f; --paper2:#211b15; --card:#1d1813; --soft:#3c342b;
  --ink:#f2e8d8; --ink2:#cabdaa; --muted:#9d907c;
  --line:#423729; --line2:#30271e;
  --accent:#f17a38; --accent-deep:#d45b24; --accent-wash:#3b251a;
  --green:#89936c;
  --charcoal:#171513; --brand-banner:#241d17; --brand-feather:#f2e8d8; --brand-highlight:rgba(255,255,255,.08);
  --plastic:rgba(75,70,62,.44); --plastic-line:rgba(239,227,209,.22);
  --binder-head:#211f1c; --binder-head-ink:#f7ecdc; --binder-sheet:#28221c; --binder-ring:#c4b9a8; --binder-green:#77927a;
  --ok:#5cc98a; --ok-wash:#15271d; --ok-line:#2f5e44;
  --warn:#e3b35e; --warn-wash:#2a2012; --warn-line:#5a4823;
  --bad:#ff6f5e; --bad-wash:#2c1714; --bad-line:#5d2f28;
  --sh-rgb:0,0,0;
  --sport-navy:#f2e8d8; --sport-navy-deep:#17130f;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#17130f; --paper2:#211b15; --card:#1d1813; --soft:#3c342b;
    --ink:#f2e8d8; --ink2:#cabdaa; --muted:#9d907c;
    --line:#423729; --line2:#30271e;
    --accent:#f17a38; --accent-deep:#d45b24; --accent-wash:#3b251a;
    --green:#89936c;
    --charcoal:#171513; --brand-banner:#241d17; --brand-feather:#f2e8d8; --brand-highlight:rgba(255,255,255,.08);
    --plastic:rgba(75,70,62,.44); --plastic-line:rgba(239,227,209,.22);
    --binder-head:#211f1c; --binder-head-ink:#f7ecdc; --binder-sheet:#28221c; --binder-ring:#c4b9a8; --binder-green:#77927a;
    --ok:#5cc98a; --ok-wash:#15271d; --ok-line:#2f5e44;
    --warn:#e3b35e; --warn-wash:#2a2012; --warn-line:#5a4823;
    --bad:#ff6f5e; --bad-wash:#2c1714; --bad-line:#5d2f28;
    --sh-rgb:0,0,0;
    --sport-navy:#f2e8d8; --sport-navy-deep:#17130f;
  }
}
