/* ==========================================================================
   tokens.css v3.1 · 2026-05-17 · DEX + UNITY
   Canonical design tokens for Covenant OS · 3C Contracting
   Aligns with DESIGN-SYSTEM.md and /design-system/project/colors_and_type.css

   v3.1 CHANGE: Hybrid font system.
   Apple system (SF Pro) is the primary UI workhorse.
   Bebas Neue (--display) and DM Mono (--mono) retained as identity marks.
   Barlow Condensed (--cond) reintroduced for pills/status/condensed labels.
   Playfair Display (--serif) reintroduced for WISDOM editorial accent only.
   Rajdhani and full Barlow are GONE.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
  --display: 'Bebas Neue', sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;
  --ui:      -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --cond:    'Barlow Condensed', sans-serif;
  --serif:   'Playfair Display', serif;
  --body:    var(--ui);
  --heading: var(--ui);
  --hero:    var(--ui);
  --font-family-sans:  var(--ui);
  --font-family-mono:  var(--mono);
  --font-family-serif: var(--ui);
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  --font-weight-regular:  var(--fw-regular);
  --font-weight-medium:   var(--fw-medium);
  --font-weight-semibold: var(--fw-semibold);
  --font-weight-bold:     var(--fw-bold);

  /* Font sizes */
  --font-size-display: 34px;
  --font-size-title:   22px;
  --font-size-body:    16px;            /* was 15px */
  --font-size-label:   13px;            /* NEW — between body and eyebrow */
  --font-size-meta:    11px;            /* NEW — dense metadata token */
  --font-size-eyebrow: 12px;

  /* Line heights */
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  --line-height-tight:   var(--lh-tight);
  --line-height-normal:  var(--lh-normal);
  --line-height-relaxed: var(--lh-relaxed);

  /* ── SHAPE ───────────────────────────────────────────────────────────────
     Rounded, native, Apple-like. Applied globally below.
     ─────────────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --radius-none: 0;

  /* tier2 alias */
  --t2-radius:    var(--radius-md);
  --t2-radius-sm: var(--radius-sm);

  /* ── SHADOWS ─────────────────────────────────────────────────────────────
     Real depth. Not decorative. Light theme defaults.
     ─────────────────────────────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.05);
  --shadow-md:   0 2px 8px rgba(0,0,0,.09), 0 6px 20px rgba(0,0,0,.07);
  --shadow-lg:   0 4px 16px rgba(0,0,0,.11), 0 12px 32px rgba(0,0,0,.09);
  --shadow-xl:   0 8px 24px rgba(0,0,0,.13), 0 20px 48px rgba(0,0,0,.10);

  /* Dark surface shadows */
  --shadow-dark-sm: 0 1px 3px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.20);
  --shadow-dark-md: 0 2px 8px rgba(0,0,0,.30), 0 6px 20px rgba(0,0,0,.24);
  --shadow-dark-lg: 0 4px 16px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.28);

  /* ── SPACING ─────────────────────────────────────────────────────────────*/
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* tier2 gap aliases */
  --gap:    12px;
  --gap-lg: 16px;
  --gap-xl: 24px;

  /* space aliases */
  --space-0:  var(--sp-0);
  --space-1:  var(--sp-1);
  --space-2:  var(--sp-2);
  --space-3:  var(--sp-3);
  --space-4:  var(--sp-4);
  --space-5:  var(--sp-5);
  --space-6:  var(--sp-6);
  --space-8:  var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);
  --space-16: var(--sp-16);

  /* ── TRANSITIONS ─────────────────────────────────────────────────────────*/
  --transition:      150ms ease-out;
  --transition-fast: 100ms ease-out;
  --transition-slow: 300ms ease-out;

  /* tier2 alias */
  --t2-transition: var(--transition);
  --t2-gap:    var(--gap);
  --t2-gap-lg: var(--gap-lg);
  --t2-gap-xl: var(--gap-xl);
  --t2-border: 1px solid;
  --t2-border-color: rgba(0,0,0,0.08);

  /* ── SHARED BRAND COLORS ─────────────────────────────────────────────────*/
  --steel:       #0D90BC;
  --steel-light: #85C6F5;
  --steel-dim:   rgba(13,144,188,0.12);
  --steel-glow:  rgba(13,144,188,0.40);

  --gold:     #C8973A;
  --gold2:    #E8B96A;
  --gold-dim: rgba(200,151,58,0.12);

  --success:     #2A8C5A;
  --success-dim: rgba(42,140,90,0.10);
  --warning:     #C8973A;
  --warning-dim: rgba(200,151,58,0.10);
  --danger:      #C0222A;
  --danger-dim:  rgba(192,34,42,0.08);

  --green2: #3DB87A;
  --red2:   #E85454;

  /* ── VIRTUE ACCENTS ──────────────────────────────────────────────────────*/
  --virtue-drive:     #7C3AED;
  --virtue-wisdom:    #C8973A;
  --virtue-grit:      #F97316;
  --virtue-heart:     #DC2626;
  --virtue-balance:   #10B981;
  --virtue-guidance:  #1E40AF;
  --virtue-stability: #EAB308;
  --virtue-unity:     #0B6FB8;

  /* ── LIGHT SURFACE DEFAULTS ──────────────────────────────────────────────*/
  --bg:       #F4F2EE;
  --surface:  #FFFFFF;
  --surface2: #F8F7F4;
  --surface3: #F0EDE8;

  --border:       rgba(0,0,0,0.08);
  --border2:      rgba(0,0,0,0.04);
  --border-color: rgba(0,0,0,0.08);

  --ink:   #1A1A1A;
  --ink2:  #3F3F3F;          /* secondary text — slightly darker */
  --muted: #6B7280;          /* tertiary / metadata — 4.83:1 on white (was 3.5:1) */
  --muted-strong: #4A5260;   /* NEW token — for metadata needing more lift */

  /* ── TIER2/TIER3 COLOR ALIASES ───────────────────────────────────────────*/
  --color-brand-primary:       var(--danger);
  --color-brand-secondary:     var(--gold);
  --color-neutral-ink:         var(--ink);
  --color-neutral-muted:       var(--muted);
  --color-neutral-border:      var(--border);
  --color-neutral-surface-alt: var(--surface2);
  --color-state-live:          var(--success);
  --color-state-ready:         var(--steel);
  --color-state-internal:      var(--muted);
  --color-state-active:        var(--danger);
}


/* ── GLOBAL RESET ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: var(--ui);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--ink);
}


/* ── APPLE TYPE SYSTEM — GLOBAL APPLICATION ──────────────────────────────── */
/* These rules cascade across every page automatically.
   Per-page colors/layouts untouched. Only font + shape + weight. */

/* Body text */
body, input, select, textarea, button {
  font-family: var(--ui);
}

/* Labels — always bold enough to read */
label,
[class*="-label"],
[class*="-tag"]:not([class*="pc-tag"]):not([class*="mat-tag"]),
[class*="-eyebrow"],
[class*="-sub"]:not([class*="hero-sub"]):not([class*="drive-hero-sub"]),
.section-label, .col-label, .score-label, .stat-l,
.ov-label, .indi-label, .field-label,
.unity-hdr-label, .grit-head-sub,
.rate-label, .conf-label, .mat-label,
.vp-section-h, .crew-project,
.liam-eyebrow-mini, .header-tag,
.brand-tag, .liam-hero-eyebrow,
.tp-title, .tp-sub {
  font-family: var(--ui) !important;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Stat/score values — heavy, tight tracking */
.score-value, .ov-count, .indi-count,
.stat-n, .h-stat-val, .vp-stat,
.verdict-price, .stat-val, .stat .value,
.dh-stat-val, .ms-row-pct, .wiggle-verdict .verdict-price {
  font-family: var(--ui) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* Inputs — rounded, weighted, focus ring */
input:not([type=range]):not([type=checkbox]):not([type=radio]),
select,
textarea {
  font-family: var(--ui) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input:not([type=range]):not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(13,144,188,.15) !important;
}

/* Buttons — rounded, confident weight */
button,
[class*="-btn"]:not([class*="slider"]):not([class*="ms-slider"]),
[class*="btn-"],
.add-btn, .btn-train, .ms-add-btn,
.slide-submit, .slide-cancel,
.execute-btn, .export-btn, .mat-btn, .tb-btn,
.unity-hdr-btn, .unity-hdr-link,
.sched-tab, .cn-tab, .output-tab, .fmt-btn, .scope-btn,
.grit-toggle button, .t2-btn, .t2-tab {
  font-family: var(--ui) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: .01em !important;
}

/* Pill / badge — fully rounded */
.crew-status, .col-count, .mat-chip, .mat-row-status,
.lib-badge, .tp-pill, .t2-badge,
[class*="-pill"], [class*="-chip"], [class*="-badge"],
[class*="-status"]:not([class*="api-status"]):not([class*="status-pill"]) {
  border-radius: var(--radius-full) !important;
  font-family: var(--ui) !important;
  font-weight: 600 !important;
}

/* Cards — rounded + shadow */
.score-tile, .ov-tile, .indi, .stat,
.hot-wrap, .ms-card, .cn-card, .sched-card,
.grit-wrap, .col, .modal, .bid-strip-card,
.panel, .console-group, .t2-panel, .t2-modal,
.crew-card, .mat-table-wrap, .wiggle-verdict,
[class*="-card"]:not(.cn-tile):not(.task):not(.project-card):not(.doc-card) {
  border-radius: var(--radius) !important;
  overflow: hidden;
}

/* Task cards — tighter radius, stays crisp */
.task, .project-card, .doc-card,
.lib-item, .jt-btn {
  border-radius: var(--radius-sm) !important;
}

/* Kanban columns — rounded top only (header is flush) */
.col { border-radius: var(--radius) !important; }
.col-hdr { border-radius: 0 !important; }

/* Modals */
.modal, .rt-modal, .t2-modal, .overlay > div {
  border-radius: var(--radius-lg) !important;
}
/* Slide panel — no left radius (comes from edge) */
.slide-panel { border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important; }

/* Hot items text */
.hot-title  { font-family: var(--ui) !important; font-weight: 600 !important; }
.hot-note   { font-family: var(--ui) !important; font-weight: 400 !important; }

/* Crew card names */
.crew-name    { font-family: var(--ui) !important; font-weight: 700 !important; }
.crew-summary { font-family: var(--ui) !important; }

/* Nav tile labels */
.cn-tile .cn-label { font-family: var(--ui) !important; font-weight: 700 !important; letter-spacing: .03em !important; }

/* Section headings inside panels */
.col-name, .grit-head-title, .crew-panel-title,
.rt-modal-title, .slide-title, .mat-title,
.panel h2, .t2-panel-title, .t2-head-title {
  font-family: var(--ui) !important;
  font-weight: 700 !important;
}

/* Slide panel form labels */
.slide-field label, .tp-field label {
  font-family: var(--ui) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}
.slide-field input,
.slide-field select,
.slide-field textarea,
.tp-field input,
.tp-field select,
.tp-field textarea {
  font-family: var(--ui) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border-radius: var(--radius-sm) !important;
}

/* Task panel */
.tp-root {
  border-radius: var(--radius) !important;
  font-family: var(--ui) !important;
}
.tp-row-title { font-family: var(--ui) !important; font-weight: 600 !important; }
.tp-row-prob  { font-family: var(--ui) !important; }
.tp-send-btn, .tp-submit, .tp-cancel, .tp-prompt-send, .tp-done {
  font-family: var(--ui) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
}

/* Tier2 components */
.t2-btn       { border-radius: var(--radius-sm) !important; }
.t2-tab       { font-family: var(--ui) !important; }
.t2-modal     { border-radius: var(--radius-lg) !important; }
.t2-detail-card { border-radius: var(--radius-sm) !important; }
.t2-photo-card  { border-radius: var(--radius-sm) !important; }
.t2-ms-tile     { border-radius: var(--radius) !important; }
.t2-panel       { border-radius: var(--radius) !important; }
.t2-detail-card-label { font-family: var(--ui) !important; font-weight: 700 !important; }
.t2-detail-card-value { font-family: var(--ui) !important; font-weight: 500 !important; }
.t2-head-title, .t2-panel-title { font-family: var(--ui) !important; font-weight: 700 !important; }
.t2-note-text { font-family: var(--ui) !important; }
.t2-note-type { font-family: var(--ui) !important; font-weight: 700 !important; }
.t2-msg-bubble p { font-family: var(--ui) !important; }

/* Drive hero — heavy display weight */
.drive-hero-title { font-family: var(--ui) !important; font-weight: 800 !important; letter-spacing: -.01em !important; }
.drive-hero-sub   { font-family: var(--ui) !important; }

/* Toasts */
.toast, .t2-toast, .tp-toast {
  font-family: var(--ui) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
}

/* Focus ring — system-wide */
:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* mono stays mono */
.tp-pill, .task-phase, .task-age, .task-proj,
.ms-pill, .score-sub, .ov-sub, .stat-l,
.unity-hdr-btn, .unity-hdr-link,
.tp-send-btn, .t2-badge,
[class*="header-time"], [class*="header-clock"],
[class*="-mono"] {
  font-family: var(--mono) !important;
}
/* But still rounded + weighted */
.unity-hdr-btn, .unity-hdr-link {
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
}


/* ── UTILITY PRIMITIVES ───────────────────────────────────────────────────── */
.mono    { font-family: var(--mono); letter-spacing: .02em; }
.tabular { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Forward-compat token aliases · added 2026-05-23 ──────────────────────────
   The new design-system kit (design-system/colors_and_type.css) renames 7 tokens
   (mostly hyphen-insertion; green→success). These aliases define the NEW names as
   pointers to the existing LIVE values, so pages built against the new kit render
   correctly on the current tokens. Value-neutral. Remove during full kit cutover
   once assets/tokens.css adopts the new names natively.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --surface-2: var(--surface2);   /* #F8F7F4 */
  --ink-2:     var(--ink2);       /* #3F3F3F */
  --border-2:  var(--border2);    /* rgba(0,0,0,0.04) */
  --gold-2:    var(--gold2);      /* #E8B96A */
  --surface-3: var(--surface3);   /* #F0EDE8 */
  --red-2:     var(--red2);       /* #E85454 */
  --success-2: var(--green2);     /* #3DB87A */
}