/* DESIGN TOKENS — a verbatim copy of website/greasegiant.html's :root block and
   its .btn / .btn-primary / .btn-ghost / .eyebrow rules (spec F, F1; t05s04).
   NEVER restyle here: portal/test/run_tokens_pin.js fails the suite when any
   token name or value, or any of those rules, differs from the site. To change
   a colour, change the site first, then copy the block again.

   src/assets/tokens.js is GENERATED from this file by scripts/tokens-build.mjs
   (a Worker cannot import a .css file; the generated twin is what index.js
   serves at GET /assets/tokens.css). Edit here, run the script, commit both;
   scripts/run-portal-tests.sh --checks the two never drift. */
  :root {
    --paper:        #FBF6E8;
    --paper-deep:   #F2E9D2;
    --paper-soft:   #FFFCF5;
    --card:         #FFFFFF;
    --ink:          #1A1612;
    --ink-soft:     #4A453E;
    --ink-mute:     #8A8378;
    --yellow:       #F5B81C;
    --yellow-soft:  #FFE9A8;
    --yellow-deep:  #A8761F;
    --red:          #E84A2C;
    --red-soft:     #FCDCD2;
    --red-deep:     #B83218;
    --green:        #2D8B3F;
    --green-soft:   #D7F0DC;
    --line:         rgba(26, 22, 18, 0.10);
    --line-strong:  rgba(26, 22, 18, 0.22);
    --shadow-sm:    0 2px 10px rgba(26, 22, 18, 0.04);
    --shadow-md:    0 12px 32px rgba(26, 22, 18, 0.08);
    --shadow-lg:    0 30px 60px -20px rgba(26, 22, 18, 0.18);
    --serif:        'Fraunces', Georgia, serif;
    --sans:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:         'JetBrains Mono', ui-monospace, monospace;
  }

  /* Typography accents (site lines 125–144) */
  .eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--red);
  }
  .eyebrow.muted { color: var(--ink-mute); }
  .eyebrow.muted::before { background: var(--ink-mute); }
  .eyebrow.yellow { color: var(--yellow-deep); }
  .eyebrow.yellow::before { background: var(--yellow-deep); }

  /* Pill buttons (site lines 300–333) */
  .btn {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
  }
  .btn-primary {
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-sm);
  }
  .btn-primary:hover {
    background: var(--yellow);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
  }
  .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn-arrow { transition: transform 0.2s ease; display:inline-block; }
  .btn:hover .btn-arrow { transform: translateX(4px); }