/* ============================================================
   H&P DASHBOARD — DESIGN TOKENS
   Source: HP_DASHBOARD_HANDOFF_V2.md + Figma file 1K3MyMEvDDw6ingNcN3mC0

   READABILITY PASS (2026-08-25)
   Hues are unchanged. What changed:
     · a real type + control scale, replacing html{zoom:1.2}.
       Sizes are set against what was ON SCREEN before (raw px x 1.2),
       not the raw values, so every role is genuinely larger.
     · the opacities that carry live data (see --dim-text)
     · pills are full-radius; counts are circles
     · cards widen on desktop
   ============================================================ */

:root {

  /* ---- Backgrounds ---- */
  --bg:           #2b2b2b;   /* page background — full window width */
  --bg2:          #3b3b3b;   /* cards, rows, panels */

  /* ---- Channel tokens ----
     The alpha variants of a hue are written rgba(var(--x-rgb), a) rather than
     as literals, so a theme redefines the hue in ONE place and every tint of
     it follows. Bare channels, no rgb() wrapper — that is what rgba() needs. */
  --peach-rgb:    255,190,159;
  --bg-rgb:       43,43,43;
  --bg2-rgb:      59,59,59;
  --white-rgb:    219,219,219;
  --red-rgb:      232,117,117;
  --green-rgb:    65,108,82;
  --border-rgb:   126,121,121;
  --ink-rgb:      59,59,59;      /* text ON peach */

  /* ---- Primary accent (peach) ----
     --peach is the INK: 180 rules set it as a text or border colour.
     --peach-fill is the solid brand swatch painted BEHIND --on-peach text
     (header bars, selected pills, count circles, the sign-in button).
     They are the same value on dark. On paper they must part company —
     the fill stays light peach, the ink darkens enough to read. */
  --peach:        #ffbe9f;
  --peach-fill:   #ffbe9f;
  --peach-25:     rgba(var(--peach-rgb),0.25);   /* FILLS only — badges, pills */
  --peach-20:     rgba(var(--peach-rgb),0.20);
  --peach-10:     rgba(var(--peach-rgb),0.10);
  --peach-line:   rgba(var(--peach-rgb),0.55);   /* hairlines on peach-bordered fields */
  --pill-line:    rgba(var(--peach-rgb),0.92);   /* the outline every pill carries */

  /* ---- Status: urgent ---- */
  --red:          #e87575;
  --red-25:       rgba(var(--red-rgb),0.25);
  --red-50:       rgba(var(--red-rgb),0.50);
  --red-20:       rgba(var(--red-rgb),0.20);

  /* ---- Status: confirmed / good ---- */
  --green:        #416c52;
  --green-50:     rgba(var(--green-rgb),0.50);
  --green-20:     rgba(var(--green-rgb),0.20);
  --peach-hover:  #ffd2b9;                /* peach fill, lifted on hover */
  --green-ink:    #8fbfa1;                /* green as TEXT on dark — 5.4:1, the brighter value from the artboard */

  /* ---- Dim / dormant ----
     --dim-text carries real data (event type, venue, sender, thread lines).
     It was 0.30 — about 1.9:1 on a card, which is why everything needed
     zooming. 0.75 measures 4.7:1 and is the same hue. */
  --dim-text:     rgba(var(--peach-rgb),0.75);
  --dim-label:    rgba(var(--peach-rgb),0.68);  /* small bold labels — 4.2:1 */
  --dim-faint:    rgba(var(--peach-rgb),0.55);  /* the quietest legible tier */
  --dim-border:   rgba(var(--border-rgb),0.40);
  --hair:         rgba(var(--peach-rgb),0.10);  /* decorative rules only */

  /* ---- Structural ---- */
  --border:       rgba(var(--border-rgb),1);    /* #7e7979 */
  --outline-box:  rgba(157,152,152,1);    /* #9d9898 */
  --white-body:   #dbdbdb;                /* email body / draft text */
  /* ---- Text ON a coloured fill ----
     A fill and the text on it are one pairing, and the fill does not always
     move with the theme: --peach-fill and --green are the same swatch in both,
     so their ink is one value. --red DOES move, so --on-red is themed.

     --on-peach-dim was 0.55, which measures 2.6:1 on the peach bar — it read
     as a design choice but it failed in the dark theme too, on the nine
     section-header labels and everything else sitting on peach. 0.82 is the
     lowest alpha that clears 4.5:1, and it still reads as the quieter half
     of the pair. Same story for the red on the peach rail: #e87575 measured
     1.8:1 there, so sign out / usage / the sync clock were decorative rather
     than legible. --on-peach-red is a red picked to survive that background. */
  --on-peach:     #3b3b3b;                      /* 7.0:1 on the peach fill */
  --on-peach-dim: rgba(var(--ink-rgb),0.82);    /* 4.5:1 — was 0.55, 2.6:1 */
  --on-peach-red: #992a1c;                      /* 4.9:1 — red that holds on peach */
  --on-red:       #2b2b2b;                      /* 4.9:1 on #e87575 */
  --on-green:     #fbf7f1;                      /* 5.6:1 on #416c52 */

  /* Status hues used as TEXT on a card. Themed, because a hue that reads on
     a dark card is invisible on paper and vice versa. */
  --status-red:   #f09393;
  --status-blue:  #759ae8;
  /* Red as text ON the red wash (--red-20). The pair was failing in the dark
     theme too — #e87575 on its own 20% wash measures 2.9:1. */
  --red-ink:      #f9b9b9;                      /* 5.1:1 on the dark wash */

  /* ---- Mail thread bubbles ---- */
  --bubble-in:    #333333;                 /* inbound — 9.0:1 with --white-body */
  --bubble-out:   rgba(var(--peach-rgb),0.16);  /* outbound — 6.9:1 with --white-body */

  /* ---- Type scale ----
     These are the artboard's values, verbatim. The first pass set them
     against pre-zoom effective sizes and landed 15–25% above the design,
     which is why the cards read as crowded next to the mockup. The
     "was" note on each line is the effective size under the old
     html{zoom:1.2}, which is what the design was drawn against. */
  --fs-section:   28px;   /* section title    — was 28.8 effective, held */
  --fs-bar:       20px;   /* peach header bar — was 21.6 */
  --fs-name:      15px;   /* client / event name, dates — was 14.4 */
  --fs-meta:      13px;   /* type, venue, email, timestamps — was 14.4 @ 25% opacity */
  --fs-body:      14px;   /* previews, notes, message bodies — was 12 */
  --fs-btn:       12px;   /* tab + button labels — was 12 */
  --fs-nav:       14px;   /* nav links — was 14.4 */
  --fs-micro:     11px;   /* counts, tiny labels — was 9.6 */

  /* ---- Controls ----
     One height. Tabs stopped being tabs — they are pills now, so a button and
     a badge on the same row are the same control at the same size, and
     --btn-h is kept only so older rules keep resolving.

     28px sits between where these started (21.6 for a pill, 30 for a tab,
     both measured on screen under the old zoom) and the 30/44 the first pass
     pushed them to. The type is NOT dialled back with them: every text token
     is already at or below its pre-pass on-screen size, so the thing that
     actually grew too much was the control furniture, not the words. */
  --ctl-h:        28px;
  --btn-h:        var(--ctl-h);
  --pill-h:       var(--ctl-h);
  --ctl-pad:      14px;   /* horizontal padding, scales with the height */

  /* ---- Layout ---- */
  --content-max:  800px;
  --section-col:  760px;                /* max section column width */
  --card-width:   880px;                /* max card width — was 560 */
  --section-col-offset: 0px;            /* cards left-align to the title now */
  --left-col:     178px;      /* left zone within card — was 122 */
  --col-gap:      26px;       /* gutter between the card's two columns */
  --nav-w:        212px;   /* desktop rail — body padding and the aut\ chip read this */
  --side-gutter:  28px;                  /* shared horizontal gutter */
  --border-w:     0.5px;
  --radius-card:  2px;
  --radius-pill:  999px;                 /* pills are full-radius */
  --radius-save:  999px;

  /* ---- Spacing ---- */
  --gap-section:  40px;       /* section to section */
  --gap-sub:      20px;       /* sub-section gap */
  --card-pad-l:   16px;
  --card-pad-r:   16px;
  --card-pad-t:   14px;
}

/* ---- Touch ----
   A pointer that is a finger, not a cursor: every control goes to 44px, the
   size a fingertip actually needs. iPad and phone pick this up; a trackpad
   Mac does not, so the desktop stays at the tighter 28. Type is untouched —
   this is about hit area, not legibility.

   The width clause is a safety net: pointer detection is not reliable on
   every tablet browser, and a missed touch tier means fingers on 28px
   targets, while a false positive only means a narrow desktop window gets
   roomier controls. Cheap in one direction, not the other. */
@media (pointer: coarse), (max-width: 1024px) {
  :root {
    --ctl-h:   44px;
    --ctl-pad: 18px;
  }
}

/* ============================================================
   LIGHT THEME — warm paper
   Opt-in only: set data-theme="light" on <html>. The OS stays dark unless
   somebody asks for this, so nobody's screen changes under them.

   Two things do NOT invert, and they are the whole reason this needed a
   token pass first:

   1. Peach is two colours here. --peach-fill is the brand swatch painted
      behind dark text (header bars, selected pills, the sign-in button) and
      it does not move — light peach on paper is still light peach. --peach
      is the INK, and it has to darken to a terracotta or it cannot be read.

   2. Alpha tints invert their meaning. On dark, rgba(peach, .75) DIMS a
      light hue toward the background. On paper the same expression LIGHTENS
      a dark hue toward the background — #8f3f14 at 75% measures 3.4:1, well
      under the floor. So --dim-text and --dim-label are solid warm greys
      here rather than tints of the accent. That also reads better: the
      accent stays saturated and secondary text goes neutral, which is the
      hierarchy the tints were standing in for.

   Measured against both surfaces (page #f2ebe1 / card #fbf7f1):
     --peach       6.81 / 6.14     --white-body  13.34 / 12.03
     --dim-text    6.26 / 5.65     --green-ink    7.13 /  6.43
     --dim-label   5.06 / 4.56     --red          5.52 /  4.98
   Every text token clears 4.5:1 on both, which the dark theme's
   --dim-label (4.2:1) never quite did.
   ============================================================ */
:root[data-theme="light"] {
  /* Surfaces — the card sits lighter than the page, inverting the dark
     theme's relationship so cards still lift off the background. */
  --bg:           #f2ebe1;
  --bg2:          #fbf7f1;
  --bg-rgb:       242,235,225;
  --bg2-rgb:      251,247,241;

  /* Accent: ink darkens, fill holds. */
  --peach:        #8f3f14;
  --peach-rgb:    143,63,20;
  --peach-fill:   #ffbe9f;
  --peach-hover:  #ffd2b9;

  /* Secondary text — solid, not tints. See note above. */
  --dim-text:     #665a50;
  --dim-label:    #75685c;
  --dim-faint:    #75685c;   /* the three tiers compress to two on paper:
                                a fourth step down would stop being legible */

  /* Body copy and the channel its dimmed variants are mixed from. */
  --white-body:   #2e2a26;
  --white-rgb:    46,42,38;

  /* Status hues, darkened to carry as text on paper. */
  --red:          #b93326;
  --red-rgb:      185,51,38;
  --green-ink:    #2f5d40;

  /* Structure — hairlines need more weight on paper than on dark. */
  --border:       #c2b3a0;
  --border-rgb:   194,179,160;
  --outline-box:  #b9a894;
  --dim-border:   rgba(var(--border-rgb),0.55);

  /* Mail bubbles: inbound is a warm neutral, outbound stays a peach wash. */
  --bubble-in:    #ece4d8;

  /* On-fill ink. --on-peach and --on-green do not appear here: their fills
     are unchanged by the theme, so their ink must not change either. --on-red
     does flip, because the red fill darkened. */
  --on-red:       #fbf7f1;      /* 5.5:1 on #b93326 */

  /* Status hues, darkened to carry on paper. */
  --status-red:   #b93326;      /* 5.5:1 */
  --status-blue:  #35569c;      /* 6.6:1 */
  --red-ink:      #7d1e14;      /* 7.0:1 on the paper wash */
}