/* ==========================================================================
   Tailored Solutions — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for color, typography, spacing, radii, shadows,
   borders, motion, layout, and z-index. Consumed by base.css, components.css,
   home.css, and gallery.css. Premium black/red/white cybersecurity aesthetic.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     Color — surfaces, text, accent, status, semantic aliases
     ---------------------------------------------------------------------- */
  --color-bg:            #0A0A0B;
  --color-bg-elevated:   #14141A;
  --color-surface:       #1C1C24;
  --color-surface-hover: #232330;
  --color-border:        #2A2A35;
  --color-divider:       #1F1F28;

  --color-text:          #F5F5F7;
  --color-text-muted:    #A3A3AD;
  --color-text-dim:      #6B6B78;

  --color-accent:        #C8102E;
  --color-accent-hover:  #E11C39;
  --color-accent-soft:   rgba(200, 16, 46, 0.12);
  --color-accent-bright: #FF4A65;

  --color-white:         #FFFFFF;
  --color-success:       #2EC27E;
  --color-warning:       #F5A524;

  /* Semantic color aliases — refer to these in component CSS rather than the
     raw color tokens above so a future palette swap stays surgical. */
  --color-link:          var(--color-accent-bright);
  --color-link-hover:    var(--color-white);
  --color-card-bg:       var(--color-surface);
  --color-card-bg-hover: var(--color-surface-hover);

  /* ----------------------------------------------------------------------
     Typography — families
     ---------------------------------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ----------------------------------------------------------------------
     Type scale — fluid clamps for headlines
     ---------------------------------------------------------------------- */
  --fs-xs:      0.75rem;
  --fs-sm:      0.875rem;
  --fs-base:    1rem;
  --fs-lg:      1.125rem;
  --fs-xl:      1.25rem;
  --fs-2xl:     clamp(1.5rem,  2vw + 1rem, 2rem);
  --fs-3xl:     clamp(2rem,    3vw + 1rem, 3rem);
  --fs-display: clamp(2.75rem, 5vw + 1rem, 5rem);

  /* ----------------------------------------------------------------------
     Spacing scale — 1, 2, 3, 4, 6, 8, 12, 16 unit steps
     ---------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 6rem;

  /* ----------------------------------------------------------------------
     Radii
     ---------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------------------
     Borders — pre-composed common patterns
     ---------------------------------------------------------------------- */
  --border-hairline: 1px solid var(--color-border);
  --border-divider:  1px solid var(--color-divider);
  --border-accent:   1px solid var(--color-accent);

  /* ----------------------------------------------------------------------
     Shadows — full elevation scale plus signature red glows
     ---------------------------------------------------------------------- */
  --shadow-xs:               0 1px 1px rgba(0, 0, 0, 0.35);
  --shadow-sm:               0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:               0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:               0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:               0 24px 64px rgba(0, 0, 0, 0.65);
  --shadow-glow-red-soft:    0 0 0 1px rgba(200, 16, 46, 0.25),
                             0 6px 18px rgba(200, 16, 46, 0.18);
  --shadow-glow-red:         0 0 0 1px rgba(200, 16, 46, 0.35),
                             0 8px 32px rgba(200, 16, 46, 0.28);
  --shadow-glow-red-strong:  0 0 0 2px rgba(200, 16, 46, 0.55),
                             0 14px 48px rgba(200, 16, 46, 0.40);

  /* ----------------------------------------------------------------------
     Layout
     ---------------------------------------------------------------------- */
  --container-max:        1200px;
  --container-max-narrow: 880px;
  --container-padding:    clamp(1rem, 4vw, 2rem);
  --header-height:        72px;
  --header-height-scrolled: 60px;

  /* ----------------------------------------------------------------------
     Z-index scale — single source of stacking order
     ---------------------------------------------------------------------- */
  --z-base:      0;
  --z-overlay:   10;
  --z-header:    50;
  --z-mega-menu: 60;
  --z-modal:     80;
  --z-toast:     90;

  /* ----------------------------------------------------------------------
     Motion — easing and durations (reduced-motion handled in base.css)
     ---------------------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 460ms;
}