/* Design tokens. The store's colors come from the shirts: washed charcoal, the print inks, and the
   linen backdrop of the shirt photos. Earthly Lunar's own colors live in the --lunar-* group and
   appear only where Lunar is named. */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('/fonts/archivo-latin.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
        U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Grounds */
    --paper: #f5f1ea;
    --paper-white: #fffdf9;
    --linen: #e8ded4;
    --wash-mint: #e1eeda;
    --wash-warm: #ede6dc;
    --line: #dfd7cc;
    --line-strong: #c9c0b4;
    --line-input: #8a8279; /* 3:1 against paper and white, so empty fields stay findable */

    /* Washed charcoal: the shirt. Header, footer, order summary, and the ink on paper. */
    --charcoal: #2c2a2b;
    --charcoal-raised: #3a3738;
    --charcoal-line: rgba(247, 237, 216, 0.14);

    /* Ink on paper. Every text color here passes WCAG AA on --paper and --paper-white. */
    --ink: var(--charcoal);
    --ink-soft: #524c47;
    --ink-muted: #6b645d;
    --green-ink: #2a7440;
    --green-ink-hover: #1f5a31;
    --error: #b42318;

    /* Print inks, as on the shirts: text only on charcoal; on paper only as fills under
       charcoal text */
    --print-cream: #f7edd8;
    --print-cream-soft: #c9bfaf;
    --print-mint: #a4e5ab;
    --print-cyan: #78f2fb;
    --print-amber: #ecb445;

    /* Earthly Lunar's own colors, from earthly-website/COLOR-PALETTE.md. Use them only where
       Lunar is named: the Lunar band. The logo carries them everywhere else. */
    --lunar-night: #0a0e1a;
    --lunar-cyan: #00d4ff;
    --lunar-text: #f5f5f5;
    --lunar-text-soft: #a0aec0;
    --lunar-gradient-cta: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);

    /* Type */
    --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:
        ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --stretch-condensed: 72%;

    --text-display: clamp(2.5rem, 1.75rem + 3vw, 4rem);
    --text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    --text-figure: 2rem; /* the $0 total in the order summary */
    --text-h3: 1.25rem;
    --text-lead: 1.1875rem;
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-legal: 0.8125rem;

    /* Shape and depth. Shadows stay neutral. */
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(28, 26, 27, 0.08);
    --shadow-md: 0 10px 28px -12px rgba(28, 26, 27, 0.32);

    --focus-ring-color: var(--green-ink);
    --focus-ring-width: 3px;
    /* The soft ring around a focused field, from the ground's focus color */
    --focus-halo: rgba(42, 116, 64, 0.22);
    --focus-halo-on-charcoal: rgba(164, 229, 171, 0.3);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --container: 1280px;
}