/* ============================================================
   KREW DESIGN SYSTEM — colors_and_type.css
   Brand: Krew (getkrew.ai)
   Vibe: Mature, masculine, modern AND retro, digital AND analog,
         warm, trustworthy. Film crew DNA.
   ============================================================ */

/* --- Web fonts ----------------------------------------------
   Proxima Nova is a paid font. We substitute with Mulish
   (Google Fonts) as the closest metric/geometric-humanist match.
   Caveat is used verbatim from Google Fonts for handwritten accents.
   See README for guidance on swapping in the licensed font files.
-------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..900;1,300..900&family=Caveat:wght@400..700&display=swap');

:root {
  /* ---------- BRAND COLOR TOKENS ---------- */
  --krew-spark:      #FF5405;   /* primary accent — the cursor/click */
  --krew-spark-ink:  #E84A04;   /* pressed / darker on hover */
  --krew-spark-glow: #FF7A3D;   /* lifted / highlight */
  /* Ink (replaces Slate as primary) — warm near-black, more archival */
  --krew-slate:      #1C1A18;   /* primary text — warm ink black */
  --krew-slate-deep: #0E0D0C;   /* strongest ink */
  --krew-slate-mid:  #5A554E;   /* secondary text */
  --krew-slate-soft: #8B8478;   /* tertiary / meta */
  /* Bone (replaces Film Grain as primary) — more timeless, archival off-white */
  --krew-grain:      #EDE4D3;   /* bone — default page */
  --krew-grain-warm: #DFD2B8;   /* deeper bone for sections */
  --krew-grain-pale: #F5EEDD;   /* lightest tinted surface */
  --krew-paper:      #FBF7EC;   /* near-white, tinted warm */
  --krew-ink:        #0E0D0C;   /* black-with-warmth */

  /* Analog accents (muted — supporting palette only) */
  --krew-reel:       #6B3A1F;   /* reel brown — warm, analog */
  --krew-leader:     #C4A77A;   /* film-leader tan */
  --krew-safe:       #3F6E4A;   /* mid-century production green */
  --krew-alert:      #B8371C;   /* darker spark for destructive states */

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg-page:         var(--krew-grain);
  --bg-surface:      var(--krew-paper);
  --bg-raised:       #FFFFFF;
  --bg-sunken:       var(--krew-grain-warm);
  --bg-inverse:      var(--krew-ink);

  --fg-1:            var(--krew-slate-deep);   /* primary text */
  --fg-2:            var(--krew-slate);        /* body text */
  --fg-3:            var(--krew-slate-mid);    /* secondary */
  --fg-4:            var(--krew-slate-soft);   /* tertiary / captions */
  --fg-inverse:      var(--krew-grain);
  --fg-accent:       var(--krew-spark);

  --border-hair:     rgba(74, 74, 74, 0.12);
  --border-soft:     rgba(74, 74, 74, 0.22);
  --border-strong:   rgba(74, 74, 74, 0.55);
  --border-ink:      var(--krew-slate-deep);

  --accent:          var(--krew-spark);
  --accent-hover:    var(--krew-spark-ink);
  --accent-soft:     rgba(255, 84, 5, 0.12);
  --accent-ring:     rgba(255, 84, 5, 0.35);

  --success:         var(--krew-safe);
  --danger:          var(--krew-alert);

  /* ---------- TYPE TOKENS ---------- */
  --font-sans: "Mulish", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Marker Felt", cursive;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Base type scale (1.125 "major second" — quiet, editorial) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.12em;

  /* ---------- SHAPE / ELEVATION ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(42,42,42,0.04), 0 1px 2px rgba(42,42,42,0.06);
  --shadow-2: 0 1px 0 rgba(42,42,42,0.05), 0 4px 10px rgba(42,42,42,0.08);
  --shadow-3: 0 2px 0 rgba(42,42,42,0.06), 0 12px 28px rgba(42,42,42,0.12);
  --shadow-ink: 3px 3px 0 var(--krew-ink);          /* "stamp" shadow — analog */
  --shadow-spark: 3px 3px 0 var(--krew-spark);      /* accent stamp */
  --inset-hair: inset 0 0 0 1px var(--border-hair);

  /* ---------- SPACING (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spark: cubic-bezier(0.2, 1.2, 0.3, 1);   /* slight overshoot for "click spark" */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================================================
   ELEMENT DEFAULTS — semantic type
   ============================================================ */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }
body { font-size: var(--fs-16); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-weight: 800;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-weight: 800;
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h4, .h4 {
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
}

p { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--fg-2); }
small, .caption { font-size: var(--fs-13); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

.hand {
  font-family: var(--font-hand);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--krew-spark);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a { color: var(--krew-spark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--krew-spark-ink); }

hr { border: 0; border-top: 1px solid var(--border-hair); }

/* Selection tint */
::selection { background: var(--accent-soft); color: var(--krew-slate-deep); }