/* ══════════════════════════════════════════════════════════════════════════
   usermoods — design tokens.
   Ported verbatim from the Modernist token sheet in the design handoff.
   This file is the source of truth for colour, type and spacing. Loaded by
   every page: the marketing site, the auth pages and the app shell.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --color-bg: #f3f2f2;
    --color-surface: #eae9e9;
    --color-text: #201e1d;
    --color-accent: #ec3013;
    --color-accent-2: #e15b47;
    --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

    /* Tonal ramps — one shared lightness scale, so the same step of any role
       matches the others in visual value. */
    --color-neutral-100: #f8f4f4;
    --color-neutral-200: #eae7e7;
    --color-neutral-300: #d7d3d3;
    --color-neutral-400: #bab6b6;
    --color-neutral-500: #9b9797;
    --color-neutral-600: #7d7979;
    --color-neutral-700: #605d5d;
    --color-neutral-800: #444141;
    --color-neutral-900: #2d2b2b;

    --color-accent-100: #fff2ef;
    --color-accent-200: #ffe0d9;
    --color-accent-300: #ffc4b8;
    --color-accent-400: #ff9783;
    --color-accent-500: #ff563c;
    --color-accent-600: #dd2b0f;
    --color-accent-700: #ae1800;
    --color-accent-800: #7c1405;
    --color-accent-900: #4d170e;

    /* Semantic hues for the app — feedback types, states. Held at the same
       value as the neutral ramp so they sit beside the accent without shouting. */
    --color-like: #0f7a5a;
    --color-like-100: #e6f4ef;
    --color-idea: #1c5fa8;
    --color-idea-100: #e8f0f9;
    --color-issue: #ae1800;
    --color-issue-100: #fff2ef;

    --font-heading: "Archivo", system-ui, sans-serif;
    --font-heading-weight: 800;
    --font-body: "Archivo", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* The site never rounds anything. */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;

    --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

    /* Layout */
    --page-max: 1200px;
    --page-gutter: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-2);
}

img { display: block; max-width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }