/* ============================================================
   SSDA Design Tokens — Bespoke Brand
   WRX-005 | Based on QB semantic color system
   ============================================================ */

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

:root {

  /* ---- Color: Brand ---- */
  --color-brand-primary:      #2C4F7C;  /* Slate Blue — primary actions, links */
  --color-brand-primary-dark: #1E3A5F;  /* Hover, focus, active states */
  --color-brand-primary-tint: #EAF0F8;  /* Selected backgrounds, hover fills */
  --color-brand-nav:          #1A2F45;  /* Navigation bar, header */
  --color-brand-accent:       #9C5E2B;  /* Copper — sparingly: badges, highlights */
  --color-brand-accent-tint:  #F5EDE4;  /* Copper hover/focus backgrounds */

  /* ---- Color: Surface ---- */
  --color-surface-page:       #F7F5F1;  /* Main page background (warm parchment) */
  --color-surface-card:       #FEFDF9;  /* Cards, panels, modals */
  --color-surface-alt:        #F2EFE9;  /* Alternating table rows */
  --color-surface-overlay:    rgba(26, 47, 69, 0.5); /* Modal backdrop */

  /* ---- Color: Text ---- */
  --color-text-primary:       #2B2825;  /* Charcoal — body text, headings */
  --color-text-secondary:     #6B6560;  /* Labels, metadata, captions */
  --color-text-disabled:      #A09890;  /* Disabled states */
  --color-text-inverse:       #FEFDF9;  /* On dark backgrounds */
  --color-text-link:          #2C4F7C;  /* Links (same as brand primary) */
  --color-text-link-hover:    #1E3A5F;  /* Hovered links */

  /* ---- Color: Border ---- */
  --color-border-default:     #DDD7CF;  /* Card borders, separators */
  --color-border-strong:      #B8B0A5;  /* Emphasized borders */
  --color-border-focus:       #2C4F7C;  /* Focus ring */

  /* ---- Color: Semantic (Success) ---- */
  --color-success:            #3D7A50;  /* Sage green */
  --color-success-dark:       #2D5C3C;  /* Text on success bg */
  --color-success-bg:         #E6F3EB;  /* Success state background */

  /* ---- Color: Semantic (Warning) ---- */
  --color-warning:            #C47D0E;  /* Amber */
  --color-warning-dark:       #935D0A;  /* Text on warning bg */
  --color-warning-bg:         #FBF2E0;  /* Warning state background */

  /* ---- Color: Semantic (Error) ---- */
  --color-error:              #B53232;  /* Brick red */
  --color-error-dark:         #8A2424;  /* Text on error bg */
  --color-error-bg:           #F7E8E8;  /* Error state background */

  /* ---- Color: Semantic (Info) ---- */
  --color-info:               #2C4F7C;  /* Slate (same as primary) */
  --color-info-bg:            #EAF0F8;  /* Info state background */

  /* ---- Typography ---- */
  --font-family-base:   'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono:   'JetBrains Mono', 'Fira Code', monospace;  /* For numbers/codes */

  /* Type Scale — 4px grid */
  --font-size-xs:   12px;   /* Captions, badge labels, table metadata */
  --font-size-sm:   14px;   /* Base: body text, table rows, form labels */
  --font-size-md:   16px;   /* Section headings, panel titles */
  --font-size-lg:   20px;   /* Screen/page headings */
  --font-size-xl:   28px;   /* Tile metrics, hero numbers */
  --font-size-2xl:  36px;   /* Large impact numbers */

  /* Font Weights */
  --font-weight-normal:  400;   /* Body, table rows */
  --font-weight-medium:  500;   /* Labels, column headers */
  --font-weight-semibold: 600;  /* Section headings, tile titles */
  --font-weight-bold:    700;   /* Hero numbers, CTAs */

  /* Line Heights */
  --line-height-tight:   1.2;   /* Headings, hero numbers */
  --line-height-base:    1.5;   /* Body text */
  --line-height-relaxed: 1.7;   /* Longer prose */

  /* ---- Spacing — 8px base grid ---- */
  --space-1:   4px;    /* Micro: icon padding, badge internal */
  --space-2:   8px;    /* Tight: input padding, inline gaps */
  --space-3:   12px;   /* Table row padding */
  --space-4:   16px;   /* Card internal padding */
  --space-5:   20px;   /* Section inner spacing */
  --space-6:   24px;   /* Between card and card */
  --space-8:   32px;   /* Section separation */
  --space-10:  40px;   /* Large section gaps */
  --space-12:  48px;   /* Page-level vertical rhythm */

  /* ---- Layout ---- */
  --layout-max-width:      1280px;
  --layout-sidebar-width:  240px;
  --layout-panel-width:    380px;   /* Detail panel in master-detail */

  /* ---- Border Radius ---- */
  --radius-xs:   2px;   /* Badges, tags (tight) */
  --radius-sm:   4px;   /* Inputs, buttons */
  --radius-md:   8px;   /* Cards, panels */
  --radius-lg:   12px;  /* Modals, drawers */

  /* ---- Shadows ---- */
  --shadow-xs:   0 1px 2px rgba(43, 40, 37, 0.08);   /* Subtle card lift */
  --shadow-sm:   0 2px 4px rgba(43, 40, 37, 0.10);   /* Cards at rest */
  --shadow-md:   0 4px 12px rgba(43, 40, 37, 0.12);  /* Elevated cards */
  --shadow-lg:   0 8px 24px rgba(43, 40, 37, 0.16);  /* Modals, dropdowns */

  /* ---- Transitions ---- */
  --transition-fast:    100ms ease;
  --transition-default: 200ms ease;
  --transition-slow:    300ms ease;

  /* ---- Z-Index Scale ---- */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}