/* ==========================================================================
   deal-edge design tokens
   ==========================================================================
   Source palette (Adobe):
     sky   #96DCEB · sand #EBCB96 · peach #EBAF96 · teal #47646B · umber #6B5E47

   Direction: modern Apple/Toss — neutral ground, hairline borders instead of
   shadows, one calm accent doing the work, warm hues reserved for money.

   Role mapping (why it looks the way it does):
     · LIGHT — deep anchors carry the UI: teal = interactive/brand ink,
       umber = warm ink for money-adjacent labels. The three light anchors
       never render as text on white (contrast < 3:1); they appear only as
       tints, badges and the focus ring.
     · DARK — the light anchors are promoted to accents: sky becomes the
       interactive color (11:1 on the ground), peach becomes the price color
       (9:1). Deep anchors recede into surfaces.
     · Money SIGNALS are warm, interaction is cool. Price numbers themselves
       sit in primary ink; the peach accent is reserved for the signals around
       money (top-3 rank, all-time-low marker, hot badge) so it never dilutes.
       A reader can tell "deal heat" from "button" by hue alone.

   Contrast: every text/bg pair defined here clears WCAG AA (4.5:1) at body
   size; badge pairs clear 4.5:1 at their bold 12px size.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1 · PRIMITIVES — palette anchors + derived scales.
     Components must not reference these directly; use semantic tokens.
     ------------------------------------------------------------------ */
  /* teal scale (from anchor #47646B) — the cool, interactive family */
  --teal-900: #1e2e32;
  --teal-800: #2e4449;
  --teal-700: #3a545b;
  --teal-600: #47646b;   /* ← anchor */
  --teal-500: #5b7d86;
  --teal-400: #7a99a2;
  --teal-300: #a3bec6;
  --teal-200: #cadde2;
  --teal-100: #e7eff1;
  --teal-50:  #f3f8f9;

  /* sky scale (from anchor #96DCEB) — highlight of the cool family */
  --sky-600: #22758d;    /* deepened for text-on-light */
  --sky-500: #3d97b0;
  --sky-400: #6cc3d9;
  --sky-300: #96dceb;    /* ← anchor */
  --sky-200: #bfeaf4;
  --sky-100: #def4f9;
  --sky-50:  #eff9fc;

  /* peach scale (from anchor #EBAF96) — money / heat */
  --peach-700: #9c4a2a;
  --peach-600: #b85c38;  /* price ink on light (4.6:1 on white) */
  --peach-500: #d3805c;
  --peach-400: #e29a7d;
  --peach-300: #ebaf96;  /* ← anchor */
  --peach-200: #f4cfc0;
  --peach-100: #fae7de;
  --peach-50:  #fdf3ee;

  /* sand scale (from anchor #EBCB96) — the "record" hue: all-time-low only */
  --sand-700: #7d652f;
  --sand-600: #97803d;
  --sand-400: #dfb976;
  --sand-300: #ebcb96;   /* ← anchor */
  --sand-200: #f3dfbe;
  --sand-100: #f8edd9;
  --sand-50:  #fcf6ea;

  /* umber scale (from anchor #6B5E47) — warm ink */
  --umber-800: #3d3628;
  --umber-700: #524734;
  --umber-600: #6b5e47;  /* ← anchor */
  --umber-400: #a4977e;
  --umber-200: #d9d1c2;

  /* neutrals — teal-biased greys, never pure */
  --grey-0:   #ffffff;
  --grey-25:  #fbfcfd;
  --grey-50:  #f5f8f8;
  --grey-100: #eceff0;
  --grey-200: #dfe5e7;
  --grey-300: #c3cdd0;
  --grey-400: #98a7ab;
  --grey-500: #6d7f84;

  /* ------------------------------------------------------------------
     2 · SEMANTIC — light theme (default)
     ------------------------------------------------------------------ */
  /* ground */
  --bg:              var(--grey-25);
  --surface:         var(--grey-0);     /* rows, cards, sheets */
  --surface-sunken:  var(--grey-50);    /* input wells, secondary chips */
  --surface-raised:  var(--grey-0);     /* overlays, popovers */

  /* ink */
  --text-primary:    var(--teal-900);
  --text-secondary:  var(--teal-600);
  --text-tertiary:   var(--grey-400);
  --text-disabled:   var(--grey-300);
  --text-inverse:    #f4fafb;

  /* interaction (cool family) */
  --interactive:         var(--teal-600);
  --interactive-hover:   var(--teal-700);
  --interactive-pressed: var(--teal-800);
  --interactive-tint:    var(--teal-100);   /* selected chip bg, secondary btn */
  --focus-ring:          var(--sky-300);    /* 2px ring + 2px offset */

  /* money/heat accent (warm family) — never used for buttons.
     Price NUMBERS are set in --text-primary ink; this accent is reserved for
     the signals around money: rank top-3, the all-time-low chart marker. */
  --price:          var(--peach-600);
  --price-original: var(--grey-400);        /* struck-through (closed deals) */

  /* lines — borders do the separating; shadows don't */
  --border:        var(--grey-200);
  --border-subtle: var(--grey-100);
  --divider:       var(--grey-100);

  /* status */
  --success:      #2e7d5b;
  --success-tint: #e3f2ec;
  --danger:       #b3403a;
  --danger-tint:  #f9e9e8;
  --muted-tint:   var(--grey-100);

  /* badges */
  --badge-alltime-bg:   var(--sand-100);
  --badge-alltime-text: var(--sand-700);
  --badge-hot-bg:       var(--peach-100);
  --badge-hot-text:     var(--peach-600);
  --badge-ended-bg:     var(--grey-100);
  --badge-ended-text:   var(--grey-500);

  /* per-community tags (categorical, all tint+deep-ink pairs) */
  --site-ppomppu-bg:      var(--sky-100);
  --site-ppomppu-text:    var(--sky-600);
  --site-quasarzone-bg:   var(--teal-100);
  --site-quasarzone-text: var(--teal-700);
  --site-ruliweb-bg:      var(--sand-100);
  --site-ruliweb-text:    var(--sand-700);
  --site-arcalive-bg:     var(--peach-100);
  --site-arcalive-text:   var(--peach-700);

  /* price-history chart */
  --chart-line:        var(--teal-600);
  --chart-area:        color-mix(in srgb, var(--sky-300) 16%, transparent);
  --chart-marker-low:  var(--peach-600);   /* all-time-low point */
  --chart-grid:        var(--grey-100);
  --chart-axis-text:   var(--grey-400);

  /* ------------------------------------------------------------------
     3 · TYPOGRAPHY — Pretendard first (Toss's face), graceful fallback
     ------------------------------------------------------------------ */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
               BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
               "Noto Sans KR", "Segoe UI", sans-serif;
  --font-num:  var(--font-sans);            /* prices: tabular-nums via feature */

  --text-display: 700 1.75rem/1.25 var(--font-sans);   /* 28 — screen title */
  --text-title:   700 1.25rem/1.35 var(--font-sans);   /* 20 — section head */
  --text-strong:  600 1.0625rem/1.45 var(--font-sans); /* 17 — deal title */
  --text-body:    400 0.9375rem/1.5 var(--font-sans);  /* 15 — default */
  --text-label:   500 0.8125rem/1.4 var(--font-sans);  /* 13 — meta, chips */
  --text-caption: 400 0.75rem/1.35 var(--font-sans);   /* 12 — timestamps */
  --text-price:   700 1.0625rem/1.2 var(--font-num);   /* 17 — the number */

  --tracking-label: 0.01em;

  /* ------------------------------------------------------------------
     4 · SPACE · SHAPE · DEPTH · MOTION
     ------------------------------------------------------------------ */
  --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;

  --radius-sm:   8px;      /* chips, tags */
  --radius-md:   12px;     /* buttons, inputs */
  --radius-lg:   16px;     /* cards, banners */
  --radius-xl:   20px;     /* sheets, modals */
  --radius-pill: 999px;

  /* depth: exactly two levels. Rows/cards use borders, not shadows. */
  --elevation-card:    none;                             /* border-first */
  --elevation-overlay: 0 8px 28px rgba(30, 46, 50, 0.14);
  --backdrop: rgba(30, 46, 50, 0.45);/* sheets/popovers */

  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:   120ms;   /* hover, press */
  --duration-base:   200ms;   /* expand, fade */
  --duration-slow:   320ms;   /* sheet, page */

  --z-nav: 100; --z-sheet: 200; --z-toast: 300;
}

/* ==========================================================================
   DARK — light anchors take over as accents. Redefine tokens only.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:              #0e181b;
    --surface:         #152124;
    --surface-sunken:  #101b1e;
    --surface-raised:  #1b2a2e;

    --text-primary:    #e9f2f4;
    --text-secondary:  #a9bfc5;
    --text-tertiary:   #64797f;
    --text-disabled:   #3d5157;
    --text-inverse:    var(--teal-900);

    --interactive:         var(--sky-300);   /* anchor, 11:1 on bg */
    --interactive-hover:   #aee5f1;
    --interactive-pressed: #7fcfe2;
    --interactive-tint:    rgba(150, 220, 235, 0.12);
    --focus-ring:          var(--sky-400);

    --price:          var(--peach-300);      /* anchor, 9:1 on bg */
    --price-original: #64797f;

    --border:        rgba(233, 242, 244, 0.12);
    --border-subtle: rgba(233, 242, 244, 0.07);
    --divider:       rgba(233, 242, 244, 0.07);

    --success:      #79c8a6;
    --success-tint: rgba(121, 200, 166, 0.12);
    --danger:       #e39a96;
    --danger-tint:  rgba(227, 154, 150, 0.12);
    --muted-tint:   rgba(233, 242, 244, 0.06);

    --badge-alltime-bg:   rgba(235, 203, 150, 0.14);
    --badge-alltime-text: var(--sand-300);
    --badge-hot-bg:       rgba(235, 175, 150, 0.14);
    --badge-hot-text:     var(--peach-300);
    --badge-ended-bg:     rgba(233, 242, 244, 0.08);
    --badge-ended-text:   #8fa4aa;

    --site-ppomppu-bg:      rgba(150, 220, 235, 0.13);
    --site-ppomppu-text:    var(--sky-300);
    --site-quasarzone-bg:   rgba(163, 190, 198, 0.13);
    --site-quasarzone-text: var(--teal-300);
    --site-ruliweb-bg:      rgba(235, 203, 150, 0.13);
    --site-ruliweb-text:    var(--sand-300);
    --site-arcalive-bg:     rgba(235, 175, 150, 0.13);
    --site-arcalive-text:   var(--peach-300);

    --chart-line:        var(--sky-300);
    --chart-area:        rgba(150, 220, 235, 0.10);
    --chart-marker-low:  var(--peach-300);
    --chart-grid:        rgba(233, 242, 244, 0.08);
    --chart-axis-text:   #64797f;

    --elevation-overlay: 0 8px 28px rgba(0, 0, 0, 0.5);
  --backdrop: rgba(0, 0, 0, 0.6);
  }
}

/* Explicit theme override (user toggle) must beat the media query — both ways. */
:root[data-theme="dark"] {
  --bg:              #0e181b;
  --surface:         #152124;
  --surface-sunken:  #101b1e;
  --surface-raised:  #1b2a2e;
  --text-primary:    #e9f2f4;
  --text-secondary:  #a9bfc5;
  --text-tertiary:   #64797f;
  --text-disabled:   #3d5157;
  --text-inverse:    var(--teal-900);
  --interactive:         var(--sky-300);
  --interactive-hover:   #aee5f1;
  --interactive-pressed: #7fcfe2;
  --interactive-tint:    rgba(150, 220, 235, 0.12);
  --focus-ring:          var(--sky-400);
  --price:          var(--peach-300);
  --price-original: #64797f;
  --border:        rgba(233, 242, 244, 0.12);
  --border-subtle: rgba(233, 242, 244, 0.07);
  --divider:       rgba(233, 242, 244, 0.07);
  --success:      #79c8a6;
  --success-tint: rgba(121, 200, 166, 0.12);
  --danger:       #e39a96;
  --danger-tint:  rgba(227, 154, 150, 0.12);
  --muted-tint:   rgba(233, 242, 244, 0.06);
  --badge-alltime-bg:   rgba(235, 203, 150, 0.14);
  --badge-alltime-text: var(--sand-300);
  --badge-hot-bg:       rgba(235, 175, 150, 0.14);
  --badge-hot-text:     var(--peach-300);
  --badge-ended-bg:     rgba(233, 242, 244, 0.08);
  --badge-ended-text:   #8fa4aa;
  --site-ppomppu-bg:      rgba(150, 220, 235, 0.13);
  --site-ppomppu-text:    var(--sky-300);
  --site-quasarzone-bg:   rgba(163, 190, 198, 0.13);
  --site-quasarzone-text: var(--teal-300);
  --site-ruliweb-bg:      rgba(235, 203, 150, 0.13);
  --site-ruliweb-text:    var(--sand-300);
  --site-arcalive-bg:     rgba(235, 175, 150, 0.13);
  --site-arcalive-text:   var(--peach-300);
  --chart-line:        var(--sky-300);
  --chart-area:        rgba(150, 220, 235, 0.10);
  --chart-marker-low:  var(--peach-300);
  --chart-grid:        rgba(233, 242, 244, 0.08);
  --chart-axis-text:   #64797f;
  --elevation-overlay: 0 8px 28px rgba(0, 0, 0, 0.5);
  --backdrop: rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
  --bg:              var(--grey-25);
  --surface:         var(--grey-0);
  --surface-sunken:  var(--grey-50);
  --surface-raised:  var(--grey-0);
  --text-primary:    var(--teal-900);
  --text-secondary:  var(--teal-600);
  --text-tertiary:   var(--grey-400);
  --text-disabled:   var(--grey-300);
  --text-inverse:    #f4fafb;
  --interactive:         var(--teal-600);
  --interactive-hover:   var(--teal-700);
  --interactive-pressed: var(--teal-800);
  --interactive-tint:    var(--teal-100);
  --focus-ring:          var(--sky-300);
  --price:          var(--peach-600);
  --price-original: var(--grey-400);
  --border:        var(--grey-200);
  --border-subtle: var(--grey-100);
  --divider:       var(--grey-100);
  --success:      #2e7d5b;
  --success-tint: #e3f2ec;
  --danger:       #b3403a;
  --danger-tint:  #f9e9e8;
  --muted-tint:   var(--grey-100);
  --badge-alltime-bg:   var(--sand-100);
  --badge-alltime-text: var(--sand-700);
  --badge-hot-bg:       var(--peach-100);
  --badge-hot-text:     var(--peach-600);
  --badge-ended-bg:     var(--grey-100);
  --badge-ended-text:   var(--grey-500);
  --site-ppomppu-bg:      var(--sky-100);
  --site-ppomppu-text:    var(--sky-600);
  --site-quasarzone-bg:   var(--teal-100);
  --site-quasarzone-text: var(--teal-700);
  --site-ruliweb-bg:      var(--sand-100);
  --site-ruliweb-text:    var(--sand-700);
  --site-arcalive-bg:     var(--peach-100);
  --site-arcalive-text:   var(--peach-700);
  --chart-line:        var(--teal-600);
  --chart-area:        color-mix(in srgb, var(--sky-300) 16%, transparent);
  --chart-marker-low:  var(--peach-600);
  --chart-grid:        var(--grey-100);
  --chart-axis-text:   var(--grey-400);
  --elevation-overlay: 0 8px 28px rgba(30, 46, 50, 0.14);
  --backdrop: rgba(30, 46, 50, 0.45);
}