/* ============================================================
   Threefold Optima — Product UI · Design Tokens (tokens only)
   Custom-property declarations only. No @font-face, no base
   reset, no helper classes. Pair with self-hosted fonts +
   components.css in the full system.
   ============================================================ */

:root {
  /* ─── Colour ─── */
  --tf-yellow: #DAFF00;
  --tf-yellow-deep: #C8EC00;
  /* Tariff structure semantic pair (locked Phase B, decisions log v5) */
  --tf-fixed:    var(--tf-yellow);   /* alias of brand neon yellow */
  --tf-dynamic:  #5bc0de;            /* mid-tone turquoise; needs DARK text */
  --tf-dynamic-deep: #4aa9c4;
  --tf-offblack: #2E2E2E;
  --tf-ink: #1A1A1A;
  --tf-offwhite: #F4F4F2;
  --tf-paper: #FAFAF8;
  --tf-white: #FFFFFF;               /* pure white; card surface that lifts off the bone page, and white mix endpoint */
  --tf-khaki: #D4D7C4;
  --tf-grey-01: #E4E4E0;
  --tf-grey-02: #6A6D66;
  --tf-grey-03: #9A9D96;
  --tf-blue-01: #96ADDD;
  --tf-blue-02: #6682BA;
  --tf-blue-03: #314D83;
  --tf-slate: #314D63;                 /* muted slate-blue, a deliberate text role; distinct from the --tf-blue-03 primitive (#314D83) */
  --tf-border: rgba(46, 46, 46, 0.14);
  --tf-border-strong: rgba(46, 46, 46, 0.22);
  --tf-muted: var(--tf-grey-02);

  /* Status palette — five v1 qualification states (Live removed; post-proposal lifecycle) */
  /* Brand-anchored: Blue family for Tier 1 → Tier 2, terracotta for Failed, neutral for Not yet */
  --status-not-yet-bg: #ECECE8;
  --status-not-yet-fg: #5F615E;
  --status-tier1-bg: #E5EBF7;          /* Blue 01 tinted toward off-white */
  --status-tier1-fg: var(--tf-slate);
  --status-tier2-booked-bg: #C6D1E8;   /* Blue 02 mixed with off-white, reduced resolution of Confirmed */
  --status-tier2-booked-fg: var(--tf-slate);
  --status-tier2-confirmed-bg: var(--tf-blue-02);   /* Blue 02 — full resolution */
  --status-tier2-confirmed-fg: var(--tf-offwhite);  /* Off White */
  --status-tier2-failed-bg: #E8C6BA;   /* Soft terracotta in brand neighbourhood */
  --status-tier2-failed-fg: #7A2E1A;

  /* Contract readiness — 3 simplified states */
  --readiness-ready-bg: var(--tf-yellow);
  --readiness-ready-fg: var(--tf-offblack);
  --readiness-awaiting-bg: #FFF4D6;
  --readiness-awaiting-fg: #8A5A00;
  --readiness-excluded-bg: #ECECE8;
  --readiness-excluded-fg: var(--tf-grey-02);

  /* ============================================================
     OPERATIONAL STATUS — separate set from the five qualification
     states above. Seven states, used for delivery/work lifecycle.
     Never mix with the qualification taxonomy.
     ============================================================ */
  /* Reusable bases — mirror the live app so it needs no change */
  --tf-status-green-bg: var(--tf-yellow);  --tf-status-green-fg: var(--tf-offblack);
  --tf-status-amber-bg: #FFF4D6;  --tf-status-amber-fg: #8A5A00;
  --tf-status-red-bg:   #FDE8E8;  --tf-status-red-fg:   #C62828;
  --tf-status-grey-bg:  #ECECEA;  --tf-status-grey-fg:  #5F615E;
  /* Seven operational states */
  --op-complete-bg:     var(--tf-status-green-bg);  --op-complete-fg:     var(--tf-status-green-fg);
  --op-in-progress-bg:  var(--tf-status-amber-bg);  --op-in-progress-fg:  var(--tf-status-amber-fg);
  --op-issues-bg:       var(--tf-status-red-bg);    --op-issues-fg:       var(--tf-status-red-fg);
  /* not-started and awaiting share grey by design; differentiate via label/icon in Scope B, not colour */
  --op-not-started-bg:  var(--tf-status-grey-bg);   --op-not-started-fg:  var(--tf-status-grey-fg);
  --op-awaiting-bg:     var(--tf-status-grey-bg);   --op-awaiting-fg:     var(--tf-status-grey-fg);
  --op-scheduled-bg:    #DCE6F5;                    --op-scheduled-fg:    #3A527A;
  --op-not-required-bg: #F0F0EE;                    --op-not-required-fg: #888A85;

  /* ─── Typography ─── */
  --font-display: "PP Telegraf", "Times New Roman", serif;
  --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-3xs: 9px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 15px;
  --text-base: 14px;
  --text-lg: 18px;
  --text-xl: 17px;          /* intentionally < lg; mirrors live styles-live.css. Naming inversion flagged to Matt */
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;
  --text-display-sm: 40px;
  --text-display-md: 56px;
  --text-display-lg: 80px;

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body: 0em;
  --tracking-eyebrow: 0.12em;
  --tracking-mono: -0.02em;

  /* ─── Space scale ─── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;

  /* ─── Radii ─── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ─── Shadow / depth ─── */
  --shadow-card: 0 1px 0 rgba(46, 46, 46, 0.04), 0 8px 24px -16px rgba(46, 46, 46, 0.18);
  --shadow-card-hover: 0 1px 0 rgba(46, 46, 46, 0.05), 0 16px 40px -20px rgba(46, 46, 46, 0.28);
  --shadow-pop: 0 24px 60px -24px rgba(46, 46, 46, 0.35);

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-quick: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

[data-surface="dark"] {
  --surface-bg: var(--tf-ink);
  --surface-fg: var(--tf-offwhite);
  --surface-fg-muted: rgba(244, 244, 242, 0.6);
  --surface-border: rgba(244, 244, 242, 0.12);
  --surface-border-strong: rgba(244, 244, 242, 0.24);
  --surface-card: rgba(244, 244, 242, 0.04);
}

[data-surface="paper"] {
  --surface-bg: var(--tf-paper);
  --surface-fg: var(--tf-offblack);
  --surface-fg-muted: var(--tf-muted);
  --surface-border: var(--tf-border);
  --surface-border-strong: var(--tf-border-strong);
  --surface-card: var(--tf-white);
}

[data-surface="bone"] {
  --surface-bg: var(--tf-offwhite);
  --surface-fg: var(--tf-offblack);
  --surface-fg-muted: var(--tf-muted);
  --surface-border: var(--tf-border);
  --surface-border-strong: var(--tf-border-strong);
  --surface-card: var(--tf-white);
}