/*
 * BKA Web UI — DESIGN TOKENS (W-UI0)
 *
 * APPROVED BKA Web visual identity (Owner Decision — BKA-DOC-074,
 * Architecture & Business Decision Addendum v1.2; module brief BKA-DOC-073):
 *
 *   PRIMARY / DOMINANT : Navy  (the approved Web brand color)
 *   SECONDARY ACCENT   : Gold  (the approved accent, unchanged from the
 *                               Blueprint secondary accent)
 *
 * The previous Blueprint Web primary (Merah Tua) is SUPERSEDED for the BKA
 * Web visual identity only, and the former provisional blue is no longer
 * branding. Neither may reappear as a Web brand value.
 *
 * Rebranding means editing THIS FILE ONLY — components must never
 * hard-code design values. Hover/tint values below are tonal variants of
 * the approved primary (implementation-level tokens), not new brand colors.
 * Semantic status colors (info / success / danger) are functional tokens
 * and are deliberately left independent of the brand palette.
 *
 * BREAKPOINTS — documented reasons (mobile-first tiers):
 *   <640px    base: mobile phone — single column, hamburger navigation
 *   640px     large phone / small tablet — first multi-column tier
 *   768px     tablet portrait (standard device width) — hamburger becomes
 *             inline horizontal navigation
 *   1024px    tablet landscape / smallest laptop — wider container, full grid
 *   1280px   desktop / large desktop — content capped for readability
 *
 * NOTE: CSS custom properties cannot be used inside media queries, so
 * layout.css repeats these values as literals; keep both in sync.
 */

:root {
  /* ---- Layout ---- */
  --container-max: 1200px;
  --pad-inline: 1rem; /* mobile; increased at the 640px / 1024px tiers */
  --tap-min: 44px; /* minimum touch target (buttons, links, nav) */

  /* ---- Brand color (APPROVED — BKA-DOC-074 Web visual identity) ---- */
  --color-primary: #0b1f3a; /* Navy — primary / dominant */
  --color-primary-hover: #0f2b51; /* tonal variant of the primary (hover) */
  --color-primary-contrast: #ffffff;
  --color-primary-bg: #e7e9eb; /* tint of the primary (active state) */

  --color-accent: #c9a227; /* Gold — secondary accent */

  /* ---- Neutral (non-brand surface / text tones) ---- */
  --color-secondary: #334155;
  --color-secondary-contrast: #ffffff;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-border: #cbd5e1;
  /* Focus ring uses the approved primary (navy) so it stays ≥3:1 on light
     surfaces; the gold accent is deliberately not used for focus because it
     does not reach 3:1 against light backgrounds. */
  --color-focus: #0b1f3a;

  --color-info: #0369a1;
  --color-info-bg: #f0f9ff;
  --color-info-border: #bae6fd;

  --color-success: #15803d;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-danger: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;

  /* ---- Spacing (4px scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-16: 4rem;

  /* ---- Typography ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei",
    sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-h1: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --fs-h2: clamp(1.25rem, 1.15rem + 0.6vw, 1.75rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --lh-body: 1.6;
  --lh-heading: 1.25;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Shape & elevation ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
}