/* =========================================================
   HULU COFFEE ROASTERS — Design Foundations
   Colors + Typography
   ========================================================= */

/* Outfit variable — local file, full 100–900 axis */
/* Outfit is provided by fonts.css (self-hosted data-URI, no CDN).
   Monospace falls back to system mono via --font-mono below. */

:root {
  /* ---------- PALETTE 01 — INDUSTRIAL (primary) ---------- */
  --ind-ink:    #1A1A1A;   /* near-black */
  --ind-steel:  #888888;   /* mid gray   */
  --ind-signal: #EFA100;   /* yellow-gold */
  --ind-paper:  #F5F0E8;   /* warm off-white */
  --ind-bronze: #7A5A2E;   /* aged brass — primary mark stems */

  /* ---------- INDUSTRIAL · EXPEDITION ACCENTS ---------- */
  /* Extended accent set. Sit between Ink and Steel in value.
     High contrast against Signal yellow. For IG, packaging,
     section coding, illustration fills. Use one accent per surface. */
  --exp-bronze:   #7A5A2E;  /* aged brass · coffee-warm */
  --exp-teal:     #2C4A4E;  /* topographic map-blue */
  --exp-oxblood:  #6E2B22;  /* expedition stamp red */
  --exp-olive:    #4C5530;  /* contour-line green */
  --exp-graphite: #3C3A36;  /* darker neutral · max contrast */

  /* ---------- PALETTE 02 — SPECIALTY ---------- */
  --spe-obsidian: #1C1C1E;
  --spe-graphite: #4A4A4A;
  --spe-camel:    #B08050;
  --spe-bone:     #EDE8DF;

  /* ---------- PALETTE 03 — BLACK ON KRAFT ---------- */
  --kra-ink:   #1A1A1A;
  --kra-kraft: #C4965A;   /* approximation of uncoated kraft stock */

  /* ---------- SEMANTIC (defaults to Industrial) ---------- */
  --bg:         var(--ind-paper);
  --fg:         var(--ind-ink);
  --fg-muted:   var(--ind-steel);
  --accent:     var(--ind-signal);
  --rule:       #1A1A1A;
  --rule-soft:  rgba(26, 26, 26, 0.12);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* ---------- TYPE ROLES ---------- */
  /* Display — wordmark + large hero */
  --t-display-size: 236px;
  --t-display-weight: 900;
  --t-display-tracking: 0.1em;
  --t-display-case: uppercase; /* @kind font */
  --t-display-leading: 0.95;

  /* Headline */
  --t-headline-size: 32px;
  --t-headline-weight: 700;
  --t-headline-tracking: -0.01em;
  --t-headline-leading: 1.15;

  /* Label / Eyebrow */
  --t-label-size: 12px;
  --t-label-weight: 600;
  --t-label-tracking: 0.14em;
  --t-label-case: uppercase; /* @kind font */

  /* Body */
  --t-body-size: 15px;
  --t-body-weight: 400;
  --t-body-tracking: 0;
  --t-body-leading: 1.65;

  /* Caption / Meta */
  --t-caption-size: 10px;
  --t-caption-weight: 300;
  --t-caption-tracking: 0.18em;
  --t-caption-case: uppercase; /* @kind font */

  /* ---------- SPACING / RHYTHM ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- RADII ---------- */
  --radius-0: 0px;          /* default — almost everything */
  --radius-dot: 999px;      /* origin-point dot */

  /* ---------- RULES / BORDERS ---------- */
  --hairline: 1px solid var(--rule);
  --hairline-soft: 1px solid var(--rule-soft);

  /* ---------- GRID ---------- */
  --grid-unit: 8px;
  --field-grid: 16px;       /* field-notebook grid spacing */
}

/* ---------- PALETTE SWITCHERS ---------- */
[data-palette="industrial"] {
  --bg: var(--ind-paper);
  --fg: var(--ind-ink);
  --fg-muted: var(--ind-steel);
  --accent: var(--ind-signal);
  --rule: var(--ind-ink);
}
[data-palette="specialty"] {
  --bg: var(--spe-bone);
  --fg: var(--spe-obsidian);
  --fg-muted: var(--spe-graphite);
  --accent: var(--spe-camel);
  --rule: var(--spe-obsidian);
}
[data-palette="kraft"] {
  --bg: var(--kra-kraft);
  --fg: var(--kra-ink);
  --fg-muted: var(--kra-ink);
  --accent: var(--kra-ink);
  --rule: var(--kra-ink);
}

/* =========================================================
   ELEMENT DEFAULTS
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display {
  font-family: var(--font-sans);
  font-size: var(--t-display-size);
  font-weight: var(--t-display-weight);
  letter-spacing: var(--t-display-tracking);
  text-transform: var(--t-display-case);
  line-height: var(--t-display-leading);
}
.t-headline, h1, h2, h3 {
  font-family: var(--font-sans);
  font-size: var(--t-headline-size);
  font-weight: var(--t-headline-weight);
  letter-spacing: var(--t-headline-tracking);
  line-height: var(--t-headline-leading);
  margin: 0;
}
.t-label, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-tracking);
  text-transform: var(--t-label-case);
}
.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  letter-spacing: var(--t-body-tracking);
  line-height: var(--t-body-leading);
}
.t-caption, .meta {
  font-family: var(--font-sans);
  font-size: var(--t-caption-size);
  font-weight: var(--t-caption-weight);
  letter-spacing: var(--t-caption-tracking);
  text-transform: var(--t-caption-case);
}
.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "ss01";
}

/* =========================================================
   KEY VISUAL ELEMENT — Origin point + coordinates
   ========================================================= */
.origin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg);
}
.origin::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-dot);
  background: var(--fg);
  flex: 0 0 auto;
}
.origin--accent::before { background: var(--accent); }

/* Field-notebook grid background */
.field-grid {
  background-image:
    linear-gradient(to right, rgba(26,26,26,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,26,0.06) 1px, transparent 1px);
  background-size: var(--field-grid) var(--field-grid);
}

/* Hairline divider — like a survey baseline */
.baseline {
  border: 0;
  border-top: var(--hairline);
  margin: var(--space-6) 0;
}
.baseline--soft { border-top: var(--hairline-soft); }

/* Coordinate stamp block */
.stamp {
  display: inline-block;
  padding: 6px 10px;
  border: var(--hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}