/* ============================================================
 * SoD2 Diary v2 — Design Tokens
 * Single source of truth. Every later component CSS must
 * reference these custom properties, not raw values.
 * Anchored to PHA-336 plan rev 3 (§0 Clarity Wins, §2 Visual
 * Language). See design/tokens.md for rationale + WCAG proof.
 * ============================================================ */

:root {
  color-scheme: light;

  /* ----- 1. Color ----- */
  --paper:           #F1E4C8;
  --paper-stained:   #C9B388;
  --leather:         #3B2A1A;
  --leather-shadow:  #1B120A;
  --ink-blue:        #1F2A4A;
  --ink-brown:       #2A1F12;
  --ink-red:         #7E1E1E;
  --amber:           #D4A24C;

  /* Semantic aliases — components SHOULD prefer these
   * so palette tweaks don't ripple through markup. */
  --color-bg-page:           var(--paper);
  --color-bg-page-edge:      var(--paper-stained);
  --color-bg-chrome:         var(--leather);
  --color-bg-chrome-deep:    var(--leather-shadow);
  --color-text-default:      var(--ink-brown);
  --color-text-handwritten:  var(--ink-blue);   /* decorative; pair w/ a sub-label */
  --color-text-alert:        var(--ink-red);    /* KIA, plague hearts, errors */
  --color-focus-ring:        var(--amber);      /* decorative-only on paper */

  /* ----- 2. Typography ----- */
  --font-typewriter: "Special Elite",
    "Courier New", Courier, ui-monospace, monospace;
  --font-mono: "IBM Plex Mono",
    ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;
  --font-hand: "Caveat", "Patrick Hand",
    "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;

  --weight-regular: 400;
  --weight-bold:    600;

  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.375rem;    /* 22px */
  --text-2xl:  1.75rem;     /* 28px */

  --leading-tight: 1.25;
  --leading-base:  1.5;

  /* ----- 3. Texture ----- */
  --texture-paper:    url("./textures/paper.png");
  --texture-leather:  url("./textures/leather.png");
  /* Inline SVG turbulence; ~ 0.6 KB. Disabled under
   * prefers-reduced-data / prefers-reduced-motion below. */
  --texture-noise: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter>\
<rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* ----- 4. Shadow / Press / Motion ----- */
  --shadow-card:
    0 1px 0 rgba(27, 18, 10, 0.18),
    0 6px 14px -6px rgba(27, 18, 10, 0.45);
  --shadow-press:
    inset 0 1px 0 rgba(27, 18, 10, 0.25),
    0 0 0 rgba(0, 0, 0, 0);
  --ink-bleed-duration: 180ms;     /* ≤ 200ms hard cap */
  --ink-bleed-easing:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --press-duration:     90ms;

  /* ----- 5. Spacing & Touch ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;

  --touch-min: 44px;               /* hard minimum, every interactive target */

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ----- 6. Z-index ----- */
  --z-page:      0;
  --z-artifact:  10;
  --z-hardware:  20;
  --z-stamp:     30;
  --z-tab:       40;
  --z-overlay:   100;
  --z-toast:     110;
}

/* ------------------------------------------------------------
 * A11y / pragmatic toggles — locked by Plan §0 and §6.
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ink-bleed-duration: 0ms;
    --press-duration:     0ms;
  }
}

@media (prefers-reduced-data: reduce) {
  :root {
    /* Drop the heaviest decorative layers when the user has
     * asked for less data. Flat color + leather/paper PNG
     * still carry the metaphor. */
    --texture-noise: none;
  }
}

/* ------------------------------------------------------------
 * "Lantern mode" — opt-in dark mode (Plan §6).
 * Same paper, dimmed +20% sepia, leather goes near-black.
 * Body text stays --ink-brown (re-checked AA against the
 * dimmed paper before promoting this past prototype).
 * ------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    --paper:          #D9C9A6;     /* paper × ~0.89 sepia dim */
    --paper-stained:  #B19A6F;
    --leather:        #1B120A;     /* leather → near-black */
    --leather-shadow: #0A0604;
  }
}

/* ------------------------------------------------------------
 * Default body — apply tokens once so the rest of the app
 * inherits without each component restating them.
 * ------------------------------------------------------------ */

html {
  font-size: 16px;
}

body {
  margin: 0;
  background-color: var(--leather);
  background-image: var(--texture-leather);
  background-repeat: repeat;
  color: var(--color-text-default);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

/* ------------------------------------------------------------
 * Focus ring — amber halo + ink-brown inner.
 * Amber alone fails AA on paper (1.84:1) so the inner ring
 * carries the contrast; amber carries the glow.
 * ------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(212, 162, 76, 0.25);
  transition: box-shadow var(--ink-bleed-duration) var(--ink-bleed-easing);
}