/* Qamodes design tokens — v3.0 "Qamodes" system (2026-08-15), supersedes v2.0 Redwood.
   See docs/09_Web/UI_DESIGN_SYSTEM.md for the full spec and rationale. This file is the
   ONLY place a raw hex value should appear. Every other stylesheet and every JSP must
   reference these via var(--token-name). Token NAMES are kept stable across v2.0 -> v3.0
   (only their values changed) specifically so no JSP had to be touched for the palette
   swap — see the design system doc's "why token names didn't change" note. */

:root {
  /* ---- Qamodes brand green scale ---- */
  --brand-green-900: #0B2E1F;
  --brand-green-800: #124430;
  --brand-green-700: #1B6B45;
  --brand-green-600: #2E8B57;
  --brand-green-500: #47A06C;
  --brand-green-400: #5FBE84;
  --brand-green-100: #DCF2E3;
  --brand-green-50: #F1FAF4;
  --brand-gradient: linear-gradient(90deg, var(--brand-green-900), var(--brand-green-700), var(--brand-green-500));

  /* ---- Brand / Accent (aliases onto the green scale — kept as the token names every
     component/JSP already references, only their values moved from red to green) ---- */
  --brand-primary: var(--brand-green-700);
  --brand-primary-hover: var(--brand-green-800);
  --brand-primary-active: var(--brand-green-900);
  --brand-primary-subtle: var(--brand-green-100);

  /* ---- Neutrals (clean enterprise grey — replaces v2.0's warm sand/timber scale) ---- */
  --ink-900: #171B1E;
  --ink-700: #3A4147;
  --ink-500: #5B6168;
  --ink-300: #8A9098;
  --line-200: #E2E5E8;
  --surface-100: #F6F9F7;
  --surface-50: #EEF6F1;
  --surface-0: #FFFFFF;

  /* ---- Semantic (RAG) — success reuses the brand green family per the Qamodes spec
     ("Brand Green: Active/Approved/Passed/Completed/Delivered") ---- */
  --success: var(--brand-green-700);
  --success-bg: var(--brand-green-100);
  --warning: #B7791F;
  --warning-bg: #FBF0DC;
  --danger: #C0392B;
  --danger-bg: #FBEAE8;
  --info: #1F6FA8;
  --info-bg: #E6F0F7;
  --neutral-badge: #5B6168;
  --neutral-badge-bg: #EEF0F2;

  /* ---- Portal identity accents (3px line under the header) ---- */
  --portal-accent-internal: var(--brand-primary);
  --portal-accent-customer: var(--info);
  --portal-accent-supplier: var(--brand-green-600);

  /* ---- Charts (in order) ---- */
  --chart-1: var(--brand-green-700);
  --chart-2: var(--brand-green-500);
  --chart-3: var(--brand-green-900);
  --chart-4: var(--info);
  --chart-5: var(--ink-500);
  --chart-6: var(--warning);

  /* ---- Typography — clean enterprise sans throughout (Segoe UI/Calibri-like), no
     decorative/serif display face; see UI_DESIGN_SYSTEM.md v3.0 for why Fraunces was
     dropped ---- */
  --font-display: "Segoe UI", "Calibri", -apple-system, system-ui, sans-serif;
  --font-body: "Segoe UI", "Calibri", -apple-system, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  /* Compact enterprise density pass (2026-08-25, project-owner directive) — SAP/Outlook-
     style baseline, ~85% of the prior scale. Font sizes shrink modestly (readability floor
     kept — --text-label stays 12px, small text stops earning much back below there);
     spacing/control-height below carry most of the actual density change, matching how
     Fiori Compact vs Cozy really differs (row/control height and padding, not type size). */
  --text-hero: 600 1.875rem/1.25 var(--font-display);
  --text-page-title: 600 1.25rem/1.25 var(--font-display);
  --text-section-title: 600 1rem/1.3 var(--font-display);
  --text-body: 400 0.875rem/1.5 var(--font-body);
  --text-body-medium: 500 0.875rem/1.5 var(--font-body);
  --text-secondary: 400 0.8125rem/1.5 var(--font-body);
  --text-label: 600 0.75rem/1.5 var(--font-body);
  --label-tracking: 0.04em;

  /* ---- Granular type scale (2026-08-15, UI Full Application Modernization Phase 1) —
     additive alongside the --text-* composites above, which every existing screen already
     uses and stay unchanged. For new components that need to compose size and weight
     independently (e.g. "sm + semibold" without a matching --text-* shorthand). ---- */
  --q-font-size-xs: 0.6875rem;
  --q-font-size-sm: 0.8125rem;
  --q-font-size-md: 0.875rem;
  --q-font-size-lg: 1rem;
  --q-font-size-xl: 1.25rem;
  --q-font-weight-regular: 400;
  --q-font-weight-medium: 500;
  --q-font-weight-semibold: 600;

  /* ---- Shape / elevation ---- */
  /* Control density (2026-08-15, UI Refinement — Control Density; deepened 2026-08-25 per
     the compact-density pass above): interactive controls (buttons, inputs, selects,
     search) target SAP/Oracle enterprise density — compact height, sharp corners — not the
     rounded-card consumer-SaaS look. Cards/modals/chips/badges are deliberately NOT
     flattened (out of scope, still --radius-card/-modal/-chip below) so whitespace-between-
     sections stays soft while controls themselves go sharp. */
  --control-height: 28px;
  --radius-card: 10px;
  --radius-control: 0px;
  --radius-dropdown: 0px;
  --radius-modal: 12px;
  --radius-chip: 999px;
  --shadow-card: 0 1px 2px rgba(15, 23, 20, .06), 0 1px 1px rgba(15, 23, 20, .04);
  --shadow-pop: 0 8px 20px rgba(15, 23, 20, .14);
  --shadow-modal: 0 16px 40px rgba(15, 23, 20, .20);

  /* ---- Spacing (2026-08-25 compact-density pass) ---- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 36px;
  --space-8: 48px;

  --page-gutter: 20px;
  --card-padding: 16px;
  --max-content-width: 1440px;

  --motion-duration: 180ms;
  --motion-easing: ease-out;
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
  }
}