/* =============================================================
   WorkMayt — Foundations: Colors + Type
   -------------------------------------------------------------
   Source of truth. The Plan Board pitch (see reference/ableton-
   timeline-pitch.html) is the canonical visual direction; the
   industrial-neutral palette from branding/colors.md is folded
   in via aliases (paper≈kraft, ink≈oxide, safety≈earned-orange).

   The accent rule: --safety / --earned-orange is INFORMATION-
   BEARING ONLY. Live shifts, clocked-in workers, overdue jobs,
   the now-line. Never decorative. Read BRAND_GUIDELINES in
   README.md before touching it.
   ============================================================= */

/* ---- Webfonts (Google Fonts CDN) -----------------------------
   Pitch deck uses Fraunces + Instrument Sans + JetBrains Mono.
   GT America (commercial) is the brand recommendation; until it
   is licensed, Inter Display 800 is the documented fallback for
   the wordmark. App-shipped surfaces use Inter (already shipped).
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────
     COLOR — Paper/Ink chrome (the Plan Board canvas)
     ───────────────────────────────────────────────────────── */
  --paper:        #FAF5EB;   /* CREAM — canonical app surface */
  --paper-deep:   #F1EBDD;   /* second elevation on paper */
  --paper-edge:   #DDD5C2;   /* hairline dividers on paper */

  --ink:          #000000;   /* DEEP BLACK — canonical structure */
  --ink-2:        #2A2723;   /* secondary type */
  --ink-3:        #6B665D;   /* tertiary, captions, mono labels */

  /* Dark instrument chrome (the DAW timeline surface) */
  --graphite:     #0F0F11;   /* deepest surface */
  --slate:        #18181C;   /* panel */
  --slate-2:      #1F1F24;   /* row alt */
  --rail:         #2A2A31;   /* divider */
  --rail-2:       #34343B;   /* divider strong */
  --chalk:        #ECEAE4;   /* type on dark */
  --chalk-2:      #B6B3AB;   /* secondary type on dark */
  --chalk-3:      #7A7770;   /* tertiary on dark */

  /* ─────────────────────────────────────────────────────────
     COLOR — Brand aliases (per branding/colors.md)
     "kraft / oxide / cement / charcoal / earned-orange"
     ───────────────────────────────────────────────────────── */
  --kraft:           #E8DFD0;
  --oxide:           #1A1814;
  --cement:          #A8A29A;
  --charcoal:        #2D2A24;
  --earned-orange:   #E0561F;

  /* ─────────────────────────────────────────────────────────
     COLOR — The accent (information-bearing only)
     ───────────────────────────────────────────────────────── */
  --safety:       #FF6B00;   /* WorkMayt Orange — live/now/active */
  --safety-ink:   #7A2A05;   /* readable on warm soft tints */
  --workmayt-orange: #FF6B00;
  --cream:        #FAF5EB;
  --deep-black:   #000000;

  /* ─────────────────────────────────────────────────────────
     COLOR — Working palette for blocks (jobs × shifts)
     The timeline mixes block fills as job × shift (oklab).
     None of these are decorative — they identify a project
     or crew.
     ───────────────────────────────────────────────────────── */
  /* Lane fills (silhouette palette from 31d-timeline-cards) */
  --lane-mint:    #B6E3C8;   /* mint */
  --lane-butter:  #F5D88A;   /* palette / butter */
  --lane-pink:    #F2B6C6;   /* pink */
  --lane-orange:  #FF6B00;   /* WorkMayt orange — accent lane */
  --lane-indigo:  #5B5FB0;   /* indigo */
  --lane-teal:    #4EC3B0;   /* teal */

  /* Legacy aliases (some components still reference these) */
  --amber:        var(--lane-butter);
  --teal:         var(--lane-teal);
  --rose:         var(--lane-pink);
  --lime:         var(--lane-mint);
  --violet:       var(--lane-indigo);

  /* ─────────────────────────────────────────────────────────
     SEMANTIC — fg/bg (on paper)
     ───────────────────────────────────────────────────────── */
  --bg:           var(--paper);
  --bg-2:         var(--paper-deep);
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --line:         var(--paper-edge);
  --line-strong:  var(--ink);

  /* ─────────────────────────────────────────────────────────
     TYPE — Families
     ───────────────────────────────────────────────────────── */
  --f-display:    'Fraunces', 'Times New Roman', Georgia, serif;
  --f-body:       'Instrument Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-app:        'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:       'JetBrains Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* ─────────────────────────────────────────────────────────
     TYPE — Marketing scale (paper surfaces)
     ───────────────────────────────────────────────────────── */
  --fs-hero:      clamp(64px, 11vw, 164px);
  --fs-display-1: clamp(48px, 7vw, 96px);
  --fs-display-2: clamp(40px, 5vw, 72px);
  --fs-h1:        clamp(32px, 4vw, 48px);
  --fs-h2:        clamp(28px, 3vw, 36px);
  --fs-h3:        20px;
  --fs-lede:      clamp(22px, 2.1vw, 28px);
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-caption:   13px;
  --fs-mono:      11px;

  /* ─────────────────────────────────────────────────────────
     SPACE — 8pt grid (matches mobile-theme.ts)
     ───────────────────────────────────────────────────────── */
  --s-xxs: 2px;
  --s-xs:  4px;
  --s-sm:  8px;
  --s-md:  12px;
  --s-lg:  16px;
  --s-xl:  20px;
  --s-2xl: 24px;
  --s-3xl: 32px;
  --s-4xl: 48px;
  --s-5xl: 64px;
  --s-6xl: 96px;

  /* ─────────────────────────────────────────────────────────
     RADII — continuous corners
     ───────────────────────────────────────────────────────── */
  --r-none:  0;
  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    8px;
  --r-xl:    10px;
  --r-2xl:   14px;
  --r-3xl:   18px;
  --r-pill:  999px;

  /* ─────────────────────────────────────────────────────────
     ELEVATION — paper shadows are SUBTLE; the deck (DAW) gets
     the heavy lift. Dark-surface drop shadows sit deep & soft.
     ───────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(10,10,11,0.04), 0 1px 2px rgba(10,10,11,0.06);
  --shadow-2: 0 4px 12px rgba(10,10,11,0.08), 0 1px 2px rgba(10,10,11,0.06);
  --shadow-3: 0 8px 24px rgba(10,10,11,0.12), 0 2px 4px rgba(10,10,11,0.08);
  --shadow-deck: 0 60px 120px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.30);

  /* ─────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────── */
  --gutter:       64px;
  --content-max:  1240px;
  --hit-min:      44px;
  --hit-compact:  32px;

  /* ─────────────────────────────────────────────────────────
     MOTION — quiet, mechanical. No bounces, no overshoot.
     Easing is "out" because the system reacts to you, not
     the other way around.
     ───────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --dur-1: 80ms;     /* press / state flip */
  --dur-2: 160ms;    /* hover, color */
  --dur-3: 240ms;    /* panel open, drawer */
  --dur-4: 360ms;    /* large layout */
}

/* ─────────────────────────────────────────────────────────────
   DARK SURFACES — the timeline / deck instrument.
   Apply `data-surface="deck"` to flip a region into the
   graphite-on-chalk register.
   ───────────────────────────────────────────────────────────── */
[data-surface="deck"] {
  --bg:           var(--graphite);
  --bg-2:         var(--slate);
  --fg:           var(--chalk);
  --fg-2:         var(--chalk-2);
  --fg-3:         var(--chalk-3);
  --line:         var(--rail);
  --line-strong:  var(--rail-2);
}

/* =============================================================
   BASE — applied at body level
   ============================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "cv11";
  font-variant-numeric: tabular-nums;        /* TABULAR is non-negotiable */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--safety); color: var(--paper); }

/* =============================================================
   SEMANTIC TYPE — drop-in classes; map onto h1..h4 by default
   ============================================================= */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}
h1, .display-1 {
  font-size: var(--fs-display-1);
  line-height: 0.95;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 120, "SOFT" 30;
}
h2, .h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  font-weight: 400;
  font-variation-settings: "opsz" 80;
}
h3, .h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: 500;
  font-variation-settings: "opsz" 48;
}
h4, .h3 { font-size: var(--fs-h3); font-weight: 600; }

.lede {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--fs-lede);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--fg-2);
  font-variation-settings: "opsz" 36;
  max-width: 42ch;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: italic; }

.eyebrow,
.label-mono {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.mono { font-family: var(--f-mono); font-feature-settings: "tnum"; }
.num  { font-variant-numeric: tabular-nums; }

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

/* ── Italic display flourish — used sparingly. The pitch deck
   uses the Fraunces italic axis with safety color for the most
   important word in a heading. */
.flourish {
  font-style: italic;
  color: var(--safety);
  font-variation-settings: "opsz" 144;
}

/* =============================================================
   APP SURFACE OVERRIDE — when rendering the existing shipped
   Inter-based admin/mobile UI, scope under `.app-surface`.
   ============================================================= */
.app-surface {
  font-family: var(--f-app);
  font-size: 15px;
  letter-spacing: -0.24px;
}
.app-surface h1, .app-surface h2, .app-surface h3, .app-surface h4 {
  font-family: var(--f-app);
  font-weight: 700;
  letter-spacing: -0.41px;
}