/* ============================================================
   Trater — Design tokens
   ============================================================ */

/* ----------------- Self-hosted fonts ----------------- */
/* Files expected in /assets/fonts/. See README for download instructions. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}

/* ----------------- Tokens ----------------- */
:root {
    /* Color — neutral */
    --c-ink:           #0F141B;   /* brand dark */
    --c-ink-soft:      #1A2230;
    --c-text:          #0F141B;
    --c-text-muted:    #4F5A6B;
    --c-text-dim:      #828B9A;
    --c-text-on-dark:  #FFFFFF;
    --c-text-on-dark-muted: #A8B0BD;

    --c-bg:            #FFFFFF;
    --c-bg-soft:       #F7F8FA;
    --c-bg-elevated:   #FBFCFD;
    --c-bg-dark:       #0F141B;
    --c-bg-dark-soft:  #1A2230;

    --c-border:        #E6E9EE;
    --c-border-strong: #CDD3DC;
    --c-border-dark:   #232C3B;

    /* Color — brand accent (use sparingly) */
    --c-accent:        #1D4ED8;
    --c-accent-hover:  #1E40AF;
    --c-accent-active: #1E3A8A;
    --c-accent-soft:   #EEF3FE;
    --c-accent-ink:    #1E3A8A;

    /* State */
    --c-success:       #16A34A;
    --c-success-soft:  #DCFCE7;
    --c-warning:       #D97706;
    --c-danger:        #DC2626;

    /* Type — families */
    --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
    --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Type — fluid scale */
    --fs-xs:    0.8125rem;    /* 13px */
    --fs-sm:    0.875rem;     /* 14px */
    --fs-base:  1rem;         /* 16px */
    --fs-md:    1.0625rem;    /* 17px */
    --fs-lg:    1.1875rem;    /* 19px */
    --fs-xl:    1.375rem;     /* 22px */
    --fs-2xl:   1.625rem;     /* 26px */
    --fs-3xl:   clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);    /* 24-36 */
    --fs-4xl:   clamp(1.75rem, 1.3rem + 2vw, 2.75rem);     /* 28-44 */
    --fs-5xl:   clamp(2rem, 1.5rem + 2.6vw, 3.75rem);      /* 32-60 */
    --fs-6xl:   clamp(2.25rem, 1.5rem + 3vw, 4.5rem);      /* 36-72 */

    /* Type — line heights */
    --lh-tight: 1.1;
    --lh-snug:  1.25;
    --lh-base:  1.55;
    --lh-relaxed: 1.7;

    /* Type — letter spacing */
    --ls-tight: -0.02em;
    --ls-snug:  -0.012em;
    --ls-base:  0;
    --ls-wide:  0.02em;
    --ls-wider: 0.08em;

    /* Spacing scale (px in name, rem in value, 1rem = 16px) */
    --sp-1:   0.25rem;   /* 4 */
    --sp-2:   0.5rem;    /* 8 */
    --sp-3:   0.75rem;   /* 12 */
    --sp-4:   1rem;      /* 16 */
    --sp-6:   1.5rem;    /* 24 */
    --sp-8:   2rem;      /* 32 */
    --sp-12:  3rem;      /* 48 */
    --sp-16:  4rem;      /* 64 */
    --sp-24:  6rem;      /* 96 */
    --sp-32:  8rem;      /* 128 */

    /* Section vertical padding */
    --section-y:        clamp(4rem, 3rem + 4vw, 7rem);   /* 64-112 */
    --section-y-tight:  clamp(3rem, 2.25rem + 3vw, 5rem);

    /* Layout */
    --container-max: 1200px;
    --container-x:   clamp(1.25rem, 0.6rem + 2vw, 2rem); /* 20-32 */

    /* Radius */
    --r-xs:   4px;
    --r-sm:   6px;   /* buttons */
    --r-md:   8px;   /* inputs */
    --r-lg:   12px;  /* cards */
    --r-xl:   16px;
    --r-pill: 999px;

    /* Borders */
    --bw-thin:   1px;
    --bw-base:   1.5px;
    --bw-thick:  2px;

    /* Shadows — very discreet */
    --sh-xs: 0 1px 2px rgba(15, 20, 27, 0.04);
    --sh-sm: 0 1px 3px rgba(15, 20, 27, 0.06);
    --sh-md: 0 4px 12px rgba(15, 20, 27, 0.05), 0 1px 2px rgba(15, 20, 27, 0.04);
    --sh-focus: 0 0 0 3px rgba(29, 78, 216, 0.25);

    /* Transitions */
    --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Breakpoints (used in CSS via media queries; kept here as reference) */
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* Z-index */
    --z-nav:    50;
    --z-overlay: 80;
    --z-modal:  100;
}