/*
 * BDI design system — Executive Vault.
 *
 * One place for colour, type, spacing, radius, shadow and motion. Every other
 * stylesheet reads from here, so the system propagates rather than being
 * reapplied page by page.
 *
 * The palette is deliberately narrow. Navy carries identity and structure,
 * slate carries everything secondary, silver is jewellery used sparingly for
 * emphasis, and ghost white is the canvas. Colour has to mean something: a
 * status colour appears when a status matters, not to decorate a table.
 *
 * Loaded before every other stylesheet.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Executive Vault ---- */
  --vault-navy:   #0B132B;
  --vault-slate:  #4A5568;
  --vault-silver: #CBD5E1;
  --vault-ghost:  #F8FAFC;

  --navy-800: #131C38;
  --navy-700: #1C2745;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --silver-200: #E2E8F0;
  --silver-100: #EEF2F7;

  /* ---- Surfaces ---- */
  --bg-app:       var(--vault-ghost);
  --bg-surface:   #FFFFFF;
  --bg-raised:    #FFFFFF;
  --bg-sunken:    var(--silver-100);
  --bg-sidebar:   var(--vault-navy);
  --bg-hover:     rgba(11, 19, 43, 0.035);
  --bg-selected:  rgba(11, 19, 43, 0.06);

  /* ---- Text ---- */
  --text-primary:   var(--vault-navy);
  --text-secondary: var(--vault-slate);
  --text-muted:     var(--slate-400);
  --text-inverse:   #FFFFFF;

  /* ---- Borders ---- */
  --border-default: rgba(74, 85, 104, 0.18);
  --border-strong:  rgba(74, 85, 104, 0.32);
  --border-subtle:  rgba(74, 85, 104, 0.10);
  --border-focus:   var(--vault-navy);

  /* ---- Actions ---- */
  --cta-primary-bg:     var(--vault-navy);
  --cta-primary-text:   #FFFFFF;
  --cta-primary-hover:  var(--navy-700);
  --cta-secondary-bg:   #FFFFFF;
  --cta-secondary-text: var(--vault-navy);
  --cta-ghost-text:     var(--vault-slate);
  --cta-destructive:    #6B4E4E;

  /* ---- Status. Muted on purpose: saturation is reserved for urgency. ---- */
  --status-active-bg:    rgba(51, 78, 74, 0.10);
  --status-active-text:  #2C4642;
  --status-pending-bg:   rgba(74, 85, 104, 0.10);
  --status-pending-text: var(--vault-slate);
  --status-draft-bg:     rgba(148, 163, 184, 0.16);
  --status-draft-text:   var(--slate-500);
  --status-risk-bg:      rgba(107, 78, 78, 0.12);
  --status-risk-text:    #5C4242;
  --status-urgent-bg:    rgba(146, 64, 34, 0.12);
  --status-urgent-text:  #8A3D22;

  /* ---- Charts ---- */
  --chart-positive: #334E4A;
  --chart-negative: #6B4E4E;
  --chart-neutral:  #475569;

  /* ---- Type ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-app:    0.80rem;
  --text-page:   1.35rem;
  --text-section:1.02rem;
  --text-card:   0.92rem;
  --text-body:   0.88rem;
  --text-table:  0.84rem;
  --text-label:  0.78rem;
  --text-meta:   0.74rem;
  --text-kpi:    1.65rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --leading-tight: 1.25;
  --leading-body:  1.5;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Shadow. Restrained: depth comes from borders, not drop shadows. ---- */
  --shadow-sm: 0 1px 2px rgba(11, 19, 43, 0.05);
  --shadow:    0 1px 3px rgba(11, 19, 43, 0.07), 0 1px 2px rgba(11, 19, 43, 0.04);
  --shadow-lg: 0 8px 24px rgba(11, 19, 43, 0.10);

  /* ---- Silver as a material, not a fill ---- */
  --silver-edge: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(203,213,225,0.55));
  --silver-rule: linear-gradient(90deg, transparent, var(--vault-silver), transparent);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 150ms;

  --icon-sm: 14px;
  --icon:    16px;
  --icon-lg: 20px;
}

/*
 * The business accent is contextual identity, not decoration. It marks which
 * business you are in and nothing else, so it appears on indicators and
 * selection states rather than on surfaces and buttons.
 */
:root {
  --corevex-accent: var(--vault-navy);
  --corevex-accent-soft: rgba(11, 19, 43, 0.08);
  --corevex-accent-ink: var(--vault-navy);
}

/* Bridge: existing stylesheets read these names. */
:root {
  --corevex-navy: var(--vault-navy);
  --corevex-bg: var(--bg-app);
  --corevex-card: var(--bg-surface);
  --corevex-text: var(--text-primary);
  --corevex-muted: var(--text-secondary);
  --corevex-border: var(--border-default);
  --corevex-surface: var(--bg-surface);
  --corevex-surface-muted: var(--bg-sunken);
  --corevex-surface-hover: var(--bg-hover);
  --corevex-shadow: var(--shadow);
}