/* ============================================================
   Pocket Production — Canonical Design Tokens
   ----------------------------------------------------
   Single source of truth for spacing, type, color, radii,
   shadows. Per-app studios should override ONLY --accent
   and --accent-* tokens.

   Wired from `6d-base.css` (line 1, @import). All studios
   that link 6d-base.css automatically inherit these tokens.

   Mirrors `_design-handoff/project/colors_and_type.css` from
   the Claude Design handoff. Pico-derived rhythm, dark-default,
   light-mode via `[data-theme="light"]`.

   See DESIGN_CANON.md / HANDOFF.md for rationale.

   SOURCE OF TRUTH — ui_kits/ pages in the design project are
   archive. Edit this file, not those. `6d-base.css` imports this.
   ============================================================ */

/* DM Sans (primary) + Figtree (legacy fallback) + Inter (numerics) +
   JetBrains Mono. Loaded from Google Fonts; CSP allows it. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Figtree:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Backgrounds (dark default) ─────────────────────── */
  --bg-page:         #1A1D24;
  --bg-surface:      #21252D;
  --bg-row:          #272B35;
  --bg-row-alt:      #2A2E38;     /* distinct from --bg-row so zebra stripe is visible */
  --bg-row-hover:    #2E3340;
  --bg-row-selected: #2A3344;
  --bg-header:       #0D0F14;
  --topbar:          #0D0F14;

  /* ── Text ───────────────────────────────────────────── */
  --text-primary:    #E0E2E6;
  --text-secondary:  #A0A4AE;     /* contrast 4.8:1 on bg-page */
  --text-tertiary:   #6E7278;
  --text-uppercase:  #A0A4AE;
  --text-inverse:    #0F0F0E;

  /* ── Borders ────────────────────────────────────────── */
  --border-color:    #353A45;
  --border-color-lt: #2C313B;     /* subtler internal border */
  --bw:              1px;
  --bw-em:           1.5px;       /* Pico's signature on inputs/ghost */

  /* ── Accent (default = sage; per-app studios override) ─ */
  --accent:          #7C9A82;
  --accent-hover:    #6B8A71;
  --accent-dim:      rgba(124, 154, 130, 0.15);
  --accent-glow:     rgba(124, 154, 130, 0.25);

  /* ── Semantic colors ────────────────────────────────── */
  --danger:     #C85A5A;
  --danger-bg:  rgba(200, 90, 90, 0.15);
  --warning:    #D4A24C;
  --warning-bg: rgba(212, 162, 76, 0.15);
  --success:    #66B89A;
  --success-bg: rgba(102, 184, 154, 0.15);
  --info:       #6B8FD4;
  --info-bg:    rgba(107, 143, 212, 0.15);

  /* ── Legacy color aliases (kept for back-compat) ──────
     Many studios + `6d-base.css .chip-pill--info` still
     reference these names. Do not delete; safe to migrate
     references gradually to canonical --info / --warning. */
  --blue:       #6B8FD4;          /* alias of --info */
  --blue-bg:    rgba(107, 143, 212, 0.15);
  --gold:       #D4A24C;          /* alias of --warning */
  --gold-bg:    rgba(212, 162, 76, 0.15);
  --bid-gold:   #D4A24C;
  --bid-gold-bg:rgba(212, 162, 76, 0.15);
  --sheet:      #4A9B8E;
  --sheet-bg:   rgba(74, 155, 142, 0.15);
  --coral:      #D88AAE;
  --coral-bg:   rgba(216, 138, 174, 0.15);

  /* ── Per-app accents (Hub card icons / topbar logos) ──
     Per-studio `--accent` keeps overriding inside that
     studio's own paint. These tokens centralize the Hub-
     card gradient pairs so dark/light don't drift. */
  --app-pipeline: #C85A5A;  --app-pipeline-2: #A84848;
  --app-bid:      #D4A24C;  --app-bid-2:      #B88A3A;
  --app-calendar: #5B8BD4;  --app-calendar-2: #4070B8;
  --app-sheet:    #4A9B8E;  --app-sheet-2:    #3A7D72;
  --app-rolodex:  #8B9A5A;  --app-rolodex-2:  #6E7D44;
  --app-invoice:  #8B7BC4;  --app-invoice-2:  #6E60A8;
  --app-deal:     #D4A24C;  --app-deal-2:     #A87A24;
  --app-portal:   #D88AAE;  --app-portal-2:   #C06A8A;
  --app-pico:     #C99A2E;  --app-pico-2:     #8B6914;
  --app-hub:      #7C9A82;  --app-hub-2:      #5A7D62;
  --app-feedback: #D4726A;  --app-feedback-2: #A8514A;
  --app-binder:   #4A7C59;  --app-binder-2:   #2E5538;
  --app-admin:    #A8526B;  --app-admin-2:    #7E3D52;
  --app-backup:   #7A8898;  --app-backup-2:   #5E6C7C;

  /* ── Type scale (Pico-derived rhythm) ────────────────── */
  --fs-tiny: 10px;     /* labels, table th, badges */
  --fs-xs:   11.5px;   /* nav tabs, tiny buttons, meta */
  --fs-sm:   12px;     /* secondary body */
  --fs-base: 13px;     /* primary body, inputs */
  --fs-md:   14px;     /* card titles, button labels */
  --fs-lg:   16px;     /* modal titles */
  --fs-xl:   24px;     /* KPI values */
  --fs-2xl:  32px;     /* hero numbers */
  --fs-3xl:  44px;     /* big landing numbers */

  /* ── Font families ──────────────────────────────────── */
  --font-family: 'DM Sans', 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-data:   'Inter', system-ui, sans-serif;   /* tabular numerics */

  /* ── Font weights ───────────────────────────────────── */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ── Line height ───────────────────────────────────── */
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* ── Spacing scale (Pico-derived) ────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  10px;
  --space-4:  14px;
  --space-5:  18px;
  --space-6:  20px;
  --space-7:  28px;
  --space-8:  40px;
  /* legacy aliases — kept for back-compat with existing app CSS */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ── Radii ──────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-md: 10px;
  --r-lg: 14px;
  --radius-sm: 6px;      /* legacy alias */
  --radius-md: 10px;     /* legacy alias */
  --radius-lg: 14px;     /* legacy alias */

  /* ── Shadow ramp (Pico-tier — quieter than legacy) ──── */
  --shadow-sm: 0 1px 3px  rgba(0, 0, 0, 0.18);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.36);

  /* ── Topbar / Nav ───────────────────────────────────── */
  --topbar-height:  56px;
  --nav-rail-w:     48px;
  --nav-expanded-w: 180px;

  /* ── Transitions ────────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition:        180ms ease;
  --transition-smooth: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow:   320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Light mode overrides ─────────────────────────────── */
:root[data-theme="light"],
[data-theme="light"] {
  --bg-page:         #F5F5F0;     /* warm-paper, intentional non-white */
  --bg-surface:      #FFFFFF;
  --bg-row:          #F0F0EB;
  --bg-row-alt:      #FBFAF8;     /* whiter than --bg-row for visible zebra */
  --bg-row-hover:    #E8E8E3;
  --bg-row-selected: #E0E5DD;
  --bg-header:       #FFFFFF;
  --topbar:          #FFFFFF;

  --text-primary:    #1A1D24;
  --text-secondary:  #5A5E6A;
  --text-tertiary:   #8B8E96;
  --text-uppercase:  #5A5E6A;
  --text-inverse:    #FFFFFF;

  --border-color:    #D8D8D3;
  --border-color-lt: #E8E6E1;

  --accent:          #5A7F62;
  --accent-hover:    #466B4F;
  --accent-dim:      rgba(90, 127, 98, 0.10);
  --accent-glow:     rgba(90, 127, 98, 0.18);

  /* Legacy color aliases — light-mode variants */
  --blue:        #4A6EA0;        --blue-bg:    rgba(74, 110, 160, 0.10);
  --gold:        #B88A3A;        --gold-bg:    rgba(184, 138, 58, 0.10);
  --bid-gold:    #B88A3A;        --bid-gold-bg:rgba(184, 138, 58, 0.10);
  --sheet:       #3A8B7E;        --sheet-bg:   rgba(58, 139, 126, 0.10);
  --coral:       #C06A8A;        --coral-bg:   rgba(192, 106, 138, 0.10);

  --shadow-sm: 0 1px 3px  rgba(15, 15, 14, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 15, 14, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 15, 14, 0.12);
}

/* ── Semantic typography ─────────────────────────────── */
body {
  font-family: var(--font-family);
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  background:  var(--bg-page);
  color:       var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl);  font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-lg);  font-weight: var(--fw-bold);     line-height: var(--lh-tight); }
h4 { font-size: var(--fs-md);  font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h5 { font-size: var(--fs-base);font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-sm);  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
p  { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary); }
small { font-size: var(--fs-sm); color: var(--text-secondary); }

/* Section / table label — uppercase muted (Pico convention) */
.label, .sec-label, .form-label {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* Tabular numerics: any $/% surface — Inter via --font-data */
.numeric, .data-text, .stat-number, .kpi-val, .budget-cell, td.r {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-data);
}

/* Mono */
code, .mono, .code-text {
  font-family: var(--font-mono);
  font-size: 0.92em;
}