/* ─── L1 · Primitive colors ────────────────────────────────────────────────── */
:root {
  --prim-brown-darkest: #1d1309;
  --prim-brown-dark:    #594b3e;
  --prim-brown-medium:  #806a58;
  --prim-brown-light:   #846646;

  --prim-tan-base:      #b9a581;
  --prim-tan-light:     #f0d8aa;
  --prim-tan-cream:     #fffbcf;

  --prim-gold:          #c4a12d;
  --prim-orange:        #f29824;
  --prim-orange-light:  #f39d2e;

/* ─── L1 · Spacing scale ───────────────────────────────────────────────────── */

  --space-xxs:   4px;
  --space-xs:    8px;
  --space-s:     12px;
  --space-m:     16px;
  --space-l:     24px;
  --space-xl:    32px;
  --space-xxl:   48px;
  --space-xxxl:  64px;

/* ─── L1 · Typography ──────────────────────────────────────────────────────── */

  --font-body:    Verdana, Arial, Helvetica, sans-serif;
  --font-heading: Acme, sans-serif;
  --font-nav:     Signika, sans-serif;

/* ─── L2 · M3 color roles ──────────────────────────────────────────────────── */

  --color-surface:            var(--prim-brown-darkest);
  --color-surface-container:  color-mix(in srgb, var(--prim-brown-darkest), black 40%);
  --color-on-surface:         var(--prim-tan-base);
  --color-on-surface-variant: var(--prim-brown-light);
  --color-primary:            var(--prim-gold);
  --color-on-primary:         var(--prim-brown-darkest);
  --color-outline:            rgba(196, 161, 45, 0.20);
  --color-outline-variant:    rgba(196, 161, 45, 0.10);

/* ─── L2 · Named semantic roles ────────────────────────────────────────────── */

  --color-nav:         var(--prim-brown-medium);
  --color-nav-hover:   var(--prim-tan-cream);
  --color-heading:     var(--prim-tan-light);

/* ─── L2 · Status (M3 extended roles) ─────────────────────────────────────── */

  --color-success-container:    #1c4300;
  --color-on-success-container: #4ade80;
  --color-info-container:       #002b4d;
  --color-on-info-container:    #60a5fa;
  --color-error-container:      #3b0000;
  --color-on-error-container:   #f87171;
  --color-warning-container:    #4d2600;
  --color-on-warning-container: #fbbf24;

/* ─── L2 · Semantic spacing aliases ────────────────────────────────────────── */

  --space-section:    var(--space-xl);   /* 32px - between major page sections */
  --space-block:      var(--space-m);    /* 16px - between content blocks */
  --space-inline:     var(--space-xxs);  /* 4px - within a component */
  --space-screen-pad: 20px;             /* screen edge padding */
}