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

@layer tokens {
  :root {

    --navy-900: #061120;
    --navy-800: #09182D;
    --navy-700: #0B1F3A;
    --navy-600: #133058;
    --navy-300: #8FA2BC;
    --navy-100: #E9EDF1;

    --orange-600: #B44B0E;
    --orange-500: #EE6F25;
    --orange-400: #E98E58;
    --orange-100: #F6E1D5;

    --ink:      #12181F;
    --gray-700: #3A4149;
    --gray-500: #6B7280;
    --gray-200: #E2E5EA;
    --gray-50:  #F7F8FA;
    --white:    #FFFFFF;

    --color-bg:                var(--white);
    --color-bg-subtle:         var(--gray-50);
    --color-bg-brand:          var(--navy-700);
    --color-bg-brand-deep:     var(--navy-900);
    --color-bg-accent-soft:    var(--orange-100);
    --color-surface:           var(--white);

    --color-text:              var(--ink);
    --color-text-muted:        var(--gray-500);
    --color-text-invert:       var(--white);
    --color-text-invert-muted: var(--navy-300);

    --color-brand:             var(--navy-700);
    --color-brand-strong:      var(--navy-900);

    --color-accent:            var(--orange-500);
    --color-accent-strong:     var(--orange-600);
    --color-accent-text:       var(--orange-600);
    --color-accent-on-dark:    var(--orange-400);

    --color-border:            var(--gray-200);
    --color-border-strong:     var(--gray-500);
    --color-border-invert:     rgb(255 255 255 / 0.18);
    --color-focus:             var(--orange-500);

    --color-danger:            #B3261E;
    --color-success:           #1B6B3A;

    --font-heading: "Archivo", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono:    ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   clamp(1.0625rem, 0.35vw + 0.98rem, 1.125rem);
    --fs-lg:   clamp(1.25rem,   0.9vw  + 1.05rem, 1.5rem);
    --fs-xl:   clamp(1.5rem,    1.5vw  + 1.15rem, 2rem);
    --fs-2xl:  clamp(1.875rem,  2.4vw  + 1.25rem, 2.75rem);
    --fs-3xl:  clamp(2.25rem,   4vw    + 1.2rem,  3.75rem);

    --lh-tight: 1.15;
    --lh-snug:  1.3;
    --lh-base:  1.6;

    --ls-tight: -0.02em;
    --ls-wide:   0.08em;

    --fw-regular:  400;
    --fw-semibold: 600;
    --fw-bold:     700;

    --measure: 68ch;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;

    --section-y:        clamp(3rem, 8vw, 7rem);
    --gutter:           clamp(1rem, 4vw, 2rem);
    --container-max:    72rem;
    --container-narrow: 44rem;

    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(10 26 47 / 0.06);
    --shadow-md: 0 4px 12px rgb(10 26 47 / 0.08);
    --shadow-lg: 0 12px 32px rgb(10 26 47 / 0.12);

    --dur-fast: 150ms;
    --dur-base: 250ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

    --focus-ring:   3px;
    --focus-offset: 2px;
    --tap-min:      44px;

    --z-header: 100;
    --z-menu:   200;
  }

}