/* Design tokens. Colors, type, space, radius, shadow, motion and layers are
   defined here and nowhere else. See NOTES.md for the plan behind them. */

@property --light {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.7;
}
@property --tilt-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --tilt-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  color-scheme: dark;

  /* Palette (spec 6.2) */
  --night: #1f1025;
  --velvet: #3a1a40;
  --candle: #f3b95f;
  --flame-core: #fff3d6;
  --rose: #d9819a;
  --wax: #8e1f3c;
  --paper: #fbf1e4;
  --ink: #3b2230;
  --jasmine: #fffdf7;
  --text: #f8e9da;
  --text-dim: #cdb6c4;

  /* Derived tints (never new hues) */
  --night-deep: color-mix(in oklab, var(--night) 78%, black);
  --candle-dim: color-mix(in oklab, var(--candle) 55%, var(--night));
  --candle-glow: color-mix(in oklab, var(--candle) 32%, transparent);
  --candle-line: color-mix(in oklab, var(--candle) 55%, transparent);
  --paper-shade: color-mix(in oklab, var(--paper) 90%, var(--ink));
  --paper-edge: color-mix(in oklab, var(--paper) 72%, var(--ink));
  --paper-line: color-mix(in oklab, var(--ink) 14%, transparent);
  --ink-soft: color-mix(in oklab, var(--ink) 68%, var(--paper));
  --rose-soft: color-mix(in oklab, var(--rose) 70%, var(--paper));
  --glass: color-mix(in oklab, var(--paper) 9%, transparent);
  --glass-edge: color-mix(in oklab, var(--text) 22%, transparent);
  /* the bouquet needs a green for stems and leaves: one muted sage, nowhere else */
  --stem: #6b8a66;
  --leaf: #86a381;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-arabic-hand: "Aref Ruqaa", "Noto Naskh Arabic", serif;
  --font-arabic: "Noto Naskh Arabic", "Aref Ruqaa", serif;
  --font-body: var(--font-display);

  --fs-small: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-lead: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  --fs-h3: clamp(1.5rem, 1.35rem + 0.8vw, 1.75rem);
  --fs-h2: clamp(1.875rem, 1.6rem + 1.2vw, 2.25rem);
  --fs-display: clamp(2.75rem, 12vw, 4.5rem);
  --hand-scale: 1.3;
  --lh-body: 1.5;
  --lh-tight: 1.15;

  /* Space and safe areas */
  --gutter: clamp(16px, 5vw, 28px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --safe-top: max(env(safe-area-inset-top, 0px), 12px);
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --topbar-h: 52px;
  --tap: 48px;
  --btn-h: 56px;

  /* Radius hierarchy */
  --r-paper: 3px;
  --r-pill: 999px;
  --r-sheet: 20px;

  /* Warm directional shadows: the light is above, shadows fall down */
  --shadow-paper: 0 1px 2px color-mix(in oklab, var(--night-deep) 45%, transparent),
    0 16px 32px -14px color-mix(in oklab, var(--night-deep) 92%, transparent);
  --shadow-lift: 0 2px 4px color-mix(in oklab, var(--night-deep) 40%, transparent),
    0 28px 56px -22px color-mix(in oklab, var(--night-deep) 96%, transparent);
  --ring: 0 0 0 3px color-mix(in oklab, var(--candle) 75%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* Layers */
  --z-ambient: 0;
  --z-light: 1;
  --z-stage: 2;
  --z-particles: 3;
  --z-topbar: 4;
  --z-grain: 5;
  --z-veil: 6;
  --z-sheet: 7;
  --z-guard: 8;
  --z-debug: 9;
  --z-loading: 10;

  --light: 0.7;

  /* Paper fibre: anisotropic noise tinted with --ink, laid over paper objects at low opacity */
  --paper-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.13 0 0 0 0 0.19 0 0 0 0.36 -0.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* Samsung Internet skips its own page darkening when the page declares dark
   support. The tokens are restated on purpose. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --night: #1f1025;
    --velvet: #3a1a40;
    --candle: #f3b95f;
    --flame-core: #fff3d6;
    --rose: #d9819a;
    --wax: #8e1f3c;
    --paper: #fbf1e4;
    --ink: #3b2230;
    --jasmine: #fffdf7;
    --text: #f8e9da;
    --text-dim: #cdb6c4;
  }
}