/* ============================================================================
   MITCON Credensia — Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth. Every component CSS file references these via var().
   NEVER hardcode hex colors, pixel values, or font sizes outside this file.
   ============================================================================ */

:root {
  /* ==========================================================================
     1. BRAND COLORS (extracted from logo SVG)
     ==========================================================================
     All combinations on white background verified for WCAG 2.1 AA:
     - Primary on white      = 6.78:1  (AAA Large, AA Normal)
     - Dark on white         = 16.10:1 (AAA Normal)
     - Accent Orange on white = 3.42:1  (AA Large only — use for >18px text or
                                          decorative; pair with --color-primary
                                          for body text contrast)
     - Grey on white         = 3.18:1  (AA Large only — use for borders, hints)
     ========================================================================== */
  --color-primary:           #1C588B;  /* Deep corporate blue (logo dominant) */
  --color-primary-rgb:       28, 88, 139;
  --color-primary-dark:      #154169;  /* Hover/active states */
  --color-primary-light:     #2A6FA8;  /* Subtle backgrounds, hover lifts */
  --color-primary-lighter:   #E6EEF5;  /* Section backgrounds, alert backgrounds */

  --color-accent:            #EF7A1B;  /* Logo orange — CTAs, highlights */
  --color-accent-rgb:        239, 122, 27;
  --color-accent-dark:       #C5611100; /* unused — explicit fallback below */
  --color-accent-hover:      #D66510;  /* Darker orange for hover (AA on white: 4.51:1) */
  --color-accent-light:      #FDF1E6;  /* Soft background for accent sections */

  --color-dark:              #252422;  /* Primary text (logo dark) */
  --color-dark-rgb:          37, 36, 34;
  --color-grey:              #9D9E9E;  /* Logo grey — borders, secondary */
  --color-grey-light:        #E5E7EB;  /* Dividers, card borders */
  --color-grey-lighter:      #F3F4F6;  /* Subtle backgrounds */
  --color-bg-light:          #F8FAFC;  /* Page section alt-backgrounds */

  /* Body & UI base */
  --color-bg:                #FFFFFF;
  --color-text:              #252422;             /* 16.1:1 on white — AAA */
  --color-text-secondary:    #4B5563;             /* 7.59:1 on white — AAA */
  --color-text-muted:        #6B7280;             /* 5.74:1 on white — AA */
  --color-text-on-primary:   #FFFFFF;             /* on primary blue: 6.78:1 — AA */
  --color-text-on-accent:    #FFFFFF;             /* on orange: 3.42:1 — large only */

  /* Semantic colors (status, alerts, forms) */
  --color-success:           #15803D;             /* 5.13:1 on white — AA */
  --color-success-bg:        #DCFCE7;
  --color-warning:           #B45309;             /* 5.86:1 on white — AA */
  --color-warning-bg:        #FEF3C7;
  --color-danger:            #B91C1C;             /* 7.04:1 on white — AAA */
  --color-danger-bg:         #FEE2E2;
  --color-info:              #1E40AF;             /* 8.59:1 on white — AAA */
  --color-info-bg:           #DBEAFE;

  /* Focus ring — WCAG 2.4.7 + 1.4.11 (3:1 minimum against background) */
  --color-focus-ring:        #2563EB;             /* 6.27:1 on white — AAA */
  --focus-ring-width:        3px;
  --focus-ring-offset:       2px;
  --focus-ring-style:        solid;

  /* Borders & shadows */
  --color-border:            #D1D5DB;
  --color-border-strong:     #9CA3AF;
  --shadow-sm:               0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:               0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg:               0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl:               0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --shadow-primary:          0 8px 24px -8px rgba(28, 88, 139, 0.40);

  /* ==========================================================================
     2. TYPOGRAPHY
     ==========================================================================
     System font stack — no web fonts in Phase 1 (zero render delay, no FOUT,
     no GDPR concern). Phase 2+ may add Inter/Manrope via self-hosted.
     ========================================================================== */
  --font-sans:               'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                             'Helvetica Neue', Arial, sans-serif;
  --font-serif:              Georgia, 'Times New Roman', Times, serif;
  --font-mono:               ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* Modular type scale — 1.250 (Major Third) ratio, mobile-first */
  --fs-xs:       0.75rem;    /* 12px — captions, fine print */
  --fs-sm:       0.875rem;   /* 14px — small body, form hints */
  --fs-base:     1rem;       /* 16px — body (NEVER below this for body) */
  --fs-md:       1.125rem;   /* 18px — lead paragraphs */
  --fs-lg:       1.25rem;    /* 20px — h6 / large body */
  --fs-xl:       1.5rem;     /* 24px — h5 */
  --fs-2xl:      1.875rem;   /* 30px — h4 */
  --fs-3xl:      2.25rem;    /* 36px — h3 */
  --fs-4xl:      3rem;       /* 48px — h2 */
  --fs-5xl:      3.75rem;    /* 60px — h1 / hero */

  /* Line heights */
  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.6;        /* WCAG 1.4.12 — minimum 1.5 for body text */
  --lh-relaxed:  1.75;
  --lh-loose:    2;

  /* Letter spacing */
  --ls-tight:    -0.025em;
  --ls-normal:   0;
  --ls-wide:     0.025em;
  --ls-wider:    0.05em;
  --ls-widest:   0.1em;

  /* Font weights */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ==========================================================================
     3. SPACING (8-point grid system)
     ==========================================================================
     Used for margins, padding, gaps. Multiples of 4px give perfect alignment.
     ========================================================================== */
  --space-0:     0;
  --space-1:     0.25rem;    /*  4px */
  --space-2:     0.5rem;     /*  8px */
  --space-3:     0.75rem;    /* 12px */
  --space-4:     1rem;       /* 16px */
  --space-5:     1.25rem;    /* 20px */
  --space-6:     1.5rem;     /* 24px */
  --space-8:     2rem;       /* 32px */
  --space-10:    2.5rem;     /* 40px */
  --space-12:    3rem;       /* 48px */
  --space-16:    4rem;       /* 64px */
  --space-20:    5rem;       /* 80px */
  --space-24:    6rem;       /* 96px */
  --space-32:    8rem;       /* 128px */

  /* Section padding (vertical) — adapts at breakpoints below */
  --section-py:           var(--space-12);    /* mobile */
  --section-py-lg:        var(--space-20);    /* desktop */

  /* ==========================================================================
     4. LAYOUT
     ==========================================================================  */
  --container-max:        1280px;
  --container-px:         var(--space-4);     /* mobile gutter — 16px */
  --container-px-md:      var(--space-6);     /* tablet  — 24px */
  --container-px-lg:      var(--space-8);     /* desktop — 32px */

  /* Max widths for content-readable text (WCAG 1.4.8 — max 80 chars) */
  --measure-narrow:       38ch;
  --measure-normal:       65ch;
  --measure-wide:         80ch;

  /* ==========================================================================
     5. RADII
     ==========================================================================  */
  --radius-none:    0;
  --radius-sm:      0.25rem;   /*  4px */
  --radius-md:      0.5rem;    /*  8px */
  --radius-lg:      0.75rem;   /* 12px — default for cards */
  --radius-xl:      1rem;      /* 16px */
  --radius-2xl:     1.5rem;    /* 24px */
  --radius-full:    9999px;    /* pills, avatars */

  /* ==========================================================================
     6. MOTION
     ==========================================================================
     All durations < 500ms. WCAG 2.3.1 — no flashing > 3 times/sec.
     ========================================================================== */
  --duration-fast:        150ms;
  --duration-base:        250ms;
  --duration-slow:        400ms;

  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:          cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-base:      all var(--duration-base) var(--ease-out);
  --transition-color:     color var(--duration-fast) var(--ease-out),
                          background-color var(--duration-fast) var(--ease-out),
                          border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-spring);

  /* ==========================================================================
     7. Z-INDEX SCALE (avoid magic numbers)
     ==========================================================================  */
  --z-below:           -1;
  --z-base:            0;
  --z-content:         1;
  --z-dropdown:        100;
  --z-sticky:          200;
  --z-announcement:    250;
  --z-navbar:          300;
  --z-overlay:         400;
  --z-modal:           500;
  --z-popover:         600;
  --z-tooltip:         700;
  --z-toast:           800;
  --z-skip-link:       900;     /* MUST be highest — accessibility skip-link */

  /* ==========================================================================
     8. COMPONENT-LEVEL TOKENS (used by navbar/footer/buttons in later steps)
     ==========================================================================  */
  --navbar-height-mobile:     64px;
  --navbar-height-desktop:    80px;
  --announcement-height:      40px;

  --btn-py:                   var(--space-3);
  --btn-px:                   var(--space-6);
  --btn-radius:               var(--radius-md);
  --btn-font-weight:          var(--fw-semibold);

  --card-padding:             var(--space-6);
  --card-radius:              var(--radius-lg);
  --card-shadow:              var(--shadow-md);

  --input-height:             44px;        /* WCAG 2.5.5 — 44×44 px touch target */
  --input-px:                 var(--space-4);
  --input-radius:             var(--radius-md);
  --input-border:             1px solid var(--color-border);
  --input-border-focus:       1px solid var(--color-primary);
}

/* ============================================================================
   RESPONSIVE TOKEN OVERRIDES
   ----------------------------------------------------------------------------
   Mobile-first: base tokens above are mobile defaults. We scale UP from there.
   ============================================================================ */

/* Tablet — 768px+ */
@media (min-width: 48em) {
  :root {
    --container-px:    var(--container-px-md);
    --fs-4xl:          3.5rem;     /* 56px — bigger h2 on tablet */
    --fs-5xl:          4.5rem;     /* 72px — bigger h1 */
  }
}

/* Desktop — 1024px+ */
@media (min-width: 64em) {
  :root {
    --container-px:    var(--container-px-lg);
    --section-py:      var(--section-py-lg);
  }
}

/* ============================================================================
   ACCESSIBILITY MEDIA QUERIES — Apply to tokens themselves
   ============================================================================ */

/* WCAG 2.3.3 — Reduce motion if user prefers it */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
  }
}

/* User has dark-mode preference — placeholder, full theme in later phase */
@media (prefers-color-scheme: dark) {
  :root {
    /* Phase 1 keeps light-only. Future dark theme overrides will live here. */
    /* color-scheme: dark; */
  }
}

/* High-contrast mode (Windows) — strengthen focus + borders */
@media (prefers-contrast: more) {
  :root {
    --color-border:        #000000;
    --color-border-strong: #000000;
    --focus-ring-width:    4px;
  }
}