/*
 * IMTOS design tokens - the single source for both site and shop.
 * Values extracted from the Figma design (file vrsRMcm4RU4NwT0L84kE2s,
 * "Home · Strak (light)" system, chosen 2026-06-12).
 */

@font-face {
    font-family: 'Space Grotesk';
    src: url("../fonts/space-grotesk-var-kKtnXef.woff2") format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url("../fonts/hanken-grotesk-var-3Rrkxtk.woff2") format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand purples */
    --color-purple: #702080;          /* brand / logo */
    --color-purple-ui: #702283;       /* header band, buttons, links */
    --color-purple-deep: #4a155a;     /* deep band layer, dark CTA surfaces */
    --color-purple-glass: #782f93;    /* translucent glass ribbons (use w/ opacity) */
    --color-purple-mid: #8b4db8;      /* secondary ribbon */
    --color-accent: #a05bc0;          /* light accent, eyebrow squares, ribbons */
    --color-purple-tint: #efe6f2;     /* tinted surfaces */

    /* Neutrals */
    --color-ink: #1a1124;             /* near-black text */
    --color-muted: #6b6673;           /* secondary text */
    --color-steel: #6e7681;           /* technical grey */
    --color-paper: #f6f4f0;           /* warm paper surface */
    --color-card-grey: #f4f5f7;       /* cool grey card surface */
    --color-grey-band: #eef0f3;       /* full-width grey section bands */
    --color-chip-grey: #ecedf0;       /* chips / quiet pills */
    --color-tile-tint: #f1ecf6;       /* icon tile surfaces */
    --color-hairline: #e2e1e6;        /* dividers */
    --color-line-strong: #bdb5a8;     /* strong warm lines */
    --color-dot-inactive: #c4c2c9;    /* carousel dots */
    --color-surface: #ffffff;

    /* Dark (footer) surfaces */
    --color-footer-ink: #221230;
    --color-footer-muted: #b0a8b8;
    --color-footer-icon: #bdb5c4;
    --hairline-on-dark: rgba(255, 255, 255, 0.14);

    /* Content text greys (subpage system) */
    --color-body-soft: #5c5560;       /* content paragraphs */
    --color-intro: #665e6b;           /* hero-card intro text */
    --color-crumb: #8c8791;           /* breadcrumb muted */
    --color-input-bg: #f7f8fa;
    --color-placeholder: #99949e;

    /* CTA band gradient */
    --color-cta-grad-start: #3c114c;
    --gradient-cta: linear-gradient(90deg, var(--color-cta-grad-start), var(--color-purple-ui));

    /* Floating hero-card shadow */
    --shadow-hero-card: 0 18px 50px rgba(26, 13, 38, 0.22);

    /* Typography */
    --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
    --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

    /* Type scale (desktop reference, 1440) */
    --text-hero: clamp(2.375rem, 1.1rem + 2.85vw, 3.125rem);      /* 38 -> 50px */
    --text-h2: clamp(1.75rem, 1.05rem + 1.55vw, 2.125rem);        /* 28 -> 34px */
    --text-h3: clamp(1.375rem, 1.1rem + 0.6vw, 1.5rem);           /* 22 -> 24px */
    --text-card-title: 1.125rem;                                  /* 18px */
    --text-body: 1rem;                                            /* 16px */
    --text-lede: 1.03125rem;                                      /* 16.5px */
    --text-sm: 0.90625rem;                                        /* 14.5px */
    --text-xs: 0.8125rem;                                         /* 13px */
    --tracking-eyebrow: 0.0875em;                                 /* ~1.4px at 13px */

    /* Layout */
    --container-max: 1312px;
    --gutter: clamp(1.25rem, 4.45vw, 4rem);                       /* 20 -> 64px */
    --section-pad: clamp(3rem, 5vw, 4.5rem);

    /* Elevation (Shadow/Card from Figma) */
    --shadow-card: 0 2px 6px rgba(26, 23, 20, 0.06), 0 16px 32px -8px rgba(26, 23, 20, 0.05);
    --shadow-card-hover: 0 4px 10px rgba(26, 23, 20, 0.08), 0 24px 44px -10px rgba(26, 23, 20, 0.1);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 180ms;
    --duration-base: 320ms;
    --duration-slow: 650ms;

    /* Back-compat aliases (M1 placeholders; shop still references these) */
    --color-brand: var(--color-purple);
    --color-brand-strong: var(--color-purple-deep);
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 2rem;
}