/* ================================================================
   ASCENDED — Modernist tokens

   Replaces the retro-arcade palette entirely. Modernist is flat and
   architectural: a light ground, near-black ink, one red accent, zero
   corner radius, and 2px rules doing all the organising.

   ── Why this file carries two sets of names ──────────────────────
   The design bundle's markup reads Modernist's own tokens
   (--color-bg, --space-4, --font-heading). The app's existing
   structural CSS — base.css, layout.css, components.css, all shared
   with other brands — reads the launchpad's names (--bg, --text,
   --primary, --panel). Both have to resolve or half the page loses
   its colour.

   So Modernist's tokens are declared first as the source of truth,
   and the launchpad's names are then bound to them. One palette, two
   vocabularies, no duplicated hex values: change a Modernist token
   and the app follows.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
    /* ── Modernist: the source of truth ──────────────────────────── */
    --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);

    --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;

    --color-accent-2-100: #fff2ef;
    --color-accent-2-200: #ffe0da;
    --color-accent-2-300: #ffc4b9;
    --color-accent-2-400: #ff9784;
    --color-accent-2-500: #ef6853;
    --color-accent-2-600: #c94b39;
    --color-accent-2-700: #9e3526;
    --color-accent-2-800: #71261b;
    --color-accent-2-900: #471d16;

    --font-heading: "Archivo", system-ui, sans-serif;
    --font-heading-weight: 800;
    --font-body: "Archivo", system-ui, sans-serif;

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

    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;

    --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);

    /* ── The launchpad's vocabulary, bound to the above ───────────── */

    /* Surfaces. A light theme inverts the usual relationship: panels
       are now DARKER than the page, not lighter, so --panel maps to
       Modernist's surface rather than to a lifted grey. */
    --bg: var(--color-bg);
    --bg-alt: var(--color-neutral-100);
    --panel: var(--color-surface);
    --panel-alt: var(--color-neutral-200);
    --panel-elevated: var(--color-neutral-200);
    --surface-hover: color-mix(in srgb, var(--color-text) 7%, transparent);
    --glass: color-mix(in srgb, var(--color-bg) 92%, transparent);
    --glass-border: var(--color-divider);

    /* Text. On a light ground "muted" means less contrast, which is a
       mix toward the background — not a lighter grey picked by eye. */
    --text: var(--color-text);
    --text-muted: color-mix(in srgb, var(--color-text) 70%, transparent);
    --text-subtle: color-mix(in srgb, var(--color-text) 50%, transparent);

    /* Primary is the single red. There is no second accent in this
       system; --accent resolves to the same role on purpose. */
    --primary: var(--color-accent);
    --primary-hover: var(--color-accent-600);
    --primary-dim: var(--color-accent-700);
    --primary-soft: var(--color-accent-100);
    --primary-ring: color-mix(in srgb, var(--color-accent) 35%, transparent);
    --primary-muted: var(--color-accent-400);
    --primary-glow: var(--color-accent-200);
    --primary-glow-strong: var(--color-accent-300);

    --accent: var(--color-accent);
    --accent-soft: var(--color-accent-100);
    --accent-glow: var(--color-accent-200);

    /* Status. Modernist ships one accent, so success/warning/info are
       derived from the neutral and accent ramps rather than invented
       greens and ambers that would break the mono scheme. Danger is
       the accent itself — in a red system, red IS the alarm. */
    --success: var(--color-neutral-800);
    --success-soft: var(--color-neutral-200);
    --warning: var(--color-accent-700);
    --warning-soft: var(--color-accent-100);
    --danger: var(--color-accent);
    --danger-soft: var(--color-accent-100);
    --info: var(--color-neutral-700);
    --info-soft: var(--color-neutral-200);

    /* Borders. Modernist's rules are the structure, so these are solid
       and 2px wherever the component allows it. */
    --border: var(--color-divider);
    --border-hover: var(--color-text);
    --border-color: var(--color-divider);
    --border-subtle: var(--color-neutral-300);
    --border-strong: var(--color-text);

    --shadow-card: var(--shadow-sm);
    --shadow-inset: none;
    --glow-primary: 0 0 0 2px var(--color-accent-300);
    --glow-primary-strong: 0 0 0 2px var(--color-accent);
    --glow-btn: none;

    --sidebar-width: 0px;
    --sidebar-width-mobile: 0px;

    /* Type. The pixel face is gone; Archivo does headings and body. */
    --font-display: var(--font-heading);
    --font-sans: var(--font-body);
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --font-2xs: 11px;
    --font-xs: 12px;
    --font-sm: 13px;
    --font-md: 14px;
    --font-base: 15px;
    --font-lg: 17px;
    --font-xl: 20px;
    --font-2xl: 25px;
    --font-3xl: 32px;
    --font-4xl: 40px;
    --font-5xl: 42px;
    --font-6xl: 56px;
    --font-display-xl: 64px;

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.55;

    --tracking-display: -0.02em;
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;

    --space-2xs: var(--space-1);
    --space-xs: var(--space-2);
    --space-sm: var(--space-3);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    --radius-xl: 0px;
    --radius-2xl: 0px;
    --radius-full: 9999px;

    /* Motion. Steps() was the arcade's idea; Modernist moves plainly. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 0.12s var(--ease-out);
    --transition-base: 0.22s var(--ease-out);
    --transition-slow: 0.4s var(--ease-in-out);

    --input-height: 36px;
    --btn-height: 36px;
    --btn-height-compact: 32px;
    --navbar-height: 64px;
    --container-max: 1280px;

    --z-bg: 0;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-toast: 900;
}