/* Open Theory Labs design tokens: the single source of truth for colour, space, shape and motion.
 *
 * Modelled on the Geist design system (vercel.com/geist): two backgrounds, a 10-step neutral scale
 * with fixed roles, and one accent scale. Our neutrals are warm instead of cool, and our accent is
 * red. Components must use the semantic names (--color-*, --surface-*, --border-*) and never a hex
 * value. Docs: docs/design-system.md. Loaded before every other stylesheet.
 */
:root {
    /* ---- Backgrounds (Geist: Background 1 / 2) ---- */
    --background-1: #fcfaf8;          /* page */
    --background-2: #f5f3f0;          /* secondary areas, used sparingly */

    /* ---- Neutral scale (warm gray). Roles follow Geist:
          1-3 component backgrounds, 4-6 borders, 7-8 high-contrast backgrounds, 9-10 text and icons ---- */
    --gray-1: #eceae8;                /* default component background (cards) */
    --gray-2: #e5e3e0;                /* hover */
    --gray-3: #dcdad7;                /* active */
    --gray-4: #d7d6d4;                /* default border / hairline */
    --gray-5: #c9c8c6;                /* hover border */
    --gray-6: #b3b2b0;                /* active border, text on dark when quiet */
    --gray-7: #222222;                /* high-contrast background (ink) */
    --gray-8: #3a3a39;                /* hover on gray-7 */
    --gray-9: #636260;                /* secondary text and icons (AA on background-1) */
    --gray-10: #222222;               /* primary text and icons */
    --gray-text-2: #464645;           /* body copy: between primary and secondary */
    --gray-on-dark-muted: #9a9997;    /* secondary text on gray-7 */

    /* ---- Accent: red ---- */
    --red-1: #fbeceb;                 /* tint background */
    --red-4: #efb8b4;                 /* border on tint */
    --red-7: #cc2222;                 /* solid accent: highlight, wordmark accent, links on hover */
    --red-8: #b01c1c;                 /* hover */
    --red-9: #a31b1b;                 /* accent text on light */

    /* ---- Status colours (admin screens, form feedback) ---- */
    --green-7: #3f7d4e;   --green-1: #dcebdf;   --green-9: #2c5a37;
    --amber-7: #a8741a;   --amber-1: #f6ead2;
    --purple-7: #7a6a8a;  --purple-1: #e6e0ec;

    /* ---- Supporting hues: used only for the studio painpoints, service panels and small marks ---- */
    --hue-coral: #ffa69e;
    --hue-yellow: #ffef9e;
    --hue-lilac: #beb6f2;
    --hue-mint: #8ae2ce;
    --hue-sky: #a3e7f0;
    --service-1: #222222;             /* Product Strategy & Discovery (dark) */
    --service-2: #1f2d1d;             /* Software Architecture & Development (dark) */
    --service-3: #cd8dbd;             /* Applied AI & Intelligent Systems */
    --service-4: #eddfee;             /* Cloud Platforms & Modernization */
    --service-5: #b7b39c;             /* Performance & Reliability */

    /* ---- Semantic colours: what components use ---- */
    --color-bg: var(--background-1);
    --color-bg-alt: var(--background-2);
    --color-text: var(--gray-10);
    --color-text-body: var(--gray-text-2);
    --color-text-secondary: var(--gray-9);
    --color-text-inverse: var(--background-1);
    --color-text-inverse-secondary: var(--gray-on-dark-muted);
    --color-on-accent: #ffffff;
    --color-accent: var(--red-7);
    --color-accent-hover: var(--red-8);
    --surface-1: var(--gray-1);       /* cards */
    --surface-1-hover: var(--gray-2);
    --surface-1-active: var(--gray-3);
    --surface-inverse: var(--gray-7);  /* dark bands, footer, primary buttons */
    --surface-inverse-hover: var(--gray-8);
    --surface-glass: color-mix(in srgb, var(--background-1) 82%, transparent); /* header card and menu: same colour as the page */
    --border-1: var(--gray-4);
    --border-1-hover: var(--gray-5);
    --border-1-active: var(--gray-6);
    --border-strong: var(--gray-10);
    --border-inverse: #555555;         /* hairlines on dark bands */
    --focus-ring: var(--red-7);

    /* ---- Space: 4px base ---- */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
    --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;     --space-10: 2.5rem;
    --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;

    /* ---- Shape ---- */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;               /* cards */
    --radius-pill: 999px;              /* buttons, tags */

    /* ---- Motion ---- */
    --ease-expo: cubic-bezier(.19, 1, .22, 1);
    --ease-gleasing: cubic-bezier(.4, 0, 0, 1);
    --ease-standard: cubic-bezier(.22, 1, .36, 1);
    --duration-fast: .2s;
    --duration-base: .4s;
    --duration-slow: .8s;

    /* ---- Layout ---- */
    --container: 1200px;
    --gutter: 1rem;
}
@media (min-width: 48em) { :root { --gutter: 2.5rem; } }

/* Accessible keyboard focus everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }