/* ==========================================================
   Jesse Becker - Personal Site  |  tokens.css
   Design tokens only. No selectors beyond :root / [data-theme].
   Every other stylesheet reads from here - never hardcode a
   colour, spacing step, radius, or easing curve downstream.
   ========================================================== */

:root {
  color-scheme: light;

  /* -- Paper & ink surfaces -------------------------------- */
  --bg:             #F7F2E9;
  --surface:        #FFFDF8;
  --surface-sunken: #EFE8DA;

  /* -- Text ------------------------------------------------ */
  --ink:       #171310;
  --ink-soft:  #57504A;
  --ink-faint: #6C645B;   /* >=4.5:1 on every paper surface, incl. --surface-sunken; captions run to 12px */

  /* -- Accent (vermilion) ---------------------------------- */
  /* --accent for large/display text and non-text marks.
     --accent-deep for accent text below ~1.2rem: 5.2:1 on
     paper and >=4.5:1 on --accent-tint and --surface-sunken. */
  --accent:      #E8490F;
  --accent-deep: #B93708;
  --accent-tint: #FBE3D6;
  --tape:        rgba(232, 73, 15, .16);

  /* Text sitting on an accent fill. White only reaches ~3.1:1 on
     this vermilion, so filled marks take dark ink instead. The
     dark theme's accent is lighter still, so this holds there. */
  --on-accent: #1A120C;

  /* -- Lines ----------------------------------------------- */
  --hairline:        #E2D8C6;
  --hairline-strong: #C9BEAC;

  /* -- Elevation ------------------------------------------- */
  --shadow-sheet: 0 1px 2px rgba(23,19,16,.06), 0 6px 18px rgba(23,19,16,.07);
  --shadow-lift:  0 2px 4px rgba(23,19,16,.07), 0 16px 40px rgba(23,19,16,.13);
  --shadow-float: 0 8px 20px rgba(23,19,16,.18), 0 32px 64px rgba(23,19,16,.24);

  /* -- Grain overlay --------------------------------------- */
  --grain-opacity: .05;
  --grain-invert:  0;

  /* -- Printed-object surfaces ----------------------------- */
  /* The polaroid is a physical white-framed print, not a panel, so
     it keeps its paper colour in both themes rather than turning
     into a dark card. Its caption ink is paired to it. */
  --polaroid-bg:  var(--surface);
  --polaroid-ink: var(--ink-soft);

  /* -- Decorative ghost marks ------------------------------ */
  /* Multiplier for the oversized watermark glyphs and phase
     numerals. A fixed opacity that whispers on cream shouts on
     near-black, because the jump from dark paper to vermilion is
     a much larger step than from light paper. */
  --ghost-damp: 1;

  /* -- Spacing scale --------------------------------------- */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-8:  3rem;
  --sp-10: 4rem;
  --sp-12: 5rem;

  /* -- Type scale ------------------------------------------ */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:     .78rem;
  --fs-sm:     .9rem;
  --fs-base:   1rem;
  --fs-md:     1.08rem;
  --fs-h3:     1.35rem;
  --fs-h2:     clamp(1.7rem, 3.4vw, 2.4rem);
  --fs-h1:     clamp(2.9rem, 6.8vw, 4.8rem);
  --fs-banner: clamp(2rem, 4.5vw, 3rem);

  /* -- Radii ----------------------------------------------- */
  /* Shape carries meaning here: rectangles for controls and
     chips, --r-lg for paper sheets, pills only for the stamp. */
  --r-sm:   5px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-full: 999px;

  /* -- Motion ---------------------------------------------- */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .5, 1);
  --dur-fast:    .2s;
  --dur-mid:     .3s;
  --dur-slow:    .6s;

  /* -- Layout ---------------------------------------------- */
  --nav-h:       4.25rem;
  --container-w: 1120px;
}

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

  --bg:             #171310;
  --surface:        #221D18;
  --surface-sunken: #110E0B;

  --ink:       #F3EDE3;
  --ink-soft:  #BFB4A6;
  --ink-faint: #9A9188;   /* 5.4:1 on the dark --surface */

  /* On dark paper the lighter vermilion clears contrast on its
     own, so --accent-deep brightens rather than darkens. */
  --accent:      #FF5A1F;
  --accent-deep: #FF7A47;
  --accent-tint: #3A2318;
  --tape:        rgba(255, 90, 31, .22);

  --hairline:        #342D24;
  --hairline-strong: #4C4133;

  --shadow-sheet: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35);
  --shadow-lift:  0 2px 4px rgba(0,0,0,.4),  0 16px 40px rgba(0,0,0,.55);
  --shadow-float: 0 8px 20px rgba(0,0,0,.5),  0 32px 64px rgba(0,0,0,.6);

  --grain-opacity: .07;
  --grain-invert:  1;

  /* Warm paper stock rather than pure white, so the print reads as
     an object in the dark hero instead of a lit panel. */
  --polaroid-bg:  #ECE4D6;
  --polaroid-ink: #6B6259;

  --ghost-damp: .55;
}