/*
 * Syerra design tokens.
 *
 * Every value comes from the Arkana beta-site (ArkanaMVP/beta-site/frontend/index.css)
 * unless it's marked "added". Another Syerra site can link this file on its own and
 * get the same fonts, colors, shapes and timing.
 */

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/inter-light.woff2) format('woff2');
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/inter-bold.woff2) format('woff2');
}

:root {
    /* Color */
    --color-bg: #161617;
    --color-surface: rgba(35, 35, 35, 0.85);
    --color-border: #262626;
    --color-text: #e5e5e5;
    --color-text-soft: #c4c4c4;
    /* Links: soft at rest, bright on hover, press and for the current page */
    --color-link: var(--color-text-soft);
    --color-link-hover: var(--color-text);
    /* added: beta-site dims #c4c4c4 to 0.6 opacity, which is 4.46:1 and just misses AA. This is 5.24:1. */
    --color-text-muted: #8a8a8a;
    /* added: Arkana's menu section labels (tab sort menu), used by the footer labels. Measures 3.25:1 on the page background, under the 4.5:1 AA minimum for small text. */
    --color-label: rgba(255, 255, 255, 0.35);
    /* added: underline for links in running text */
    --color-underline: rgba(196, 196, 196, 0.4);
    --color-focus: #e8395f;

    --color-button: #e5e5e5;
    --color-button-hover: #d3d3d3;
    --color-button-active: #cacaca;
    --color-button-text: #090909;
    --color-button-border: rgba(225, 225, 225, 0.03);
    --color-button-border-hover: rgba(225, 225, 225, 0.04);

    /* Type */
    --font-sans: Inter, system-ui, sans-serif;
    --font-wordmark: 'Times New Roman', Times, serif;
    --weight-light: 300;
    --weight-bold: 700;
    --tracking-wide: 0.14em;

    --size-wordmark: clamp(2.75rem, 9vw, 4.25rem);
    --size-title: clamp(2.25rem, 7vw, 3.25rem);   /* added: page titles */
    --size-name: 1.75rem;                          /* added: product names */
    --size-lead: 16px;                             /* added: short statements */
    --size-label: 11px;                            /* added: Arkana menu section labels */
    --tracking-label: 0.08em;                      /* added: Arkana menu section labels */
    --size-button: 16px;
    --size-text: 14px;
    --size-small: 12px;

    /* Shape */
    --radius-panel: 14px;
    --radius-button: 8px;
    --shadow-raised: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12), 0 0 3px rgba(0, 0, 0, 0.7);
    /* added: the floating navbar, lifted off the page */
    --shadow-floating: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.3);
    /* added: Arkana's segmented control (share menu, blocker menu), used by the navbar links */
    --color-segment-hover: rgba(225, 225, 225, 0.10);
    --color-segment-selected: rgba(225, 225, 225, 0.14);
    --shadow-segment-hover: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12), 0 0 3px rgba(0, 0, 0, 0.7);
    --shadow-segment-selected: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12), 0 0 3px rgba(0, 0, 0, 0.3);
    --shadow-pressed: inset 0 1px 1px 0 rgba(255, 255, 255, 0), 0 0 3px rgba(0, 0, 0, 0);
    --blur-panel: 15px;
    --hairline: 1px solid var(--color-border);

    /* Space */
    --space-xs: 8px;
    --space-s: 0.8rem;
    --space-m: 1.6rem;
    --space-l: 2rem;
    --space-xl: clamp(3rem, 10vw, 4.5rem);         /* added: between page sections */
    --gutter: clamp(1rem, 5vw, 2rem);
    --width-column: 560px;

    /* Motion */
    --duration-hover: 300ms;
    --ease: ease;
    --press-scale: 0.98;
}