/* =====================================================
 * Preporia Design Tokens
 * =====================================================
 * Single source of truth for the values used across the
 * site's 20 stylesheets: brand colors, neutrals, semantic
 * colors, type scale, spacing, radius, shadow, motion.
 *
 * Status: NOT YET consumed by existing stylesheets. This
 * file documents/canonicalizes what's already in production
 * so new and updated CSS has one place to pull values from,
 * without changing how any current page renders. See
 * DESIGN_SYSTEM.md for usage guidance and a full audit of
 * where today's CSS still hardcodes these values directly.
 * ===================================================== */

:root {

  /* ---------- Brand ---------- */
  --color-primary:        #0041FF;  /* primary CTA / link / accent */
  --color-primary-hover:  #0033CC;  /* primary hover / active state */
  --color-primary-light:  #7B9FFF;  /* lighter accent, e.g. icons on dark */

  /* Primary tints — light blue backgrounds, highlighted cards, badges */
  --color-primary-tint-50:  #F8FAFF;
  --color-primary-tint-100: #F0F4FF;
  --color-primary-tint-200: #EEF2FF;
  --color-primary-tint-300: #E4EAFF;
  --color-primary-tint-400: #C7D4FF;

  /* ---------- Neutrals (text, borders, surfaces) ---------- */
  --color-text:            #1A202C;  /* headings / primary body text */
  --color-text-secondary:  #64748B;  /* secondary text, descriptions */
  --color-text-muted:      #94A3B8;  /* placeholders, meta, timestamps */

  --color-border:          #E2E8F0;  /* default hairline border */
  --color-border-strong:   #CBD5E1;  /* emphasized border / divider */

  --color-surface:         #FFFFFF;  /* cards, panels, page background */
  --color-surface-muted:   #F0F4F8;  /* subtle section backgrounds */

  --color-black:           #000000;
  --color-white:           #FFFFFF;

  /* ---------- Semantic ---------- */
  --color-success:            #059669;
  --color-success-light:      #10B981;
  --color-success-tint:       #F0FDF4;
  --color-success-text:       #065F46;
  --color-success-text-alt:   #166534;  /* alternate success text used in contact/profile success boxes */
  --color-success-border:     #B2F5C8; /* pairs with --color-success-text-alt */
  --color-success-border-light: #6EE7B7;
  --color-success-gradient-end: #0D9F6E; /* gradient endpoint paired with var(--color-success) */

  --color-warning:       #D97706;
  --color-warning-light: #F59E0B;
  --color-warning-tint:  #FEF3C7;
  --color-warning-text:  #92400E;
  --color-warning-accent:    #E6A817; /* streak/score warning text */
  --color-warning-tint-strong: #FDE68A; /* stronger warning tint border/gradient stop */

  --color-danger:        #DC2626;
  --color-danger-tint:   #FFF5F5;
  --color-danger-text:   #991B1B;
  --color-danger-strong: #DC3545; /* alternate danger red used for fail states */
  --color-danger-deep:   #CC0000; /* alternate deep-red error text */
  --color-danger-border: #FFCCCC; /* pairs with --color-danger-deep */

  /* ---------- Hero gradient ---------- */
  /* Signature dark hero background: linear-gradient(135deg, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-mid) 60%, var(--color-primary) 100%) */
  --color-hero-gradient-start: #0A1628;
  --color-hero-gradient-mid:   #1A2F5E;
  --color-primary-gradient-end: #4D79FF; /* lighter blue endpoint for primary-colored gradients/accents */

  /* ---------- Additional neutrals ---------- */
  --color-text-body:      #374151; /* secondary body text, distinct from --color-text-secondary */
  --color-text-faded:     #7F8C8D; /* muted meta text */
  --color-border-faint:   #F0F0F0;
  --color-border-mid:     #E9ECEF;
  --color-surface-subtle: #F8F9FA;
  --color-surface-tint:   #FAFBFF;
  --color-surface-wash:   #E8EDF5;

  /* ---------- Typography ---------- */
  --font-family-base: 'Poppins', sans-serif;
  --font-family-mono: 'Courier New', monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Type scale — matches the most common sizes already in use.
     Long tail of one-off sizes (0.78rem, 0.82rem, 0.88rem, etc.)
     exists in legacy CSS; prefer these steps in new/updated code. */
  --font-size-xs:   0.75rem;   /* 12px — fine print, badges */
  --font-size-sm:   0.875rem;  /* 14px — secondary text, labels */
  --font-size-base: 1rem;      /* 16px — body copy */
  --font-size-md:   1.1rem;    /* ~18px — emphasized body / small headings */
  --font-size-lg:   1.25rem;   /* 20px — card titles */
  --font-size-xl:   1.5rem;    /* 24px — section headings */
  --font-size-2xl:  1.75rem;   /* 28px — page subheadings */
  --font-size-3xl:  2rem;      /* 32px — page headings */
  --font-size-4xl:  2.4rem;    /* ~38px — hero headings */
  --font-size-5xl:  3rem;      /* 48px — large hero / marketing display */

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* ---------- Spacing (4px base unit) ---------- */
  --space-xs:   0.25rem;  /* 4px */
  --space-sm:   0.5rem;   /* 8px */
  --space-md:   0.75rem;  /* 12px */
  --space-base: 1rem;     /* 16px */
  --space-lg:   1.25rem;  /* 20px */
  --space-xl:   1.5rem;   /* 24px */
  --space-2xl:  2rem;     /* 32px */
  --space-3xl:  2.5rem;   /* 40px */
  --space-4xl:  3rem;     /* 48px */
  --space-5xl:  4rem;     /* 64px */

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 99px;   /* pills / fully rounded buttons */
  --radius-circle: 50%;  /* avatars */

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.09);
  --shadow-primary: 0 8px 24px rgba(0, 65, 255, 0.1); /* elevated primary-colored surfaces */

  /* ---------- Motion ---------- */
  --transition-fast: 0.15s;
  --transition-base: 0.18s;
  --transition-slow: 0.3s;
  --easing-standard: ease;

  /* ---------- Z-index scale ---------- */
  --z-dropdown: 100;
  --z-sticky:   999;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    9000;

  /* ---------- Breakpoints (reference only) ----------
     CSS custom properties cannot be used inside @media
     conditions, so these document the values already in
     use across the codebase for consistency when writing
     new media queries. Keep new breakpoints aligned to
     this list rather than introducing new arbitrary values. */
  /* --breakpoint-xs: 480px;  */
  /* --breakpoint-sm: 640px;  */
  /* --breakpoint-md: 768px;  */
  /* --breakpoint-lg: 900px;  */
  /* --breakpoint-xl: 1024px; */
}