/* ==========================================================================
   Design tokens
   Light is the base palette. Dark is redefined at token level only, in both
   the system-preference and explicit-toggle states, so components never need
   to know which theme they are in.
   ========================================================================== */

:root {
  /* surfaces */
  --paper:      #FDFBF7;
  --card:       #FFFFFF;
  --sunk:       #F2EDE4;
  --rule:       #E7E0D4;
  --rule-soft:  #F0EAE0;

  /* ink */
  --ink:        #2F2A24;
  --ink-soft:   #7A7268;
  --ink-faint:  #A79E92;

  /* brand */
  --accent:       #E4602F;
  --accent-ink:   #FFFFFF;
  --accent-hover: #CC5124;
  --accent-wash:  #FCEFE9;
  --accent-2:     #2E8B84;
  --accent-2-wash:#E6F2F1;
  --highlight:    #F5C518;

  /* radii */
  --r-card: 14px;
  --r-btn:  999px;
  --r-chip: 999px;
  --r-sm:   8px;

  /* elevation */
  --shadow-card:  0 1px 2px rgba(47,42,36,.05), 0 6px 18px rgba(47,42,36,.06);
  --shadow-hover: 0 2px 4px rgba(47,42,36,.06), 0 12px 28px rgba(47,42,36,.10);
  --shadow-pop:   0 8px 40px rgba(47,42,36,.18);

  /* 8-pt spacing scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  /* type */
  --font-display: "Baloo 2", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: .875rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.5rem;
  --step-3:  1.95rem;
  --step-4:  2.6rem;

  --wrap: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #191714;
    --card:       #221F1B;
    --sunk:       #2A2622;
    --rule:       #332E28;
    --rule-soft:  #2A2622;

    --ink:        #F0EBE3;
    --ink-soft:   #A79E92;
    --ink-faint:  #837A6E;

    --accent:       #FF7C4D;
    --accent-ink:   #1A1714;
    --accent-hover: #FF9166;
    --accent-wash:  #2E211A;
    --accent-2:     #4FB3AA;
    --accent-2-wash:#1B2A28;
    --highlight:    #FFD34D;

    --shadow-card:  0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.34);
    --shadow-hover: 0 2px 4px rgba(0,0,0,.34), 0 12px 28px rgba(0,0,0,.42);
    --shadow-pop:   0 8px 40px rgba(0,0,0,.55);
  }
}

:root[data-theme="dark"] {
  --paper:      #191714;
  --card:       #221F1B;
  --sunk:       #2A2622;
  --rule:       #332E28;
  --rule-soft:  #2A2622;

  --ink:        #F0EBE3;
  --ink-soft:   #A79E92;
  --ink-faint:  #837A6E;

  --accent:       #FF7C4D;
  --accent-ink:   #1A1714;
  --accent-hover: #FF9166;
  --accent-wash:  #2E211A;
  --accent-2:     #4FB3AA;
  --accent-2-wash:#1B2A28;
  --highlight:    #FFD34D;

  --shadow-card:  0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.34);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.34), 0 12px 28px rgba(0,0,0,.42);
  --shadow-pop:   0 8px 40px rgba(0,0,0,.55);
}