/* Raduno design tokens.
   Every color, size and shadow in the app resolves to something here.
   Dark mode is a token swap: no component restates a color.

   Palette: moss and ocean. Ocean carries the brand (mark, active nav, primary
   buttons). Moss carries safety (audience chips, locks, shields). Keeping those
   two jobs on two different hues means a reader can tell brand from privacy
   without reading a word. */

:root {
  color-scheme: light dark;

  /* ---- Type ------------------------------------------------------------ */
  /* No webfont requests. A privacy-first product does not hand the visitor's
     IP to a font CDN on first paint. Self-host Fraunces to use it. */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --font-display: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino,
             "Book Antiqua", Georgia, serif;

  --t-xs: 0.8125rem;   /* 13px - the floor. Timestamps, chips. */
  --t-sm: 0.9375rem;   /* 15px - secondary text */
  --t-md: 1.0625rem;   /* 17px - body */
  --t-lg: 1.1875rem;   /* 19px */
  --t-xl: 1.375rem;    /* 22px */

  --d-sm: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --d-md: clamp(1.6rem,  1.25rem + 1.8vw, 2.25rem);
  --d-lg: clamp(2.1rem,  1.4rem + 3.4vw, 3.25rem);

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --measure: 62ch;

  /* ---- Space ----------------------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;

  /* ---- Shape ----------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --tap: 44px;             /* minimum interactive target */

  /* ---- Light palette --------------------------------------------------- */
  /* Neutrals carry a green-blue bias so they belong to the accents rather
     than sitting under them as a separate grey. */
  --paper: #E5EDEB;
  --surface: #F7FBF9;
  --surface-2: #DCE8E4;
  --surface-3: #CADAD5;

  --ink: #10201F;
  --ink-2: #3E5451;        /* 7.6:1 on --surface */
  --ink-3: #5A716E;        /* 5.0:1 on --surface */
  --ink-invert: #F7FBF9;

  --line: #C3D4CF;
  --line-strong: #10201F;

  /* Ocean: the brand. */
  --accent: #2E7D9E;       /* decorative fills only, never behind small text */
  --accent-ink: #175E7C;   /* 6.9:1 on --surface */
  --accent-soft: #D2E7EF;
  --on-accent-bg: #175E7C;       /* 6.9:1 against --on-accent-fg */
  --on-accent-bg-hover: #114B64;
  --on-accent-fg: #F2FAFC;

  /* Deep water: links, and your own side of a conversation. */
  --blue: #23517E;
  --blue-ink: #1C4269;
  --blue-soft: #D9E5F1;

  /* Moss: safety, visibility, anything that says who can see this. */
  --green: #3E6B4A;
  --green-ink: #2E5739;
  --green-soft: #D9E8D9;

  /* Lichen: quiet highlight for dates and neutral chips. */
  --lichen: #C9DCBE;
  --lichen-soft: #E4EEDC;

  --focus: #175E7C;

  --texture: #10201F14;

  /* ---- Elevation ------------------------------------------------------- */
  /* --shadow-frame is reserved for audience and visibility controls. */
  --shadow-frame: 4px 4px 0 var(--line-strong);
  --shadow-soft: 0 1px 2px rgb(16 32 31 / 7%), 0 10px 24px -18px rgb(16 32 31 / 45%);
  --shadow-lift: 0 2px 4px rgb(16 32 31 / 9%), 0 18px 36px -20px rgb(16 32 31 / 40%);

  --speed: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1618;
    --surface: #152023;
    --surface-2: #1D2B2E;
    --surface-3: #27373A;

    --ink: #E9F2F0;
    --ink-2: #AEC2BF;        /* 9.0:1 on --surface */
    --ink-3: #90A5A2;        /* 6.4:1 on --surface */
    --ink-invert: #0D1618;

    --line: #2B3E41;
    --line-strong: #E4EDEB;

    --accent: #5FBCDB;
    --accent-ink: #89D1E8;
    --accent-soft: #0F3644;
    --on-accent-bg: #5FBCDB;
    --on-accent-bg-hover: #7ECBE5;
    --on-accent-fg: #061E28;

    --blue: #8CB8EC;
    --blue-ink: #A3C7F2;
    --blue-soft: #142942;

    --green: #7FC68D;
    --green-ink: #97D5A3;
    --green-soft: #16311E;

    --lichen: #A5C598;
    --lichen-soft: #1B2A1B;

    --focus: #89D1E8;

    --texture: #FFFFFF10;

    --shadow-soft: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 24px -16px rgb(0 0 0 / 80%);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / 45%), 0 18px 36px -18px rgb(0 0 0 / 85%);
  }
}

/* Explicit choice wins over the system setting, in both directions. */
:root[data-theme="dark"] {
  --paper: #0D1618;
  --surface: #152023;
  --surface-2: #1D2B2E;
  --surface-3: #27373A;
  --ink: #E9F2F0;
  --ink-2: #AEC2BF;
  --ink-3: #90A5A2;
  --ink-invert: #0D1618;
  --line: #2B3E41;
  --line-strong: #E4EDEB;
  --accent: #5FBCDB;
  --accent-ink: #89D1E8;
  --accent-soft: #0F3644;
  --on-accent-bg: #5FBCDB;
  --on-accent-bg-hover: #7ECBE5;
  --on-accent-fg: #061E28;
  --blue: #8CB8EC;
  --blue-ink: #A3C7F2;
  --blue-soft: #142942;
  --green: #7FC68D;
  --green-ink: #97D5A3;
  --green-soft: #16311E;
  --lichen: #A5C598;
  --lichen-soft: #1B2A1B;
  --focus: #89D1E8;
  --texture: #FFFFFF10;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 24px -16px rgb(0 0 0 / 80%);
  --shadow-lift: 0 2px 6px rgb(0 0 0 / 45%), 0 18px 36px -18px rgb(0 0 0 / 85%);
}

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