@layer reset, tokens, base, layout, components, utilities;

/* Breakpoint convention used throughout (documented, not stored as custom
   properties — custom properties cannot be read inside @media conditions):
   480 / 768 / 1024 / 1280 */

@layer tokens {
  :root {
    /* Raw palette — bright, cool-toned, blue accent with moderately more
       presence than a bare hairline. Gold is reserved exclusively for the
       logo mark; it never competes with blue as a second loud accent. */
    --color-ink: #181B2A;
    --color-paper: #F6F9FD;
    --color-white: #FFFFFF;
    --color-mist: #EAF1F8;
    --color-blue-100: #E3F1FC;
    --color-blue-300: #A9D7F5;
    --color-blue-500: #5DAEE8;
    --color-blue-700: #1971B8;
    --color-blue-900: #103F63;
    --color-gold: #B5883A;
    --color-warm-grey: #5B6570;

    /* Semantic aliases — components reference role, never hex */
    --color-bg: var(--color-paper);
    --color-surface: var(--color-white);
    --color-surface-tint: var(--color-blue-100);
    --color-text: var(--color-ink);
    --color-text-muted: var(--color-warm-grey);
    --color-accent: var(--color-blue-700);
    --color-accent-soft: var(--color-blue-500);
    --color-accent-wash: var(--color-blue-100);
    --color-accent-gold: var(--color-gold);
    --color-inverse-bg: var(--color-ink);
    --color-inverse-text: var(--color-paper);
    --gradient-accent: linear-gradient(135deg, var(--color-blue-500), var(--color-blue-700));
    --gradient-wash: radial-gradient(60% 60% at 80% 20%, color-mix(in srgb, var(--color-blue-300) 45%, transparent), transparent 70%),
      radial-gradient(50% 50% at 15% 85%, color-mix(in srgb, var(--color-blue-500) 25%, transparent), transparent 70%);

    /* Type */
    --font-display: "Space Grotesk", sans-serif;
    --font-body: "Manrope", sans-serif;

    --text-display-xl: clamp(2.75rem, 1.9rem + 4vw, 6.75rem);
    --text-display-lg: clamp(2.25rem, 1.65rem + 3vw, 4.25rem);
    --text-display-md: clamp(1.75rem, 1.45rem + 1.5vw, 2.6rem);
    --text-display-sm: clamp(1.375rem, 1.2rem + 0.8vw, 1.8rem);
    --text-body-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
    --text-body: 1rem;
    --text-caption: 0.75rem;

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.65;

    --tracking-wide: 0.1em;
    --tracking-wider: 0.2em;

    /* Spacing scale (8px based) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;
    --space-16: 7rem;

    --space-section-y: clamp(4rem, 3rem + 6vw, 8rem);

    /* Layout */
    --container-max: 1280px;
    --container-pad: clamp(1.25rem, 0.8rem + 3vw, 3rem);

    /* Motion */
    --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-reveal: 600ms;

    /* Misc */
    --hairline: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    --hairline-inverse: 1px solid color-mix(in srgb, var(--color-paper) 20%, transparent);
    --hairline-gold: 1px solid color-mix(in srgb, var(--color-gold) 55%, transparent);
    --radius-sm: 4px;
    --radius-md: 10px;
    --shadow-soft: 0 20px 45px -25px color-mix(in srgb, var(--color-blue-900) 35%, transparent);
  }
}