/**
 * XSHIELD1 — Design Tokens
 * ---------------------------------------------------------------------------
 * Single source of truth for color, type, spacing, radius, shadow, and motion.
 * Nothing here renders anything by itself — base.css and template partials
 * consume these variables. Change brand values here, not downstream.
 */

:root {
  /* ---------------------------------------------------------------------
   * Brand color
   * ------------------------------------------------------------------- */
  --xs-red-500: #CD181D;   /* primary brand red */
  --xs-red-600: #A81418;  /* hover / pressed */
  --xs-red-700: #7F0F12;  /* active / deep accent */
  --xs-red-100: #FBEAEB;  /* tint backgrounds */

  --xs-black: #0A0A0A;
  --xs-white: #FFFFFF;

  --xs-gray-900: #171717;
  --xs-gray-800: #262626;
  --xs-gray-700: #404040;
  --xs-gray-600: #595959;
  --xs-gray-500: #737373;
  --xs-gray-400: #A3A3A3;
  --xs-gray-300: #D4D4D4;
  --xs-gray-200: #E5E5E5;
  --xs-gray-100: #F5F5F5;
  --xs-gray-050: #FAFAFA;

  --xs-success: #1E8E3E;
  --xs-warning: #B98900;
  --xs-danger:  #CD181D;

  /* ---------------------------------------------------------------------
   * Semantic color roles (what components should actually reference)
   * ------------------------------------------------------------------- */
  --xs-color-bg:            var(--xs-white);
  --xs-color-bg-inverse:    var(--xs-black);
  --xs-color-surface:       var(--xs-gray-050);
  --xs-color-border:        var(--xs-gray-200);

  --xs-color-text:          var(--xs-gray-900);
  --xs-color-text-muted:    var(--xs-gray-600);
  --xs-color-text-inverse:  var(--xs-white);

  --xs-color-brand:         var(--xs-red-500);
  --xs-color-brand-hover:   var(--xs-red-600);
  --xs-color-brand-active:  var(--xs-red-700);
  --xs-color-on-brand:      var(--xs-white);

  --xs-color-link:          var(--xs-red-500);
  --xs-color-link-hover:    var(--xs-red-600);

  --xs-color-focus-ring:    var(--xs-red-500);

  /* ---------------------------------------------------------------------
   * Typography
   * ------------------------------------------------------------------- */
  --xs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --xs-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --xs-fw-regular: 400;
  --xs-fw-medium: 500;
  --xs-fw-semibold: 600;
  --xs-fw-bold: 700;
  --xs-fw-black: 900;

  --xs-fs-xs:   0.75rem;   /* 12px */
  --xs-fs-sm:   0.875rem;  /* 14px */
  --xs-fs-base: 1rem;      /* 16px */
  --xs-fs-md:   1.125rem;  /* 18px */
  --xs-fs-lg:   1.25rem;   /* 20px */
  --xs-fs-xl:   1.5rem;    /* 24px */
  --xs-fs-2xl:  1.875rem;  /* 30px */
  --xs-fs-3xl:  2.25rem;   /* 36px */
  --xs-fs-4xl:  3rem;      /* 48px */
  --xs-fs-5xl:  3.75rem;   /* 60px */

  --xs-lh-tight:  1.15;
  --xs-lh-snug:   1.35;
  --xs-lh-normal: 1.5;
  --xs-lh-loose:  1.7;

  --xs-ls-tight: -0.02em;
  --xs-ls-wide:  0.04em;

  /* ---------------------------------------------------------------------
   * Spacing scale (4px base)
   * ------------------------------------------------------------------- */
  --xs-space-0:  0;
  --xs-space-1:  0.25rem;  /* 4px */
  --xs-space-2:  0.5rem;   /* 8px */
  --xs-space-3:  0.75rem;  /* 12px */
  --xs-space-4:  1rem;     /* 16px */
  --xs-space-5:  1.5rem;   /* 24px */
  --xs-space-6:  2rem;     /* 32px */
  --xs-space-7:  3rem;     /* 48px */
  --xs-space-8:  4rem;     /* 64px */
  --xs-space-9:  6rem;     /* 96px */
  --xs-space-10: 8rem;     /* 128px */

  /* ---------------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------------- */
  --xs-container-max: 1280px;
  --xs-container-pad: var(--xs-space-4);
  --xs-header-height: 84px;

  /* ---------------------------------------------------------------------
   * Radius / border / shadow
   * ------------------------------------------------------------------- */
  --xs-radius-sm: 2px;
  --xs-radius-md: 4px;
  --xs-radius-lg: 8px;
  --xs-radius-full: 999px;

  --xs-border-width: 1px;
  --xs-border-width-thick: 2px;

  --xs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --xs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --xs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);

  /* ---------------------------------------------------------------------
   * Motion
   * ------------------------------------------------------------------- */
  --xs-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --xs-duration-fast: 150ms;
  --xs-duration-base: 250ms;
  --xs-duration-slow: 400ms;

  /* ---------------------------------------------------------------------
   * Z-index scale
   * ------------------------------------------------------------------- */
  --xs-z-header: 100;
  --xs-z-overlay: 200;
  --xs-z-modal: 300;
  --xs-z-toast: 400;
}