/* Booktily design tokens
   Aesthetic: editorial / literary-modern. Warm paper & ink with an ember accent.
   Two themes — Daylight (light) and Ink (dark). */

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

  --paper:        #F6EFE2;
  --paper-2:      #F1E8D8;
  --surface:      #FFFDF8;
  --surface-2:    #FBF5EA;
  --ink:          #221C15;
  --ink-soft:     #3D362C;
  --muted:        #6E6557;
  --faint:        #978C7B;
  --line:         rgba(34, 28, 21, 0.12);
  --line-strong:  rgba(34, 28, 21, 0.22);

  --accent:       #C0492B;   /* ember */
  --accent-ink:   #9A3A22;
  --accent-soft:  rgba(192, 73, 43, 0.12);
  --violet:       #7B4BC4;   /* secondary, used by the guide */
  --violet-soft:  rgba(123, 75, 196, 0.12);
  --gold:         #B68233;

  --on-accent:    #FFF6EE;
  --shadow-1:     0 1px 2px rgba(34,28,21,.06), 0 2px 8px rgba(34,28,21,.06);
  --shadow-2:     0 8px 30px rgba(34,28,21,.12), 0 2px 8px rgba(34,28,21,.07);
  --shadow-pop:   0 18px 50px rgba(34,28,21,.20);

  --grain:        0.035;
}

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

  --paper:        #14110B;
  --paper-2:      #181410;
  --surface:      #1E1812;
  --surface-2:    #241D15;
  --ink:          #EFE6D5;
  --ink-soft:     #D8CDB9;
  --muted:        #9F9582;
  --faint:        #7C7263;
  --line:         rgba(239, 230, 213, 0.12);
  --line-strong:  rgba(239, 230, 213, 0.22);

  --accent:       #E2663F;
  --accent-ink:   #F0855F;
  --accent-soft:  rgba(226, 102, 63, 0.16);
  --violet:       #A883E6;
  --violet-soft:  rgba(168, 131, 230, 0.16);
  --gold:         #D6A24A;

  --on-accent:    #1B130E;
  --shadow-1:     0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.4);
  --shadow-2:     0 10px 34px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --shadow-pop:   0 22px 60px rgba(0,0,0,.65);

  --grain:        0.05;
}

:root {
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-read:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:      "Spline Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;
  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}