/* Ordino identity tokens, shared by the landing page and the app.
   Source: the Ordino identity board (2026-10-22).

   How the board uses its palette, and so how this file does:
     Espresso  text, and the owner's replies in a text thread
     Ivory     the page and cards
     Moss      the working accent: buttons, links, markers, one feature band
     Oat       Ordino's text bubbles only, never large areas
     Camel     the one dot left for you to decide, and nothing else

   Three display modes, chosen by the visitor and stored by display.js:
     light  Ivory page, Espresso type, Moss accents
     dark   Espresso page, Ivory type, a light Moss for accents
     red    dark, plus a warm overlay that cuts blue light for evening use
   With no choice stored, the page follows the device's light or dark setting. */

:root {
  /* Palette, exactly as on the board */
  --espresso: #2A2420;
  --ivory: #F6F1E7;
  --oat: #E5DCC9;
  --camel: #A98456;
  --moss: #3E4A3F;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --r: 12px;
  --r-sm: 8px;

  /* Light mode roles */
  --bg: var(--ivory);
  --band: #FCFAF5;             /* alternate sections: lighter, not darker */
  --surface: #FCFAF5;          /* cards and panels */
  --ink: var(--espresso);
  --ink-muted: #6B5F52;        /* the board's secondary text, 5.5:1 */
  --line: #DED5C4;
  --accent: var(--moss);       /* markers, rules, small graphics */
  --accent-text: var(--moss);  /* links and labels, 8.3:1 */
  --button: var(--moss);
  --button-ink: var(--ivory);
  --bubble: var(--oat);        /* Ordino's text bubbles */
  --reply: var(--espresso);    /* the owner's replies */
  --reply-ink: var(--ivory);
  --dot: var(--espresso);      /* the three plain dots in the mark */
  color-scheme: light;
}

/* Dark mode roles, applied when chosen, or when nothing is chosen and the
   device prefers dark. Red filter uses the same roles. */
:root[data-display="dark"],
:root[data-display="red"] {
  --bg: var(--espresso);
  --band: #312A26;
  --surface: #342D28;
  --ink: var(--ivory);
  --ink-muted: rgba(246, 241, 231, 0.68);
  --line: rgba(246, 241, 231, 0.12);
  --accent: #B9C6B6;           /* Moss lightened for a dark page, 8.6:1 */
  --accent-text: #B9C6B6;
  --button: #B9C6B6;
  --button-ink: var(--espresso);
  --bubble: #3D3530;
  --reply: var(--ivory);
  --reply-ink: var(--espresso);
  --dot: var(--ivory);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-display]) {
    --bg: var(--espresso);
    --band: #312A26;
    --surface: #342D28;
    --ink: var(--ivory);
    --ink-muted: rgba(246, 241, 231, 0.68);
    --line: rgba(246, 241, 231, 0.12);
    --accent: #B9C6B6;
    --accent-text: #B9C6B6;
    --button: #B9C6B6;
    --button-ink: var(--espresso);
    --bubble: #3D3530;
    --reply: var(--ivory);
    --reply-ink: var(--espresso);
    --dot: var(--ivory);
    color-scheme: dark;
  }
}

/* A Moss section, like the board's Moss lockup. Same in every mode. */
.band-moss {
  --bg: var(--moss);
  --band: var(--moss);
  --ink: var(--ivory);
  --ink-muted: rgba(246, 241, 231, 0.78);
  --line: rgba(246, 241, 231, 0.2);
  --accent: var(--ivory);
  --accent-text: var(--ivory);
  --button: var(--ivory);
  --button-ink: var(--moss);
  background: var(--moss);
  color: var(--ink);
}

/* Red filter: a warm multiply overlay over the dark roles. It cuts blue by
   about 40% and green by about 25%, leaving red untouched. */
:root[data-display="red"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: rgba(255, 94, 0, 0.4);
  mix-blend-mode: multiply;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The wordmark: Cormorant Garamond Medium, always lowercase */
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

/* Keyboard focus: a Moss ring (light Moss in dark mode, Ivory on a Moss
   band), offset so it never hides the control. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* For labels screen readers need but the design shows another way */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Display mode switch: three buttons, used on both pages */
.display-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 100px;
}
.display-switch button {
  font: 500 0.75rem var(--sans);
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: 100px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.display-switch button[aria-pressed="true"] {
  background: var(--bubble);
  color: var(--ink);
}