/**
 * KUBERO ESTIMATING SERVICES - DESIGN SYSTEM TOKENS
 * Direction: Industrial Spec Sheet (Submittal Technical Manual)
 * Palette: Navy (#08183C), Pine Green (#0F3D34), Burnt Orange (#B94F23), White (#FFFFFF)
 */

:root {
  /* Brand Colors - HEX Fallbacks */
  --color-navy: #08183C;
  --color-navy-dark: #051028;
  --color-navy-light: #162B5E;
  --color-navy-tint: #EEF2F7;
  
  --color-pine: #0F3D34;
  --color-pine-light: #E6F0EE;
  --color-pine-dark: #0A2B24;

  --color-burnt-orange: #B94F23;
  --color-burnt-orange-hover: #9C3F19;
  --color-burnt-orange-light: #FBF0EB;

  --color-paper: #FFFFFF;
  --color-surface-submittal: #F8FAFC;
  --color-surface-alt: #F1F5F9;

  --color-text-main: #0F172A;
  --color-text-muted: #475569;
  --color-text-subtle: #64748B;
  --color-text-inverse: #FFFFFF;

  --color-rule-hard: #CBD5E1;
  --color-rule-subtle: #E2E8F0;
  --color-rule-navy: #08183C;

  /* Typography Stack */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Consolas, Courier, monospace;

  /* Modular Typography Scale */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.875rem;  /* 30px */
  --text-3xl: 2.375rem;  /* 38px */
  --text-4xl: 3rem;      /* 48px */
  --text-5xl: 3.5rem;    /* 56px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Spacing Scale (4px / 8px Grid) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */

  /* Containers */
  --container-max: 1240px;
  --container-narrow: 960px;
  --container-pad: 1.25rem;

  /* Contained Industrial Radii */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Shadows (Subtle Technical Elevation) */
  --shadow-sm: 0 1px 2px 0 rgba(8, 24, 60, 0.05);
  --shadow-card: 0 1px 3px 0 rgba(8, 24, 60, 0.07), 0 1px 2px -1px rgba(8, 24, 60, 0.04);
  --shadow-raised: 0 4px 6px -1px rgba(8, 24, 60, 0.08), 0 2px 4px -2px rgba(8, 24, 60, 0.05);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modern OKLCH Enhancements when supported */
@supports (color: oklch(0 0 0)) {
  :root {
    --color-navy: oklch(0.22 0.055 260);
    --color-navy-dark: oklch(0.18 0.05 260);
    --color-navy-light: oklch(0.30 0.06 260);
    --color-navy-tint: oklch(0.96 0.012 260);

    --color-pine: oklch(0.33 0.065 170);
    --color-pine-light: oklch(0.95 0.02 170);
    --color-pine-dark: oklch(0.26 0.06 170);

    --color-burnt-orange: oklch(0.53 0.155 45);
    --color-burnt-orange-hover: oklch(0.47 0.15 45);
    --color-burnt-orange-light: oklch(0.96 0.025 45);

    --color-surface-submittal: oklch(0.985 0.005 240);
    --color-surface-alt: oklch(0.965 0.01 240);
  }
}