/* RangeRead design tokens.
 *
 * Every spacing, size, radius and colour in the app should come from this
 * file. The old stylesheet grew 31 distinct font sizes, 34 padding values and
 * 75 hard-coded colours, which is why the UI read as inconsistent — the fix is
 * a small set of steps chosen once, not a nicer value picked each time.
 *
 * Loaded before main.css so anything here can be overridden during migration.
 */

:root {
    /* ---- spacing: a 4px base, 8 steps. Nothing in between. ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 48px;

    /* ---- type: 7 steps. Line heights pair with them. ---- */
    --fs-micro: 10px;   /* uppercase labels, tab text        */
    --fs-tiny:  11px;   /* stack figures, pot                */
    --fs-sm:    13px;   /* action lines, secondary           */
    --fs-base:  15px;   /* body, buttons                     */
    --fs-md:    17px;   /* card ranks, player names on wide  */
    --fs-lg:    22px;   /* section headings                  */
    --fs-xl:    30px;   /* results modal title               */

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-body:  1.55;

    --fw-normal: 400;
    --fw-medium: 600;
    --fw-bold:   700;
    --fw-heavy:  800;

    --ls-tight: -0.02em;   /* headings, brand */
    --ls-label:  0.08em;   /* uppercase labels */

    /* ---- radius: three, plus a pill ---- */
    --r-sm:   5px;    /* cards        */
    --r-md:   8px;    /* chips, tags  */
    --r-lg:  12px;    /* buttons, sheets */
    --r-pill: 999px;

    /* ---- neutrals: cool grey, very slightly green-biased ---- */
    --ink:        #111418;   /* primary text            */
    --ink-soft:   #4b5563;   /* secondary text          */
    --ink-faint:  #9aa1ab;   /* labels, disabled        */
    --ink-ghost:  #c8ccd2;   /* placeholders            */

    --surface:    #ffffff;   /* page and chrome         */
    --surface-2:  #f1f3f5;   /* wells, panels           */
    --rule:       #e6e8ec;   /* borders                 */
    --rule-soft:  #f0f2f4;   /* internal dividers       */

    /* A playing card is its own material, not a panel. It has its own tokens
       so a theme can decide about it separately — in the dark theme the cards
       stay light, because a card is a physical white object and a table at
       night is a lit table, not an inverted one. In this theme they simply
       match the surface. */
    --card-bg:    var(--surface);
    --card-ink:   var(--ink);
    /* The mark on a card you have picked in the grid. Sits on the card, and
       the card is light in both themes, so this stays the saturated purple in
       both -- the dark theme's --replay-ink is a pastel for text on a panel
       and would wash out on white. Purple because green, amber and red are
       all taken by feedback, and the pick must never read as a result. */
    --pick:       #5a44a0;
    /* Feedback shading ON a card. Light in both themes for the same reason
       the card is: --accent-soft and friends are panel tints and go dark
       with the panels, which left dark ink on a dark green card. */
    --card-hit:   #c6e3d2;
    /* Amber and red are flat tiles with the colour carried in the ink, the
       way the grey "not available" tile is -- one look says "not a card you
       can tap". Green is playable and stays a lit card with an edge. */
    --card-near:  #efe0b0;
    --card-near-ink:  #7a5a10;
    --card-known: #efcbc5;
    --card-known-ink: #8c3f35;
    --legend-known:   #d9837a;   /* the legend swatch, lighter than the tile ink */
    /* Hearts and diamonds on a tinted card. --card-red is 4.1:1 on the
       darker tints, just under AA; a notch deeper clears it. */
    --card-red-tint: #a5221b;
    --card-near-red: var(--card-near-ink);   /* one colour per tile, like the grey one */
    /* A confirmed card is still playable, so it keeps an edge. Tone-on-tone
       rather than the neutral grey, which went muddy over a green fill and
       left the card reading as flat as the ones you cannot tap. */
    --card-hit-line: #92c4a7;
    --card-line:  var(--rule);
    --placeholder-line: #d8dce1;   /* the dashed "no card yet" outline */
    /* The opponent's face-down cards. Their own tokens because they are an
       object, not an absence: a hidden hand is the thing you are trying to
       read, so it has to be visibly THERE. */
    --card-back-bg:   var(--surface-2);
    --card-back-line: var(--rule);

    /* ---- feedback: the only saturated colours in the UI ---- */
    --hit:        #3aa06a;   /* GREEN — exact card      */
    --near:       #d9a441;   /* YELLOW — right rank     */
    --miss:       var(--rule);
    --miss-ink:   var(--ink-faint);
    --on-hit:     #ffffff;
    --on-near:    #ffffff;
    --on-badge:   #ffffff;   /* text on a saturated action badge */

    --accent:     #1f7a4d;   /* live-action marker      */
    /* The same green as an RGB triple, for the one place that needs it at two
       alphas (the action bar's attention pulse). */
    --accent-rgb: 31, 122, 77;
    /* Tinted companions to --accent, for surfaces that should carry its
       colour without carrying its weight: a secondary button, a count chip.
       Solid accent is reserved for the one primary action on the screen. */
    --accent-soft: #e7f2ec;
    --accent-line: #bcdccb;

    /* Same idea in the warning key, for "running out". */
    --warn-soft:  #fbf0d8;
    --warn-ink:   #8a6516;

    /* Replay. Its own key on purpose: it is a secondary action like "back to
       the live street", but it does something different, and two soft green
       buttons on one screen would read as the same button twice. Violet is
       already in the palette as the re-raise badge, so this borrows a colour
       the design has rather than introducing one. */
    --replay-soft: #efebf9;
    --replay-line: #d5cbee;
    --replay-ink:  #5a44a0;

    /* ---- action badges: the play type, read at a glance ---- */
    --act-neutral: #6b7280;  /* posted blind              */
    --act-passive: #99721d;  /* check, call               */
    --act-fold:    #c0392b;  /* fold                      */
    --act-aggro:   #1f7a4d;  /* bet, raise                */
    --act-reraise: #6d54b5;  /* 3-bet and up, all-in      */
    --card-red:   #c0392b;   /* hearts and diamonds     */
    --video:      #e02424;   /* the Watch Hand button -- YouTube's red, not a suit */
    --known-bg:   #f9dfda;   /* picker: card already on the table */
    /* Deepened from #b4655c, which sat at 3.35:1 on its own tint — these
       cards carry a rank at 11px and are the game telling you "you already
       know this one", so it has to be readable at a glance. 4.55:1. */
    --known-ink:  #95544c;   /* its rank and suit                 */

    /* ---- elevation ---- */
    /* An RGB triple rather than finished colours: the shadows below are cast
       at half a dozen different alphas, and a theme needs to change the ink
       without restating every one of them. */
    --shadow-ink: 17, 20, 24;
    --shadow-sm: 0 1px 2px rgba(var(--shadow-ink), .08);
    --shadow-md: 0 4px 14px rgba(var(--shadow-ink), .10);

    /* What dims the table behind a sheet or the drawer. */
    --backdrop: rgba(17, 20, 24, .38);

    /* The knob of a settings switch. Stays light in both themes — a physical
       switch does not change colour when the room does. */
    --switch-knob: #ffffff;

    /* ---- motion ---- */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --dur-fast: 120ms;
    --dur:      220ms;

    /* ---- layout ---- */
    /* Figures use a monospaced face so a number changing mid-animation can't
       shift the layout. System stack rather than a webfont: the CSP is
       style-src 'self', which blocks external stylesheets outright. */
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --tap-min: 44px;         /* minimum touch target */
    --screen-max: 480px;     /* the play column never exceeds this */
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; }
}


/* ==========================================================================
   Dark theme
   ==========================================================================
   Set by Settings, as data-theme="dark" on <html>. Deliberately not an
   inversion — an inverted design is a light design with the lights off, and
   it shows.
   Three decisions carry it:

   1. The cards stay light. A playing card is a physical white object, and a
      poker table at night is a LIT table, not a negative of a daytime one.
      Keeping the cards bright also puts the eye exactly where the game wants
      it, and keeps a rank legible at 11px, which pale-on-dark would not.

   2. Panels sit above the page, not below it. In the light theme a well is
      grey on white — recessed. Repeating that here would make every panel a
      hole in the screen, so the relationship flips: the page is the darkest
      thing and panels are lifted out of it.

   3. Saturated colours are lifted, not reused. #1f7a4d is a good green on
      white and a muddy one on near-black, so every badge, tile and accent is
      re-picked for this background rather than inherited from the other
      theme.
   ========================================================================== */

:root[data-theme="dark"] {
    /* Native controls (the speed slider, the switches, the scrollbars) read
       this and draw themselves dark. Without it they stay light and stand out
       as the one thing that did not get the memo. */
    color-scheme: dark;

    /* Not pure white on not-pure-black. #fff on #000 haloes at small sizes. */
    --ink:        #e9edf2;
    --ink-soft:   #a9b2bd;
    --ink-faint:  #848d97;   /* 4.5:1 on the panels, measured */
    --ink-ghost:  #4a525c;

    --surface:    #14171b;   /* page and chrome — the darkest thing */
    --surface-2:  #1e232a;   /* panels, lifted out of it            */
    --rule:       #2c323b;
    --rule-soft:  #232830;

    /* The lit table. */
    --card-bg:    #f2f5f8;
    --card-ink:   #14171b;
    --card-line:  #c9d0d8;
    --card-red:   #c0392b;         /* on a light card, so unchanged */
    --placeholder-line: #3a424d;   /* the empty board slots         */
    /* Lifted well clear of the page. At --surface-2 on --surface the two
       differ by so little that the opponent's hand simply disappeared — which
       is the one thing on the table that must not. */
    --card-back-bg:   #262d37;
    --card-back-line: #454f5d;

    /* The feedback tiles carry a rank at 12px bold, so they are the one place
       contrast really has to hold. Measured against their own text:
         green  #2a8559 with white  -> 4.57:1
         amber  #d9a441 with INK    -> 7.99:1
         grey   #2f3540 with #969da6-> 4.50:1
       The amber keeps its brightness and swaps its text instead. Darkening it
       far enough for white to pass turns it olive, and an amber that is not
       amber has stopped doing its job. The two tiles now differ in text colour
       as well as hue, which is a second signal where green-vs-amber is exactly
       the pair that red-green colour blindness struggles with. */
    --hit:        #2a8559;
    --near:       #d9a441;
    --on-near:    #14171b;
    --miss:       #2f3540;
    --miss-ink:   #969da6;

    --accent:     #35b06f;
    --accent-rgb: 53, 176, 111;
    --accent-soft: #16301f;
    --accent-line: #2c5b3c;

    --warn-soft:  #372c14;
    --warn-ink:   #e0b257;

    --replay-soft: #241f38;
    --replay-line: #3a3358;
    --replay-ink:  #b6a7ea;

    /* Badges carry white text, so these are chosen dark enough to hold it
       rather than bright enough to glow. */
    --act-neutral: #5b636e;
    --act-passive: #8a6a1c;
    --act-fold:    #b23a2d;
    --act-aggro:   #227a4e;
    --act-reraise: #5c47a5;

    --known-bg:   #3d2621;   /* "already on the table", in the same red key */
    --known-ink:  #e0a49a;

    /* Unplayable cards in the picker. Over the dark sheet the light tints
       sat up as brightly as a card you can tap, so amber and red drop to the
       same dark, flat tile the grey "not available" card is, and keep their
       colour in the ink. The green card stays a lit card: it is playable. */
    --card-near:      #383006;
    --card-near-ink:  #e8b93c;
    --card-known:     #421519;
    --card-known-ink: #e57a78;
    --legend-known:   var(--card-known-ink);
    /* The card is lit in both themes, but over the dark sheet the light
       theme's paler green washes out; a step deeper here. */
    --card-hit:       #b9dcc7;
    --card-hit-line:  #86bb9c;

    /* Black, and heavier: a shadow tinted with the light theme's ink is
       invisible against this page. */
    --shadow-ink: 0, 0, 0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --backdrop:  rgba(0, 0, 0, .58);
}