/**
 * AdepaTrade Hub — Design System Tokens (BH-UXF-02 visual direction refine)
 * Owner visual concept (ChatGPT direction) — charcoal-led, no blue UI accents.
 *
 * Brand assets (store authoritative → static/hub/brand/):
 *   adepatrade-logo-white-mono.png  → dark charcoal headers (default Hub)
 *   adepatrade-logo-black-mono.png  → light UI / docs / sheets
 *   adepatrade-logo.png             → marketing / non-Hub only — NEVER on Hub charcoal
 *
 * Preserve originals — no recolour / redraw / stretch / distort.
 */
:root {
  color-scheme: light;

  /* Logo identity only (not UI accents) */
  --brand-red: #ec1c24;
  --brand-blue: #243c90;

  /* Charcoal scale — Owner direction hexes */
  --ink-950: #0f0f0f;
  --ink-900: #1a1a1a; /* primary / chrome */
  --ink-800: #242424;
  --ink-700: #2e2e2e; /* panels / emphasis */
  --ink-600: #4a4a4a;
  --ink-500: #666666; /* secondary text */
  --ink-400: #8a8a8a;
  --ink-300: #b0b0b0;
  --ink-200: #e5e5e5; /* borders / dividers */
  --ink-100: #eeeeee;
  --ink-50: #f8f8f8;  /* page background */
  --ink-0: #ffffff;

  /* Interface (charcoal-led) */
  --action: var(--ink-900);
  --action-hover: var(--ink-700);
  --action-ink: #f5f5f5;
  --action-quiet: var(--ink-700);

  --surface-page: var(--ink-50);
  --surface-raised: var(--ink-0);
  --surface-sunken: #f0f0f0;
  --surface-chrome: var(--ink-900);
  --surface-chrome-ink: #f5f5f5;
  --surface-selected: #eef3f2; /* soft sage wash — nav/selection, not brand blue */
  --surface-preview: var(--ink-0);

  --border-subtle: var(--ink-200);
  --border-strong: #d0d0d0;
  --border-focus: var(--ink-700);
  --border-danger: #a31218;
  --border-nav-active: var(--ink-900);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-inverse: var(--surface-chrome-ink);
  --text-link: var(--ink-800);
  --text-danger: #a31218;

  /* Soft feedback green (direction banner / positive status) — not logo colour */
  --feedback-ok-bg: #e7f0ec;
  --feedback-ok-fg: #1f4a2c;
  --feedback-ok-bd: #c5d9ce;

  /* Status chips */
  --status-draft-bg: #f5f0e6;
  --status-draft-fg: #6a5420;
  --status-draft-bd: #d9c89a;
  --status-preview-bg: #ececec;
  --status-preview-fg: #2e2e2e;
  --status-preview-bd: #d0d0d0;
  --status-issued-bg: var(--feedback-ok-bg);
  --status-issued-fg: var(--feedback-ok-fg);
  --status-issued-bd: var(--feedback-ok-bd);
  --status-review-bg: #fceced;
  --status-review-fg: #a31218;
  --status-review-bd: #e8a4a7;

  /* Type — Owner direction: Segoe UI / Helvetica Neue */
  --font-sans: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 — labels / meta */
  --fs-md: 0.875rem;    /* 14 */
  --fs-base: 0.9375rem; /* 15 — body */
  --fs-lg: 1.0625rem;   /* 17 */
  --fs-xl: 1.375rem;    /* 22 — page title */
  --fs-2xl: 1.625rem;   /* 26 */
  --lh-tight: 1.25;
  --lh-base: 1.45;
  --lh-loose: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-label: 0.04em;

  /* Spacing — slightly more air per direction */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-page: 1.25rem;
  --gap-panel: var(--space-4);
  --gap-stack: var(--space-3);

  /* Radii — soft cards ~6–8px */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-none: 0;

  /* Forms */
  --control-h: 2.25rem;
  --control-h-sm: 1.9rem;
  --control-px: 0.65rem;
  --control-py: 0.4rem;
  --control-border: var(--border-subtle);
  --control-bg: var(--ink-0);
  --control-radius: var(--radius-sm);

  /* Tables */
  --table-cell-py: 0.5rem;
  --table-cell-px: 0.65rem;
  --table-head-fs: var(--fs-xs);
  --table-row-h: 2.5rem;
  --table-selected-outline: 2px solid var(--ink-800);

  --bp-mobile: 390px;
  --bp-nav: 800px;
  --bp-workspace: 960px;

  --focus-ring: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--ink-700);
  --focus-ring-inverse: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--ink-200);

  /* Logos */
  --logo-colour: url("../brand/adepatrade-logo.png");
  --logo-black-mono: url("../brand/adepatrade-logo-black-mono.png");
  --logo-white-mono: url("../brand/adepatrade-logo-white-mono.png");
  --logo-path: var(--logo-white-mono);
  --logo-aspect: 1000 / 284;
  --logo-header-h: 1.65rem;
}