/* ============================================================================
   STRATEGICDISTRICT.COM , CSS VARIABLES & DESIGN TOKENS
   Complete design system with colors, typography, spacing, and shadows
   ============================================================================ */

:root {
  /* ========== PRIMARY COLOR PALETTE ========== */
  --color-primary-black: #0A0908;
  --color-primary-navy: #22333B;
  --color-primary-cream: #EAE0D5;
  --color-primary-tan: #C6AC8F;
  --color-primary-brown: #5E503F;
  --color-primary-dark-blue: #14213D;

  /* ========== SECONDARY COLOR PALETTE ========== */
  --color-secondary-sage: #ABC4AB;
  --color-secondary-gold: #A39171;
  --color-secondary-light-tan: #DCC9B6;
  --color-secondary-olive: #727D71;
  --color-secondary-warm-brown: #6D4C3D;

  /* ========== POP COLOR PALETTE (bright accents for features/data) ========== */
  --color-pop-green: #6ECF6E;      /* Vibrant education green */
  --color-pop-teal: #00B4CC;       /* Bright teal for data viz */
  --color-pop-gold: #D4A537;       /* Rich gold for highlights */
  --color-pop-coral: #E07A5F;      /* Warm coral accent */
  --color-pop-purple: #6B4C9A;     /* Deep purple for contrast */

  /* ========== REPORT/DATA VISUALIZATION PALETTE ========== */
  --color-report-dark: #001219;
  --color-report-teal-dark: #005F73;
  --color-report-teal: #0A9396;
  --color-report-teal-light: #94D2BD;
  --color-report-accent-yellow: #E9D8A6;
  --color-report-orange-dark: #CA6702;
  --color-report-orange: #BB3E03;
  --color-report-red-dark: #AE2012;
  --color-report-red: #9B2226;

  /* ========== SEMANTIC COLORS ========== */
  --color-text-primary: var(--color-primary-black);
  --color-text-secondary: var(--color-primary-navy);
  --color-text-muted: var(--color-primary-brown);
  --color-text-light: var(--color-primary-navy);
  --color-text-inverse: var(--color-primary-cream);

  --color-background: #FFFFFF;
  --color-background-alt: #F9F7F3;
  --color-background-light: #FEFDFB;

  --color-border-light: #E8E2D7;
  --color-border-muted: #D4CCC1;
  --color-border-dark: #C6AC8F;

  --color-success: var(--color-report-teal);
  --color-warning: var(--color-report-orange);
  --color-error: var(--color-report-red);
  --color-info: var(--color-report-teal-dark);

  --color-link: var(--color-primary-dark-blue);
  --color-link-hover: var(--color-primary-navy);
  --color-link-visited: var(--color-primary-brown);

  /* ========== HUE GRADIENT ACCENTS (Apple TV style) ========== */
  /* Subtle rainbow gradient for dividers and borders (original, muted) */
  --gradient-hue-warm-to-cool: linear-gradient(90deg,
    #C6AC8F 0%,      /* Warm tan */
    #A39171 15%,     /* Muted gold */
    #ABC4AB 30%,     /* Sage */
    #727D71 45%,     /* Olive */
    #0A9396 60%,     /* Teal */
    #005F73 75%,     /* Teal-dark */
    #14213D 90%      /* Dark blue */
  );

  --gradient-hue-cool-to-warm: linear-gradient(90deg,
    #14213D 0%,      /* Dark blue */
    #005F73 15%,     /* Teal-dark */
    #0A9396 30%,     /* Teal */
    #727D71 45%,     /* Olive */
    #ABC4AB 60%,     /* Sage */
    #A39171 75%,     /* Muted gold */
    #C6AC8F 90%      /* Warm tan */
  );

  /* BRIGHT gradient with vibrant pops (for features, reports, data viz) */
  --gradient-hue-bright: linear-gradient(90deg,
    #D4A537 0%,      /* Rich gold */
    #E07A5F 20%,     /* Warm coral */
    #6ECF6E 40%,     /* Vibrant green */
    #00B4CC 60%,     /* Bright teal */
    #6B4C9A 80%,     /* Deep purple */
    #14213D 100%     /* Dark blue */
  );

  /* SUBTLE gradient for backgrounds (original muted palette) */
  --gradient-hue-subtle: linear-gradient(90deg,
    #C6AC8F 0%,      /* Warm tan */
    #A39171 12%,     /* Muted gold */
    #ABC4AB 28%,     /* Sage */
    #727D71 44%,     /* Olive */
    #0A9396 60%,     /* Teal */
    #005F73 76%,     /* Teal-dark */
    #14213D 100%     /* Dark blue */
  );

  --gradient-hue-report: linear-gradient(90deg,
    #001219 0%,
    #005F73 20%,
    #0A9396 40%,
    #94D2BD 60%,
    #E9D8A6 80%,
    #CA6702 100%
  );

  --gradient-subtle-sage: linear-gradient(135deg,
    #FEFDFB 0%,
    rgba(171, 196, 171, 0.08) 100%
  );

  --gradient-subtle-gold: linear-gradient(135deg,
    #FEFDFB 0%,
    rgba(163, 145, 113, 0.08) 100%
  );

  /* ========== TYPOGRAPHY ========== */
  --font-serif: 'Source Serif Pro', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Heading scales */
  --font-size-h1: 3.5rem;      /* 56px */
  --font-size-h2: 2.75rem;     /* 44px */
  --font-size-h3: 2.125rem;    /* 34px */
  --font-size-h4: 1.75rem;     /* 28px */
  --font-size-h5: 1.5rem;      /* 24px */
  --font-size-h6: 1.25rem;     /* 20px */

  /* Body text scales */
  --font-size-body-lg: 1.125rem;   /* 18px */
  --font-size-body-md: 1rem;       /* 16px */
  --font-size-body-sm: 0.875rem;   /* 14px */
  --font-size-body-xs: 0.75rem;    /* 12px */

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========== SPACING ========== */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 2.5rem;    /* 40px */
  --spacing-3xl: 3rem;      /* 48px */
  --spacing-4xl: 4rem;      /* 64px */
  --spacing-5xl: 5rem;      /* 80px */
  --spacing-6xl: 6rem;      /* 96px */

  /* Section spacing */
  --section-padding-mobile: var(--spacing-xl) var(--spacing-lg);
  --section-padding-tablet: var(--spacing-3xl) var(--spacing-2xl);
  --section-padding-desktop: var(--spacing-5xl) var(--spacing-4xl);

  /* ========== BORDER RADIUS ========== */
  --radius-sm: 0.375rem;    /* 6px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;

  /* ========== SHADOWS ========== */
  --shadow-xs: 0 1px 2px 0 rgba(10, 9, 8, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(10, 9, 8, 0.1), 0 1px 2px 0 rgba(10, 9, 8, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(10, 9, 8, 0.1), 0 2px 4px -1px rgba(10, 9, 8, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(10, 9, 8, 0.1), 0 4px 6px -2px rgba(10, 9, 8, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(10, 9, 8, 0.1), 0 10px 10px -5px rgba(10, 9, 8, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(10, 9, 8, 0.25);

  /* ========== TRANSITIONS ========== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== Z-INDEX SCALE ========== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1070;

  /* ========== BREAKPOINTS (for reference, use in media queries) ========== */
  /* Mobile-first: 320px */
  /* Tablet: 768px (max-width: 767px = mobile) */
  /* Desktop: 1024px (min-width: 1024px = desktop) */
  /* Large: 1440px */
  /* XL: 1920px */
}

/* Responsive adjustments for tablets and smaller screens */
@media (max-width: 767px) {
  :root {
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
  }
}

/* Dark mode support (optional future enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors would go here */
    /* For now, light mode is primary */
  }
}