/**
 * JaliscoAsisteWeb - Design Tokens & Theme Variables
 * Extracted from Stitch Design System:
 * - Institutional EdTech & School Security (Dark)
 * - Modern Civic EdTech Light (Light)
 */

:root {
  /* Font Families */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typography Scale */
  --font-size-display-hero: 56px;
  --line-height-display-hero: 64px;
  --letter-spacing-display-hero: -0.03em;
  --font-weight-display-hero: 800;

  --font-size-headline-xl: 40px;
  --line-height-headline-xl: 48px;
  --letter-spacing-headline-xl: -0.02em;
  --font-weight-headline-xl: 700;

  --font-size-headline-lg: 28px;
  --line-height-headline-lg: 36px;
  --letter-spacing-headline-lg: -0.015em;
  --font-weight-headline-lg: 700;

  --font-size-headline-md: 22px;
  --line-height-headline-md: 28px;
  --letter-spacing-headline-md: -0.01em;
  --font-weight-headline-md: 600;

  --font-size-headline-sm: 18px;
  --line-height-headline-sm: 24px;
  --font-weight-headline-sm: 600;

  --font-size-body-lg: 16px;
  --line-height-body-lg: 26px;
  --font-weight-body-lg: 400;

  --font-size-body-md: 14px;
  --line-height-body-md: 22px;
  --font-weight-body-md: 400;

  --font-size-body-sm: 12px;
  --line-height-body-sm: 18px;
  --font-weight-body-sm: 400;

  --font-size-label-lg: 14px;
  --line-height-label-lg: 20px;
  --letter-spacing-label-lg: 0.01em;
  --font-weight-label-lg: 600;

  --font-size-label-md: 12px;
  --line-height-label-md: 16px;
  --letter-spacing-label-md: 0.02em;
  --font-weight-label-md: 600;

  --font-size-label-sm: 11px;
  --line-height-label-sm: 14px;
  --letter-spacing-label-sm: 0.04em;
  --font-weight-label-sm: 700;

  /* 8-Point Spacing Scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2.5rem;   /* 40px */
  --gutter: 1.5rem;
  --margin: 2.5rem;

  /* Border Radii */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-default: 0.5rem; /* 8px */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 1rem;    /* 16px */
  --radius-xl: 1.5rem;  /* 24px */
  --radius-full: 9999px;

  /* Brand Accents (Constant across modes) */
  --color-brand-orange: #f15a24;
  --color-brand-orange-hover: #e86034;
  --color-brand-orange-dark: #ea580c;
  --color-brand-orange-subtle: #fff7ed;
  --color-brand-orange-glow: rgba(241, 90, 36, 0.25);

  /* Light Theme (Default) */
  --color-canvas: #f8fafc;
  --color-canvas-alt: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-surface-subtle: #f8fafc;
  --color-surface-container: #ffffff;
  --color-surface-container-high: #f1f5f9;
  --color-surface-container-highest: #e2e8f0;

  --color-border-subtle: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-inverse: #ffffff;

  --color-status-success: #059669;
  --color-status-success-bg: #ecfdf5;
  --color-status-success-border: #a7f3d0;

  --color-status-warning: #d97706;
  --color-status-warning-bg: #fffbeb;
  --color-status-warning-border: #fde68a;

  --color-status-danger: #dc2626;
  --color-status-danger-bg: #fef2f2;
  --color-status-danger-border: #fecaca;

  --color-status-info: #0284c7;
  --color-status-info-bg: #f0f9ff;
  --color-status-info-border: #bae6fd;

  --header-bg: rgba(255, 255, 255, 0.92);
  --card-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --card-shadow-hover: 0 10px 20px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
}

/* Dark Theme (Institutional EdTech & School Security) */
html.dark, [data-theme="dark"] {
  --color-canvas: #0b1320;
  --color-canvas-alt: #070e1b;
  --color-surface: #0c1421;
  --color-surface-hover: #182b45;
  --color-surface-subtle: #141c29;
  --color-surface-container: #132238;
  --color-surface-container-high: #222a38;
  --color-surface-container-highest: #2d3543;

  --color-border-subtle: #1e2f47;
  --color-border: #233854;
  --color-border-strong: #2b4366;

  --color-text-primary: #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #0f172a;

  --color-status-success: #10b981;
  --color-status-success-bg: rgba(16, 185, 129, 0.15);
  --color-status-success-border: rgba(16, 185, 129, 0.3);

  --color-status-warning: #f59e0b;
  --color-status-warning-bg: rgba(245, 158, 11, 0.15);
  --color-status-warning-border: rgba(245, 158, 11, 0.3);

  --color-status-danger: #ef4444;
  --color-status-danger-bg: rgba(239, 68, 68, 0.15);
  --color-status-danger-border: rgba(239, 68, 68, 0.3);

  --color-status-info: #38bdf8;
  --color-status-info-bg: rgba(56, 189, 248, 0.15);
  --color-status-info-border: rgba(56, 189, 248, 0.3);

  --header-bg: rgba(11, 19, 32, 0.92);
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-border-strong);
}