/* AURIA LASH — web_v1 design tokens
   Palette C "White tie" per stage/HER_MAJESTY/palette.md
   Five whites, one dark, two accents. Accents never carry text. */

:root {
  /* whites ladder: porcelain→ivory→bone warm; white/pearl cool */
  --white:     #FFFFFF; /* highlight; raised cards, focal surfaces */
  --porcelain: #FAF8F4; /* primary ground; the page */
  --ivory:     #F3EEE3; /* warm step; panels, section bands */
  --pearl:     #EDEBE7; /* cool step; sidebars, quiet contrast */
  --bone:      #E5DECF; /* deepest white; borders, dividers */

  --ink:       #241E19; /* espresso ink; ALL text, ALL icons */
  --champagne: #C2A36B; /* accent one; hairlines, gilded moments */
  --rose:      #C99A93; /* accent two; blush states, soft emphasis */
  --rose-vivid: #C97B6B; /* saturated rose; glance counts + clock dots */
  --on-ink:    #FFFFFF; /* text riding ink-colored controls */
  --on-accent: #FFFFFF; /* text riding rose/accent controls */
  --text-muted: rgba(36, 30, 25, 0.6); /* quiet words, theme-aware */
  --sel-border: #A5423C; /* calendar selection ring; saturated, never lost */
  --fan-a: #EDEBE7; /* lash map zone fans; whisper tones */
  --fan-b: #F3EEE3;

  /* type: Forma DJR Deck licensed via Adobe Creative (operator
     confirmed 2026-07-19), installed on this machine; primary header
     face. Wordmark/numbers run in spaced serif caps. */
  --font-head: "Forma DJR Deck", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Forma DJR Deck", "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mark: "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;

  /* rhythm */
  --unit: 8px;
  --radius: 2px;            /* near-square; regal, not bubbly */
  --radius-btn: 4px;        /* buttons only: beveled, never bubbled */
  --hairline: 1px solid var(--bone);
  --shadow-card: 0 1px 2px rgba(36, 30, 25, 0.06),
                 0 6px 24px rgba(36, 30, 25, 0.05);

  --appbar-h: 56px;
  --tabbar-h: 60px;
  --maxw: 1120px;

  /* THE DASHBOARD CLOCK. Drawn in JS, coloured from here. These
     defaults reproduce the original dial exactly, so Light and Velvet
     are untouched; Dark and Punk override the set below. */
  --clock-face:      var(--white);
  --clock-edge:      var(--bone);
  --clock-tick:      var(--bone);
  --clock-tick-hour: var(--champagne);
  --clock-num:       var(--ink);
  --clock-hand:      var(--bone);
}

/* ---------- themes: every token swaps, the site follows ---------- */

/* DARK: the inversion; grounds go deep, ink goes cream */
:root[data-theme="dark"] {
  --white:     #2E2A26;
  --porcelain: #211D1A;
  --ivory:     #2A2521;
  --pearl:     #262220;
  --bone:      #3B342D;
  --ink:       #F2EAD9;
  --champagne: #C9A96B;
  --rose:      #B98B84;
  --rose-vivid: #D98A78;
  --on-ink:    #211D1A;
  --on-accent: #FFFFFF;
  --text-muted: rgba(242, 234, 217, 0.65);
  --sel-border: #F2EAD9; /* cream ring on the dark grounds */
  --fan-a: #262220;
  --fan-b: #2A2521;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4),
                 0 6px 24px rgba(0, 0, 0, 0.35);
  --hairline: 1px solid #3B342D;

  /* clock inverts: the face takes the masthead bar's OWN token, so the
     two can never drift apart. Resolves to #F2EAD9 cream here. */
  --clock-face:      var(--ink);
  --clock-edge:      rgba(36, 30, 25, 0.22);
  --clock-tick:      rgba(36, 30, 25, 0.38);
  --clock-tick-hour: #241E19;
  --clock-num:       #241E19;
  --clock-hand:      var(--rose);
}

/* VELVET: Susan's own; the Imperial palette resurrected. Deep plum
   ink, orchid accent, true gold, on cool lavender-whites. */
:root[data-theme="velvet"] {
  --white:     #FFFFFF;
  --porcelain: #F7F5F9;
  --ivory:     #EFEAF4;
  --pearl:     #EAE7EE;
  --bone:      #DCD4E3;
  --ink:       #3D2545;
  --champagne: #C0A264;
  --rose:      #8E6B9E;
  --rose-vivid: #6E4680;
  --on-ink:    #FFFFFF;
  --on-accent: #FFFFFF;
  --text-muted: rgba(61, 37, 69, 0.6);
  --sel-border: #3D2545; /* the checkout plum, much darker, in family */
  --fan-a: #EAE7EE;
  --fan-b: #EFEAF4;
  --hairline: 1px solid #DCD4E3;
}

/* PUNK: one stock white, black, and HOT pink; Sid Vicious grade.
   The pink takes whole surfaces (ivory slot), not just trim. */
:root[data-theme="punk"] {
  --white:     #181818;
  --porcelain: #0C0C0C;
  --ivory:     #FF1493; /* hot pink GROUND where ivory bands ran */
  --pearl:     #161616;
  --bone:      #2E2E2E;
  --ink:       #FFFFFF; /* the one white */
  --champagne: #E6007E;
  --rose:      #FF1493;
  --rose-vivid: #FF0090;
  --on-ink:    #000000;
  --on-accent: #000000;
  --text-muted: rgba(255, 255, 255, 0.78);
  --sel-border: #FFFFFF; /* the one white rings the selection */
  --fan-a: #240F1B; /* pinks gone almost black; the lashes lead */
  --fan-b: #330020;
  --shadow-card: 0 1px 2px rgba(255, 0, 144, 0.3),
                 0 6px 24px rgba(0, 0, 0, 0.6);
  --hairline: 1px solid #2E2E2E;

  /* clock inverts: same binding to the masthead bar's own token.
     Resolves to #FFFFFF, the one white. */
  --clock-face:      var(--ink);
  --clock-edge:      rgba(36, 30, 25, 0.20);
  --clock-tick:      rgba(36, 30, 25, 0.38);
  --clock-tick-hour: #241E19;
  --clock-num:       #241E19;
  --clock-hand:      var(--rose);
}