/**
 * Design tokens. Milestone 5 brand update — base colors below are the
 * client-specified palette (Primary Navy #0A2342, Primary Teal #007A7A,
 * Section Background #F5F7FA, Heading #1C1C1C, Body Text #4F4F4F,
 * Highlight #FFD700, Error #EF4C4C, Link Hover #00ADEF, Soft Accent
 * #E0F7F5); every other value in each ramp is a computed tint/shade of
 * these bases so the token *structure* from Milestone 2/4 is unchanged —
 * no CSS file in this project introduces an ad hoc value outside this list.
 */

:root {
    /* Primary — Navy (#0A2342) */
    --color-primary-900: #07192E;
    --color-primary-700: #091F3A;
    --color-primary-600: #0A2342;
    --color-primary-500: #40536C;
    --color-primary-100: #DFE2E6;
    --color-primary-50:  #F0F2F4;

    /* Secondary — Teal (#007A7A) */
    --color-secondary-700: #006262;
    --color-secondary-600: #007A7A;
    --color-secondary-100: #E0F7F5;

    /* Accent — Highlight Gold (never pair -600 with white text — 1.4:1, fails) */
    --color-accent-700: #947D00;
    --color-accent-600: #FFD700;
    --color-accent-100: #FFF8D1;

    --color-success-700: #146C43;
    --color-success-600: #1E9E5A;
    --color-warning-600: #B77A00;
    /* Error (#EF4C4C) is brand-specified but only 3.62:1 on white — AA-safe
       for icons/large text only; body-size/white-on-fill text uses -700. */
    --color-danger-700:  #BA3B3B;
    --color-danger-600:  #EF4C4C;
    --color-info-700:    #0082B3;
    --color-info-600:    #00ADEF;

    /* Link Hover (#00ADEF) is brand-specified but only 2.55:1 on white —
       decorative/icon/border use only; visible link-hover TEXT uses the
       darker, AA-safe --color-link-hover-text (5.71:1) instead. */
    --color-link-hover: #00ADEF;
    --color-link-hover-text: #006E97;

    /* Neutrals — Heading/Body (#1C1C1C / #4F4F4F) */
    --color-neutral-900: #1C1C1C;
    --color-neutral-700: #4F4F4F;
    --color-neutral-500: #7B7B7B;
    --color-neutral-300: #C7C7C7;
    --color-neutral-200: #D8D8D8;
    --color-neutral-100: #E1E3E5;
    --color-neutral-50:  #F5F7FA;
    --color-white:       #FFFFFF;

    /* Typography */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Milestone 9 premium type scale — larger, more confident sizing with
       fluid clamp() on the display/heading steps so mobile never overflows
       while desktop reads as a premium B2B brand. The admin panel pins these
       back to compact values on .admin-body (assets/css/admin.css) so the
       internal tool stays dense. */
    --text-display-xl: clamp(2.75rem, 4.5vw + 1rem, 4.5rem);   /* 44 → 72 */
    --text-display-lg: clamp(2.5rem, 3.2vw + 1rem, 3.75rem);   /* 40 → 60 */
    --text-h1: clamp(2.25rem, 2.6vw + 1rem, 3.25rem);          /* 36 → 52 */
    --text-h2: clamp(1.875rem, 1.8vw + 1rem, 2.75rem);         /* 30 → 44 */
    --text-h3: 1.625rem;   /* 26 */
    --text-h4: 1.375rem;   /* 22 */
    --text-h5: 1.1875rem;  /* 19 */
    --text-body-lg: 1.25rem;    /* 20 */
    --text-body-md: 1.0625rem;  /* 17 */
    --text-body-sm: 0.9375rem;  /* 15 */
    --text-label: 0.8125rem;
    --text-caption: 0.75rem;
    --text-subtitle: clamp(1.1875rem, 0.6vw + 1rem, 1.5rem);   /* 19 → 24 (hero subtitles) */
    --text-hero: clamp(2.75rem, 4vw + 1rem, 4rem);             /* 44 → 64 (hero headlines) */

    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(18, 21, 28, 0.06), 0 1px 3px rgba(18, 21, 28, 0.08);
    --shadow-md: 0 4px 8px rgba(18, 21, 28, 0.08), 0 2px 4px rgba(18, 21, 28, 0.06);
    --shadow-lg: 0 12px 24px rgba(18, 21, 28, 0.10), 0 4px 8px rgba(18, 21, 28, 0.06);
    --shadow-focus: 0 0 0 3px rgba(15, 58, 103, 0.25);

    /* Motion */
    --duration-instant: 100ms;
    --duration-fast: 175ms;
    --duration-base: 275ms;
    --duration-slow: 500ms;
    --duration-counter: 1500ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: ease-out;

    /* Z-index */
    --z-base: 0;
    --z-header: 100;
    --z-mega-menu: 110;
    --z-dropdown: 120;
    --z-sticky-widget: 130;
    --z-modal: 200;
    --z-toast: 210;

    /* Breakpoints (referenced by JS via a mirrored constant; CSS uses literal @media values) */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    --container-lg: 1040px;
    --container-xl: 1360px;
    --container-2xl: 1400px;

    /* Icon-tile gradients — every stop is an existing brand token (never a
       new ad hoc color), combined for a premium SaaS feel on feature-card
       icon tiles. accent-600 (gold) is deliberately excluded as a background
       stop per the existing note above: it fails contrast under a white
       icon glyph. */
    --gradient-icon-1: linear-gradient(135deg, var(--color-primary-600), var(--color-info-600));
    --gradient-icon-2: linear-gradient(135deg, var(--color-secondary-600), var(--color-info-600));
    --gradient-icon-3: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-600));
    --gradient-icon-4: linear-gradient(135deg, var(--color-success-700), var(--color-secondary-600));

    /* Icons */
    --icon-size-inline: 16px;
    --icon-size-button: 20px;
    --icon-size-card: 24px;
    --icon-size-nav: 24px;
    --icon-size-large: 40px;
    --icon-stroke-width: 1.75px;
}

/**
 * Dark theme — docs/design/02_Color_System.md §2.7 marks dark mode
 * "future-ready, not launch-active." assets/js/modules/theme.js provides a
 * working toggle (system-preference default, manual override persisted to
 * localStorage) backed by this real token override, rather than leaving
 * dark mode as inert unused tokens — component CSS throughout the site
 * reads these same --color-* custom properties, so the toggle reskins the
 * whole site consistently without any component-specific dark-mode CSS.
 */
:root[data-theme="dark"] {
    --color-primary-900: #0B0D10;
    --color-primary-700: #15181D;
    --color-primary-600: #4E7EC2;
    --color-primary-500: #6B94D1;
    --color-primary-100: #23272E;
    --color-primary-50:  #1A1D22;

    --color-secondary-700: #2FB3A3;
    --color-secondary-600: #2FB3A3;
    --color-secondary-100: #1B2E2A;

    --color-accent-700: #F0B84A;
    --color-accent-600: #F0B84A;
    --color-accent-100: #3A2F16;

    --color-neutral-900: #EDEEF0;
    --color-neutral-700: #AEB2B8;
    --color-neutral-500: #7B818A;
    --color-neutral-300: #2B2F36;
    --color-neutral-200: #23262B;
    --color-neutral-100: #15181D;
    --color-neutral-50:  #0B0D10;
    --color-white:       #15181D;
}

/* Explicit light override — wins even if the OS/browser prefers dark,
   when the user has manually chosen light via the theme toggle. */
:root[data-theme="light"] {
    --color-primary-900: #07192E;
    --color-primary-700: #091F3A;
    --color-primary-600: #0A2342;
    --color-primary-500: #40536C;
    --color-primary-100: #DFE2E6;
    --color-primary-50:  #F0F2F4;
    --color-neutral-900: #1C1C1C;
    --color-neutral-700: #4F4F4F;
    --color-neutral-500: #7B7B7B;
    --color-neutral-300: #C7C7C7;
    --color-neutral-200: #D8D8D8;
    --color-neutral-100: #E1E3E5;
    --color-neutral-50:  #F5F7FA;
    --color-white:       #FFFFFF;
}