/* ─────────────────────────────────────────────────────────────────────
   ChefCommand — Colors & Type     · Identity v1.0 (locked)
   Forest green + brass + warm cream. Two-tone, restrained, premium.
   ───────────────────────────────────────────────────────────────────── */

/* ── Brand fonts (variable; served from /fonts) ──────────────────── */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VF.ttf") format("truetype-variations"),
       url("fonts/SpaceGrotesk-VF.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VF.ttf") format("truetype-variations"),
       url("fonts/DMSans-VF.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VF.ttf") format("truetype-variations"),
       url("fonts/JetBrainsMono-VF.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand palette (from identity v1.0) ──────────────────────────── */
  --cc-forest:        #1E3A2B;   /* primary — sidebars, mark, text on cream */
  --cc-forest-deep:   #142A1F;   /* deeper step — top of gradients, button-pressed */
  --cc-forest-mid:    #2E5340;   /* lifted forest — hover */
  --cc-sage:          #7F9B7F;   /* tinted forest — disabled, hint */

  --cc-brass:         #B88746;   /* accent — chevron, primary CTA arrow, links */
  --cc-brass-deep:    #8E6630;   /* hover/pressed brass */
  --cc-saffron:       #D9A148;   /* lighter brass — highlights, "pending" warmth */

  --cc-cream:         #F4EFE3;   /* page surface */
  --cc-cream-2:       #ECE5D3;   /* alt rows, table head, ghost-hover */
  --cc-cream-3:       #DCD3BD;   /* deeper cream — dividers, dots */
  --cc-bone:          #FFFCF5;   /* card surface — slightly warmer than white */

  --cc-line:          #DCD3BD;   /* default border on cream */
  --cc-line-soft:     #E7DFCB;   /* hairline on cream */

  --cc-text:          #1A2218;   /* primary text — near-black forest */
  --cc-text-2:        #4B5A4A;   /* secondary */
  --cc-text-3:        #8A8772;   /* tertiary, meta, captions */
  --cc-text-inv:      #F4EFE3;   /* text on forest */

  /* ── Semantic / status ─────────────────────────────────────────────
     Status reuses brand pigments — saffron for warmth/pending, brass
     for in-progress, forest for done, a measured red only for danger.   */
  --cc-status-pending:      #7A5618;   /* on saffron-wash */
  --cc-status-pending-wash: rgba(217,161,72,.22);

  --cc-status-preparing:      var(--cc-brass-deep);
  --cc-status-preparing-wash: rgba(184,135,70,.18);

  --cc-status-ready:      var(--cc-forest);
  --cc-status-ready-wash: rgba(46,83,64,.18);

  --cc-status-completed:      var(--cc-text-3);
  --cc-status-completed-wash: var(--cc-cream-2);

  --cc-status-cancelled:      #8C2F22;
  --cc-status-cancelled-wash: rgba(140,47,34,.12);

  --cc-success:       var(--cc-forest);
  --cc-success-wash:  rgba(46,83,64,.18);
  --cc-warning:       var(--cc-status-pending);
  --cc-warning-wash:  var(--cc-status-pending-wash);
  --cc-danger:        var(--cc-status-cancelled);
  --cc-danger-wash:   var(--cc-status-cancelled-wash);

  /* ── Type families ───────────────────────────────────────────────── */
  --cc-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --cc-font-body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --cc-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Display weights — Medium, never Bold. The identity is restrained. */
  --cc-fw-display:   500;
  --cc-fw-display-emphatic: 600;   /* reserved — section heads, hero only */
  --cc-fw-body:      400;
  --cc-fw-body-emphatic: 500;

  /* ── Type scale ──────────────────────────────────────────────────── */
  --cc-size-hero:    clamp(40px, 4.4vw, 64px);   /* cover / marketing hero */
  --cc-size-display: clamp(32px, 3vw, 44px);     /* page H1 */
  --cc-size-h1:      32px;
  --cc-size-h2:      24px;
  --cc-size-h3:      18px;
  --cc-size-body:    15px;
  --cc-size-small:   13px;
  --cc-size-micro:   11px;

  --cc-lh-tight:     1.05;
  --cc-lh-snug:      1.2;
  --cc-lh-normal:    1.5;
  --cc-lh-loose:     1.6;

  --cc-tracking-tight:  -0.02em;
  --cc-tracking-snug:   -0.015em;
  --cc-tracking-normal:  0;
  --cc-tracking-caps:    0.14em;   /* the eyebrow tracking */

  /* ── Spacing scale (4 px base) ───────────────────────────────────── */
  --cc-space-1:   4px;
  --cc-space-2:   8px;
  --cc-space-3:   12px;
  --cc-space-4:   16px;
  --cc-space-5:   20px;
  --cc-space-6:   24px;
  --cc-space-8:   32px;
  --cc-space-10:  40px;
  --cc-space-12:  48px;
  --cc-space-16:  64px;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --cc-radius-sm:   6px;    /* chips, badges */
  --cc-radius-md:   8px;    /* buttons, list rows, small cards */
  --cc-radius-lg:   10px;   /* cards on screen */
  --cc-radius-xl:   14px;   /* big tiles, hero cards, sections */
  --cc-radius-2xl:  20px;   /* covers, frames */
  --cc-radius-pill: 999px;

  /* ── Elevation — paper-soft, never glossy ────────────────────────── */
  --cc-shadow-1: 0 1px 0 rgba(30,58,43,.04), 0 1px 2px rgba(30,58,43,.04);
  --cc-shadow-2: 0 1px 0 rgba(30,58,43,.04), 0 8px 24px -8px rgba(30,58,43,.12);
  --cc-shadow-3: 0 1px 0 rgba(30,58,43,.05), 0 24px 60px -20px rgba(30,58,43,.20);
  --cc-shadow-pop: 0 24px 80px -16px rgba(20,42,31,.45);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --cc-ease-out:    cubic-bezier(.2,.7,.2,1);
  --cc-ease-spring: cubic-bezier(.34,1.36,.64,1);
  --cc-dur-fast:    120ms;
  --cc-dur-base:    180ms;
  --cc-dur-slow:    280ms;
}

/* ──────────────────────────────────────────────────────────────────
   Element + utility classes
   ────────────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--cc-font-body);
  font-size: var(--cc-size-body);
  line-height: var(--cc-lh-normal);
  color: var(--cc-text);
  background: var(--cc-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cc-hero {
  font-family: var(--cc-font-display);
  font-size: var(--cc-size-hero);
  font-weight: var(--cc-fw-display);
  line-height: var(--cc-lh-tight);
  letter-spacing: var(--cc-tracking-tight);
  color: var(--cc-forest-deep);
}

h1, .cc-h1 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-size-display);
  font-weight: var(--cc-fw-display);
  line-height: var(--cc-lh-snug);
  letter-spacing: var(--cc-tracking-snug);
  color: var(--cc-text);
}

h2, .cc-h2 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-size-h2);
  font-weight: var(--cc-fw-display);
  line-height: var(--cc-lh-snug);
  letter-spacing: var(--cc-tracking-snug);
  color: var(--cc-text);
}

h3, .cc-h3 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-size-h3);
  font-weight: var(--cc-fw-display);
  line-height: var(--cc-lh-snug);
  color: var(--cc-text);
}

p, .cc-body {
  font-family: var(--cc-font-body);
  font-size: var(--cc-size-body);
  line-height: var(--cc-lh-normal);
  color: var(--cc-text);
}

.cc-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--cc-text-2);
}

.cc-small { font-size: var(--cc-size-small); color: var(--cc-text-2); }
.cc-meta  { font-size: var(--cc-size-small); color: var(--cc-text-3); font-feature-settings: "tnum" 1; }

/* Eyebrow — the workhorse label. Sits above section heads, stats, ticket heads. */
.cc-eyebrow {
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: var(--cc-fw-body-emphatic);
  letter-spacing: var(--cc-tracking-caps);
  text-transform: uppercase;
  color: var(--cc-text-3);
}

/* Tabular numerics — for prices, table numbers, order ids */
.cc-num, code, kbd, samp {
  font-family: var(--cc-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.cc-price {
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* Order ID style */
.cc-id {
  font-family: var(--cc-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--cc-text);
  letter-spacing: -0.02em;
}

/* The wordmark — for use anywhere besides the inline lockup component. */
.cc-wordmark {
  font-family: var(--cc-font-display);
  font-weight: var(--cc-fw-display);
  letter-spacing: var(--cc-tracking-snug);
  color: var(--cc-forest);
  line-height: 1;
}
.cc-wordmark .dot { color: var(--cc-brass); }