/**
 * Design Tokens
 * Central source of truth for all design values
 */

:root {
  /* ==========================================
     GREYSCALE SYSTEM (Cool Grey with Blue Undertone)
     ========================================== */
  --grey-100: hsl(209, 18%, 96%);
  --grey-250: hsl(209, 14%, 80%);
  --grey-400: hsl(209, 12%, 60%);
  --grey-550: hsl(209, 14%, 45%);
    --grey-650: hsl(209, 16%, 37%);
  --grey-700: hsl(209, 18%, 30%);
  --grey-900: hsl(209, 25%, 15%);

  /* RGB equivalents for opacity manipulation */
  --grey-100-rgb: 242, 245, 247;
  --grey-250-rgb: 197, 205, 213;
  --grey-400-rgb: 138, 147, 158;
  --grey-550-rgb: 96, 106, 119;
  --grey-700-rgb: 62, 72, 84;
  --grey-900-rgb: 28, 37, 46;

  /* ==========================================
     PRIMARY COLOR SYSTEM (Brand Blue)
     ========================================== */
  --blue-100: hsl(209, 78%, 92%);
  --blue-250: hsl(209, 82%, 72%);
  --blue-400: hsl(209, 85%, 55%);
    --blue-500: hsl(209, 82%, 48%);
  --blue-550: hsl(209, 78%, 42%); /* Base/Seed #18539B */
  --blue-700: hsl(209, 73%, 35%);
  --blue-900: hsl(209, 80%, 20%);

  /* RGB equivalents */
  --blue-100-rgb: 217, 234, 248;
  --blue-250-rgb: 122, 187, 227;
  --blue-400-rgb: 44, 147, 214;
  --blue-550-rgb: 23, 108, 182;
  --blue-700-rgb: 24, 83, 155;
  --blue-900-rgb: 10, 49, 89;

  /* ==========================================
     ACCENT COLOR SYSTEM (Action Orange)
     ========================================== */
  --orange-100: hsl(38, 92%, 92%);
    --orange-200: hsl(38, 93%, 82%);

  --orange-250: hsl(38, 95%, 70%);
  --orange-400: hsl(38, 98%, 55%);
  --orange-550: hsl(38, 100%, 47%);  /* Base/Seed #F09800 */
  --orange-700: hsl(38, 100%, 35%);
  --orange-900: hsl(38, 100%, 22%);

  /* RGB equivalents */
  --orange-100-rgb: 253, 239, 212;
  --orange-250-rgb: 248, 204, 107;
  --orange-400-rgb: 246, 172, 22;
  --orange-550-rgb: 240, 152, 0;
  --orange-700-rgb: 179, 113, 0;
  --orange-900-rgb: 112, 69, 0;

  /* ==========================================
     SEMANTIC COLOR MAPPINGS
     ========================================== */
  /* Primary */
  --color-primary: var(--blue-550);
  --color-primary-hover: var(--blue-700);
  --color-primary-active: var(--blue-900);
  --color-primary-light: var(--blue-100);

  /* Accent/CTA */
  --color-accent: var(--orange-550);
  --color-accent-hover: var(--orange-700);
  --color-accent-active: var(--orange-900);
  --color-accent-light: var(--orange-100);

  /* Text */
  --text-primary: var(--grey-900);
  --text-secondary: var(--grey-700);
  --text-tertiary: var(--grey-550);
  --text-placeholder: var(--grey-400);
  --text-disabled: var(--grey-250);

  /* Backgrounds */
  --bg-page: #ffffff;
  --bg-surface: #ffffff;
  --bg-hover: var(--grey-100);
  --bg-disabled: var(--grey-250);

  /* Borders */
  --border-default: var(--grey-250);
  --border-focus: var(--blue-400);
  --border-error: #dc3545;

  /* ==========================================
     SPACING SYSTEM (Constrained Scale - 25% jumps)
     ========================================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-48: 12rem;    /* 192px */
  --space-64: 16rem;    /* 256px */

  /* ==========================================
     TYPOGRAPHY SYSTEM (Roboto)
     ========================================== */
  /* Font Families */
  --font-primary: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.75rem;      /* 28px */
  --text-2xl: 2.25rem;     /* 36px */
  --text-3xl: 3rem;        /* 48px */

  /* Font Weights */
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-normal: 1.2;
  --leading-relaxed: 1.3;
  --leading-loose: 1.4;
  --leading-body: 1.7;
  --leading-caption: 1.5;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: -0.015em;
  --tracking-wide: -0.01em;
  --tracking-wider: 0.01em;
  --tracking-widest: 0.08em;

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

  /* ==========================================
     SHADOWS
     ========================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ==========================================
     TRANSITIONS
     ========================================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

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


/* ==========================================
   RESPONSIVE TYPOGRAPHY BREAKPOINTS
   Following: Independent scaling, aggressive shrinking for large text,
   readable minimum sizes, and hand-picked values over formulas
   ========================================== */

/* Tablet: Moderate adjustments (768px - 1023px) */
@media (max-width: 1023px) {
  :root {
    /* Body and small text - minimal changes */
    --text-base: 1rem;        /* 16px - unchanged for readability */
    --text-lg: 1.125rem;      /* 18px (was 20px) - slight reduction */

    /* Large text - moderate shrinking */
    --text-xl: 1.5rem;        /* 24px (was 28px) - 14% reduction */
    --text-2xl: 2rem;         /* 32px (was 36px) - 11% reduction */
    --text-3xl: 2.5rem;       /* 40px (was 48px) - 17% reduction */

    /* Adjust line heights slightly */
    --leading-tight: 1.125;
    --leading-normal: 1.25;
  }
}

/* Mobile: Aggressive scaling for large text (max 767px) */
@media (max-width: 767px) {
  :root {
    /* Small text stays readable - never go below 12px */
    --text-xs: 0.75rem;       /* 12px - unchanged (minimum readable size) */
    --text-sm: 0.875rem;      /* 14px - unchanged */

    /* Body text - slightly smaller but still comfortable */
    --text-base: 1rem;        /* 16px - KEEP AT 16px for iOS zoom prevention */
    /* Alternative if you must go smaller: 0.9375rem (15px) */

    /* Medium text - moderate shrinking */
    --text-lg: 1.125rem;      /* 18px (was 20px) - 10% reduction */

    /* Large text - aggressive shrinking (ratios change here) */
    --text-xl: 1.25rem;       /* 20px (was 28px) - 29% reduction */
    --text-2xl: 1.5rem;       /* 24px (was 36px) - 33% reduction */
    --text-3xl: 2rem;         /* 32px (was 48px) - 33% reduction */

    /* Adjust line heights for mobile reading comfort */
    --leading-tight: 1.15;
    --leading-snug: 1.2;
    --leading-normal: 1.25;
    --leading-body: 1.5;      /* Tighter for mobile, but still comfortable */
    --leading-caption: 1.4;
  }
}

/* Small mobile: Extra tight for very small screens (max 374px) */
@media (max-width: 374px) {
  :root {
    /* Keep minimum readable sizes */
    --text-xs: 0.75rem;       /* 12px - do not go smaller */
    --text-sm: 0.875rem;      /* 14px - unchanged */
    --text-base: 0.9375rem;   /* 15px (compromise for very small screens) */

    /* Scale everything else down proportionally */
    --text-lg: 1rem;          /* 16px (was 20px) */
    --text-xl: 1.125rem;      /* 18px (was 28px) */
    --text-2xl: 1.375rem;     /* 22px (was 36px) */
    --text-3xl: 1.75rem;      /* 28px (was 48px) */

    /* Tighter line heights for compact screens */
    --leading-body: 1.5;
  }
}