/* ============================================================================
   PIN DIARY, design tokens
   Design language: "Paper & Ember".
     Paper: warm ivory surfaces, hairline rules, a whisper of grain. Nothing
              is pure white and nothing is pure black; it should feel printed,
              not rendered.
     Ember: one warm accent doing all the emotional work (hearts, pins,
              today's date, the cursor). The accent is HERS to change.
     Ink: a serif for the things a diary says (names, dates, her writing)
              and the system sans for the things an app says (labels, buttons).
   Every colour here is a variable so the accent + theme prefs can repaint the
   whole product live, without a reload.
   ========================================================================== */

:root {
  /* --- type ------------------------------------------------------------- */
  /* ui-serif resolves to New York on iOS/macOS: the display face of the app.
     No webfonts anywhere, a font that needs the network is a font that is
     missing in ten years. */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
             "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: 0.6875rem;  /* 11px, micro labels */
  --step--1: 0.8125rem;  /* 13px: captions, meta */
  --step-0:  0.9375rem;  /* 15px, UI body */
  --step-1:  1.0625rem;  /* 17px, reading body */
  --step-2:  1.3125rem;  /* 21px, card titles */
  --step-3:  1.625rem;   /* 26px, view titles */
  --step-4:  2.125rem;   /* 34px, hero */

  /* --- geometry --------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --tap: 44px;              /* never smaller. one-handed, on a phone. */
  --gutter: 18px;
  --tabbar-h: 58px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-ish; used for sheets */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;

  /* --- accent ----------------------------------------------------------- */
  /* Overwritten live from /api/prefs. Ember is the default she inherits. */
  --accent: #C1553D;
  --accent-ink: #FFFFFF;                    /* text that sits ON the accent */
  --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
  --accent-deep: color-mix(in srgb, var(--accent) 82%, #000);
  --accent-lift: var(--accent);             /* dark theme lightens this */

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- light: PAPER --------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --paper:        #FAF6EF;
  --paper-raised: #FFFDF8;
  --paper-sunk:   #F1EADD;
  --paper-veil:   rgba(250, 246, 239, 0.82);

  --ink:       #1F1B17;
  --ink-soft:  #574E44;
  --ink-faint: #8B8073;

  --rule:       rgba(31, 27, 23, 0.10);
  --rule-heavy: rgba(31, 27, 23, 0.18);

  --shadow-1: 0 1px 2px rgba(60, 44, 28, 0.06), 0 2px 8px rgba(60, 44, 28, 0.05);
  --shadow-2: 0 2px 6px rgba(60, 44, 28, 0.08), 0 12px 28px rgba(60, 44, 28, 0.10);
  --shadow-3: 0 -2px 10px rgba(60, 44, 28, 0.07), 0 -18px 50px rgba(60, 44, 28, 0.13);

  --grain-opacity: 0.035;
  --photo-bed: #E7DFD2;
  --scrim: rgba(24, 20, 16, 0.55);
}

/* --- dark: NIGHT ---------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --paper:        #15120E;
  --paper-raised: #201B16;
  --paper-sunk:   #0E0B08;
  --paper-veil:   rgba(21, 18, 14, 0.86);

  --ink:       #F2EBE0;
  --ink-soft:  #B7AB9B;
  --ink-faint: #7F7566;

  --rule:       rgba(242, 235, 224, 0.12);
  --rule-heavy: rgba(242, 235, 224, 0.22);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.42);
  --shadow-3: 0 -2px 10px rgba(0, 0, 0, 0.35), 0 -18px 50px rgba(0, 0, 0, 0.50);

  --accent-lift: color-mix(in srgb, var(--accent) 78%, #FFF3E6);
  --accent-wash: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 46%, transparent);
  --accent-deep: color-mix(in srgb, var(--accent) 70%, #FFF3E6);

  --grain-opacity: 0.05;
  --photo-bed: #2A231C;
  --scrim: rgba(0, 0, 0, 0.66);
}

/* Browsers without color-mix() still get a usable product: the mixes above
   simply fall back to these flat values. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --accent-wash: rgba(193, 85, 61, 0.12);
    --accent-line: rgba(193, 85, 61, 0.34);
    --accent-deep: #96412F;
    --accent-lift: var(--accent);
  }
}