/* ExecFlow design tokens.
 *
 * The register is a BRIEFING: the one page document that lands on a desk at
 * seven in the morning. Masthead, rule, date, ranked items, a signature line.
 * That register is the product — ExecFlow's output is a morning brief with the
 * work already drafted.
 *
 * Deliberate distance from the three named generic looks. Reference:
 * src/data/skills/design-taste/SKILL.md "The banned defaults".
 *   1. warm cream + high contrast serif + terracotta
 *        -> ground is COOL paper, accent is COBALT, and the serif carries one
 *           line per section rather than the whole page. Three variables moved.
 *   2. near black + a single acid accent
 *        -> the dark bands are navy ink, and they are two bands, not the page.
 *   3. broadsheet + hairline rules + zero radius
 *        -> not zero radius (documents 2px, controls pill), and one generous
 *           measure instead of dense columns.
 *
 * Also hard avoided: purple or violet of any kind, glassmorphism, slate 900 to
 * 950 dark mode, gradient text on figures, isometric illustration.
 *
 * Colour provenance. #2563eb is the REAL app primary, from
 * Video Studio\compositions\_data\brand\execflow-island.css. #3b82f6 is the
 * lift the video brand pack uses where it has to read on near black, from
 * _data\brand\execflow.js. Using each in its correct context is what makes the
 * site and the films look like one brand.
 */

:root {
  /* ---- ground ------------------------------------------------------- */
  --paper:        #f7f8fa;   /* cool paper, never warm cream */
  --paper-2:      #eef1f6;   /* the alternating band */
  --paper-3:      #e4e9f1;   /* pressed panels, table zebra */
  --card:         #ffffff;

  /* ---- ink ---------------------------------------------------------- */
  --ink:          #16202e;   /* display + body, tinted navy, never pure black */
  --ink-soft:     #475569;
  --muted:        #64748b;
  --ink-on-dark:  #eef2f9;
  --muted-on-dark:#94a3b8;

  /* ---- accent ------------------------------------------------------- */
  --accent:       #2563eb;   /* the app primary. one accent, committed */
  --accent-deep:  #1b4bc4;   /* pressed / visited */
  --accent-lift:  #3b82f6;   /* DARK BANDS ONLY, where cobalt goes muddy */
  --accent-wash:  rgba(37, 99, 235, .07);
  --accent-ring:  rgba(37, 99, 235, .24);

  /* ---- semantic ----------------------------------------------------- */
  --ok:           #16a34a;
  --ok-wash:      rgba(22, 163, 74, .10);
  --warn:         #d97706;
  --stop:         #dc2626;

  /* ---- the two inverted bands --------------------------------------- */
  --rev-a:        #0f172a;
  --rev-b:        #16202e;

  /* ---- hairlines ----------------------------------------------------
   * Computed toward the ink hue rather than set as a flat grey. A pure grey
   * rule on tinted paper reads dirty. Fallbacks first for old engines.     */
  --rule:         #dde3ec;
  --rule-strong:  #c3ccda;
  --rule-on-dark: rgba(238, 242, 249, .15);

  /* ---- type ---------------------------------------------------------
   * Fraunces carries ONE line per section and its real italic is the accent
   * word. Outfit carries everything else. Inter appears in exactly one place:
   * inside a recreated product surface, where fidelity to the real app beats
   * good type (Video Studio TYPOGRAPHY.md, app recreation surfaces).       */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --app:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  /* fluid scale, ratio near 1.25, matched to the house render engine */
  --t-display: clamp(2.15rem, 5.6vw, 4.35rem);
  --t-h2:      clamp(1.7rem, 4.4vw, 3.15rem);
  --t-h3:      clamp(1.3rem, 2.4vw, 1.75rem);
  --t-lead:    clamp(1.1rem, 1.9vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   .9375rem;
  --t-micro:   .8125rem;
  --t-eyebrow: .7rem;

  --lh-display: .99;
  --lh-head:    1.08;
  --lh-body:    1.62;

  --tr-display: -.033em;  /* display sizes want negative tracking */
  --tr-eyebrow:  .22em;

  /* ---- spacing: one scale, no arbitrary values ----------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --band:    clamp(72px, 11vh, 132px);
  --band-lg: clamp(104px, 16vh, 184px);

  /* ---- radius: a split personality, applied consistently -------------
   * Documents are square edged because documents are. Controls are pills
   * because they are things you press. Never one radius on everything.     */
  --r-doc:  2px;
  --r-card: 3px;
  --r-pill: 999px;

  /* ---- elevation: border OR shadow, never both on the same surface --- */
  --lift-1: 0 1px 2px rgba(22, 32, 46, .05), 0 4px 10px rgba(22, 32, 46, .04);
  --lift-2: 0 2px 4px rgba(22, 32, 46, .05), 0 12px 28px rgba(22, 32, 46, .07),
            0 28px 60px rgba(22, 32, 46, .05);
  --lift-dark: 0 18px 50px rgba(0, 0, 0, .45);

  /* ---- measure ------------------------------------------------------- */
  --wide:    1180px;
  --measure: 62ch;
  --gutter:  clamp(16px, 4vw, 40px);

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* the motion library reads these */
  --fx-accent: var(--accent);
  --fx-ink:    var(--ink);
  --fx-dur:    .62s;
}

/* Tint the hairlines toward the ink hue where the engine can do the maths. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --rule:        color-mix(in srgb, var(--ink) 13%, transparent);
    --rule-strong: color-mix(in srgb, var(--ink) 26%, transparent);
  }
}

/* The inverted bands. Applied by markup (.band-dark) and broadcast to the
 * fixed masthead by fx-theme-invert. The accent lifts here because cobalt on
 * near navy loses its edge; everything else re-points at the dark ramp. */
.band-dark,
.fx-invert {
  --paper:      var(--rev-a);
  --paper-2:    var(--rev-b);
  --paper-3:    #1d2939;
  --card:       #1b2534;
  --ink:        var(--ink-on-dark);
  --ink-soft:   #b9c4d4;
  --muted:      var(--muted-on-dark);
  --accent:     var(--accent-lift);
  --accent-wash: rgba(59, 130, 246, .14);
  --accent-ring: rgba(59, 130, 246, .36);
  --rule:       var(--rule-on-dark);
  --rule-strong: rgba(238, 242, 249, .26);
  --lift-1:     none;
  --lift-2:     var(--lift-dark);
}

/* Light on dark reads heavier and tighter than dark on light. Compensate,
 * or the same size looks too bold and too cramped when the theme inverts.
 * (Video Studio TYPOGRAPHY.md, dark background compensation.) */
.band-dark p,
.band-dark li,
.fx-invert p,
.fx-invert li {
  font-weight: 350;
  line-height: calc(var(--lh-body) + .06);
  letter-spacing: .01em;
}