/* ============================================================
   RedNut Design System — portable tokens  (v1.0 · "Sunbaked")
   Direction: Riso Zine — two warm inks, cool teal contrast,
   overprint blends, grain, chunky ink borders.
   Drop this file into any project and use the var(--rn-*) tokens.
   ------------------------------------------------------------
   FONTS (add once to <head>):
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
   THEME: default is light. Add data-theme="dark" to <html> or any
   container to flip that subtree into dark mode.
   ============================================================ */

:root {
  /* ---- Brand inks (light mode) ---- */
  --rn-red:        #FF4D2E;   /* primary brand ink            */
  --rn-marigold:   #F5A300;   /* secondary ink                */
  --rn-teal:       #0FA091;   /* 4th / contrast + success     */
  --rn-teal-ink:   #0B7A6E;   /* teal legible as text on paper*/
  --rn-ink:        #231F1A;   /* text + chunky borders        */
  --rn-paper:      #FBF3E0;   /* ground                       */

  /* ---- Overprint blends (decorative) ---- */
  --rn-op-red-marigold: #C23A12;
  --rn-op-red-teal:     #8A3A3F;
  --rn-op-marigold-teal:#7D7A1C;

  /* ---- Semantic roles (theme-aware; use THESE in components) ---- */
  --rn-bg:         var(--rn-paper);
  --rn-surface:    #FBF3E0;
  --rn-text:       var(--rn-ink);
  --rn-text-muted: #6B6459;
  --rn-border:     var(--rn-ink);
  --rn-brand:      var(--rn-red);
  --rn-brand-2:    var(--rn-marigold);
  --rn-accent:     var(--rn-teal);
  --rn-success:    var(--rn-teal);
  --rn-on-brand:   var(--rn-paper);  /* text on a red/teal fill */
  --rn-on-accent:  var(--rn-paper);

  /* ---- Type ---- */
  --rn-font-display: 'Syne', system-ui, sans-serif;
  --rn-font-body:    'Work Sans', system-ui, sans-serif;
  --rn-weight-body:      400;
  --rn-weight-medium:    500;
  --rn-weight-strong:    700;
  --rn-weight-display:   800;

  /* modular type scale (~1.28), rem-based */
  --rn-text-xs:   0.75rem;   /* 12 captions/labels   */
  --rn-text-sm:   0.875rem;  /* 14 secondary         */
  --rn-text-base: 1rem;      /* 16 body              */
  --rn-text-lg:   1.25rem;   /* 20 lead              */
  --rn-text-xl:   1.6rem;    /* ~26 h3               */
  --rn-text-2xl:  2.1rem;    /* ~34 h2               */
  --rn-text-3xl:  3.25rem;   /* ~52 h1               */
  --rn-text-4xl:  4.75rem;   /* ~76 display          */
  --rn-leading-tight: 0.95;
  --rn-leading-snug:  1.2;
  --rn-leading-body:  1.55;
  --rn-tracking-label: 0.2em;  /* uppercase eyebrows */
  --rn-tracking-display: -0.02em;

  /* ---- Spacing (4px base) ---- */
  --rn-space-1: 4px;
  --rn-space-2: 8px;
  --rn-space-3: 12px;
  --rn-space-4: 16px;
  --rn-space-5: 24px;
  --rn-space-6: 32px;
  --rn-space-7: 48px;
  --rn-space-8: 64px;

  /* ---- Radii ---- */
  --rn-radius-sm: 6px;
  --rn-radius-md: 12px;
  --rn-radius-lg: 16px;
  --rn-radius-pill: 999px;

  /* ---- Signature chunky ink border ---- */
  --rn-border-w: 2px;
  --rn-border-line: var(--rn-border-w) solid var(--rn-border);

  /* ---- Motion ---- */
  --rn-dur-fast: 140ms;
  --rn-dur-base: 260ms;
  --rn-dur-slow: 480ms;
  --rn-ease-stamp: cubic-bezier(.2,.8,.2,1);
  --rn-ease-standard: cubic-bezier(.4,0,.2,1);

  /* ---- Grain overlay (apply .rn-grain to a positioned box) ---- */
  --rn-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* ============================================================
   DARK MODE — warm ground, inks brighten
   ============================================================ */
[data-theme="dark"] {
  --rn-red:      #FF6A4D;
  --rn-marigold: #FFB42E;
  --rn-teal:     #2FD4BF;
  --rn-teal-ink: #2FD4BF;
  --rn-ink:      #F2E9D8;   /* text is now light   */
  --rn-paper:    #1C1712;   /* ground is now dark  */

  --rn-op-red-marigold: #E0642E;
  --rn-op-red-teal:     #C05a52;
  --rn-op-marigold-teal:#B0A83A;

  --rn-bg:         #1C1712;
  --rn-surface:    #26201A;
  --rn-text:       #F2E9D8;
  --rn-text-muted: #B8AC95;
  --rn-border:     #4A3F33;
  --rn-on-brand:   #1C1712;
  --rn-on-accent:  #1C1712;
}

/* ============================================================
   Optional utility classes — convenience, not required
   ============================================================ */
.rn-display { font-family: var(--rn-font-display); font-weight: var(--rn-weight-display);
  letter-spacing: var(--rn-tracking-display); line-height: var(--rn-leading-tight); }
.rn-body { font-family: var(--rn-font-body); font-weight: var(--rn-weight-body);
  line-height: var(--rn-leading-body); color: var(--rn-text); }
.rn-eyebrow { font-family: var(--rn-font-body); font-weight: var(--rn-weight-strong);
  font-size: var(--rn-text-xs); letter-spacing: var(--rn-tracking-label);
  text-transform: uppercase; color: var(--rn-text-muted); }

.rn-card { background: var(--rn-surface); border: var(--rn-border-line);
  border-radius: var(--rn-radius-md); padding: var(--rn-space-5); }

.rn-btn { font-family: var(--rn-font-display); font-weight: var(--rn-weight-display);
  font-size: var(--rn-text-sm); border: var(--rn-border-line);
  border-radius: var(--rn-radius-sm); padding: 9px 18px; cursor: pointer;
  background: var(--rn-brand); color: var(--rn-on-brand);
  transition: transform var(--rn-dur-fast) var(--rn-ease-standard); }
.rn-btn:hover { transform: translate(-1px,-1px); }
.rn-btn--accent { background: var(--rn-accent); color: var(--rn-on-accent); }
.rn-btn--ghost  { background: transparent; color: var(--rn-text); }

.rn-grain { position: relative; }
.rn-grain::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image: var(--rn-grain); opacity:.4; mix-blend-mode: multiply; }
[data-theme="dark"] .rn-grain::after { mix-blend-mode: screen; opacity:.3; }

/* ============================================================
   Motion keyframes — the RedNut "press" language
   ============================================================ */
/* Registration wobble — hover, headings, logo idle */
@keyframes rn-reg { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-2.5px,1.5px)}
  50%{transform:translate(1.5px,-1px)} 75%{transform:translate(-1px,-2px)} }
/* Ink stamp — score pops, page loads, CTAs */
@keyframes rn-stamp { 0%{transform:scale(1.7) rotate(-9deg);opacity:0} 10%{opacity:1}
  18%{transform:scale(.94) rotate(2deg)} 26%{transform:scale(1) rotate(0)} 100%{opacity:1} }
/* Grain flicker — ambient texture, loaders */
@keyframes rn-grainf { 0%{opacity:.3;transform:translate(0,0)} 33%{opacity:.6;transform:translate(-5px,3px)}
  66%{opacity:.4;transform:translate(4px,-4px)} 100%{opacity:.3;transform:translate(-2px,2px)} }
/* Halftone wipe — page & route transitions, reveals */
@keyframes rn-wipe { 0%{clip-path:inset(0 100% 0 0)} 55%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 0 0 0)} }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}