/* ============================================================
   STRATALIS GROUP, Design Tokens V2
   Brand: Red #D4451D | Green #97A822 | Charcoal #636969
   Fonts: Arsenal (display) + Open Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

:root {
  /* Brand Colors */
  --red:         #D4451D;
  --red-dark:    #b03617;
  --red-light:   #f0603c;
  --green:       #97A822;
  --green-dark:  #7a8a1a;
  --green-light: #b4c93a;
  --charcoal:    #636969;
  --charcoal-dark: #404040;
  --charcoal-light: #8a9090;

  /* Neutrals */
  --white:       #ffffff;
  --off-white:   #fafafa;
  --grey-50:     #F2F2F2;
  --grey-100:    #e8e8e8;
  --grey-200:    #d0d0d0;
  --grey-300:    #b0b0b0;
  --grey-400:    #707070;
  --grey-500:    #505050;
  --black:       #1a1a1a;

  /* Semantic */
  --color-primary:     var(--red);
  --color-secondary:   var(--green);
  --color-accent:      var(--charcoal);
  --color-bg:          var(--white);
  --color-surface:     var(--grey-50);
  --color-text:        var(--charcoal-dark);
  --color-text-muted:  var(--grey-400);
  --color-border:      var(--grey-200);
  --color-overlay:     rgba(64,64,64,0.08);

  /* Typography */
  --font-display: 'Arsenal', Georgia, serif;
  --font-body:    'Open Sans', system-ui, sans-serif;

  /* Type Scale (fluid clamp) */
  --text-xs:   clamp(0.70rem, 1.2vw, 0.75rem);
  --text-sm:   clamp(0.80rem, 1.4vw, 0.875rem);
  --text-base: clamp(0.875rem, 1.6vw, 1rem);
  --text-md:   clamp(1rem, 1.8vw, 1.125rem);
  --text-lg:   clamp(1.1rem, 2vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 3vw, 1.875rem);
  --text-3xl:  clamp(1.875rem, 4vw, 2.5rem);
  --text-4xl:  clamp(2.25rem, 5vw, 3.25rem);
  --text-hero: clamp(3rem, 7vw, 5rem);

  /* Spacing (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1600px;
  --container-md:  1000px;
  --container-sm:  720px;
  --nav-height:    72px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.10);

  /* Radius */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --trans-fast:  180ms cubic-bezier(0.16, 1, 0.3, 1);
  --trans-base:  280ms cubic-bezier(0.16, 1, 0.3, 1);
  --trans-slow:  400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index layers */
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   500;
  --z-tooltip: 600;
}