/* Astryx design system - token set (neutral theme).
 *
 * Copied from the Claude Design project this frontend was built from
 * (_ds/astryx-design-system-82ac2c95.../tokens/*.css), with one deliberate change:
 * Figtree is served from /fonts rather than fonts.googleapis.com, so rendering a page
 * never involves a third party.
 *
 * Every colour is light-dark(light, dark) and `color-scheme` picks the side, which is
 * what gives the app a dark mode for free. Never define a colour outside this file.
 */

/* ---------- Fonts ---------- */
/* Figtree ships as a variable font, so one file covers weights 300-900. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("/fonts/figtree-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;
}

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("/fonts/figtree-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Colour ---------- */
:root { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

:root {
    /* Core semantic */
    --color-accent: light-dark(#262626, #ebebeb);
    --color-accent-muted: light-dark(#f1f1f1, #262626);
    --color-neutral: light-dark(#0000000F, #FFFFFF1A);
    --color-on-accent: light-dark(#ffffff, #171717);
    --color-on-dark: #ffffff;
    --color-on-light: #171717;

    /* Backgrounds */
    --color-background-surface: light-dark(#ffffff, #262626);
    --color-background-body: light-dark(#f1f1f1, #1b1b1b);
    --color-background-card: light-dark(#ffffff, #1b1b1b);
    --color-background-popover: light-dark(#ffffff, #1b1b1b);
    --color-background-muted: light-dark(#f1f1f1, #1b1b1b);
    --color-background-inverted: light-dark(#0a0a0a, #ffffff);
    --color-background-error-inverted: light-dark(#a50c25, #ff705d);

    /* Overlays */
    --color-overlay: light-dark(#00000080, #000000CC);
    --color-overlay-hover: light-dark(#0000000D, #FFFFFF0D);
    --color-overlay-pressed: light-dark(#0000001A, #FFFFFF1A);

    /* Text */
    --color-text-primary: light-dark(#171717, #fafafa);
    --color-text-secondary: light-dark(#737373, #a3a3a3);
    --color-text-disabled: light-dark(#a3a3a3, #525252);
    --color-text-accent: light-dark(#262626, #ebebeb);

    /* Icon */
    --color-icon-accent: light-dark(#262626, #ebebeb);
    --color-icon-primary: light-dark(#171717, #fafafa);
    --color-icon-secondary: light-dark(#737373, #a3a3a3);
    --color-icon-disabled: light-dark(#a3a3a3, #525252);

    /* Status / sentiment */
    --color-success: light-dark(#007004, #9fe59b);
    --color-error: light-dark(#a50c25, #ffc6c1);
    --color-warning: light-dark(#745b00, #fdcf4f);
    --color-success-muted: light-dark(#c5e5c0, #84c9803D);
    --color-error-muted: light-dark(#facecb, #ff9e973D);
    --color-warning-muted: light-dark(#f8da9d, #deb4333D);
    --color-on-success: light-dark(#ffffff, #171717);
    --color-on-error: light-dark(#ffffff, #171717);
    --color-on-warning: #171717;

    /* Borders */
    --color-border: light-dark(#ebebeb, #FFFFFF1A);
    --color-border-emphasized: light-dark(#d4d4d4, #525252);

    /* Effects */
    --color-skeleton: light-dark(#ebebeb, #525252);
    --color-track: light-dark(#d4d4d4, #525252);
    --color-shadow: light-dark(#0000001A, #0000004D);
    --color-tint-hover: light-dark(black, white);

    /* Filled semantic stops (badges, dots) */
    --color-fill-info: light-dark(#0074e2, #6d9cfe);
    --color-fill-success: light-dark(#198100, #64af4c);
    --color-fill-warning: #ffce2f;
    --color-fill-error: light-dark(#e33f4a, #ff705d);
    --color-on-fill-info: light-dark(#ffffff, #171717);
    --color-on-fill-success: light-dark(#ffffff, #171717);
    --color-on-fill-warning: #171717;
    --color-on-fill-error: light-dark(#ffffff, #171717);

    /* Categorical hues: background / border / icon / text */
    --color-background-red: light-dark(#facecb, #ff9e973D);
    --color-border-red: light-dark(#e6bab8, #ff6f6c);
    --color-icon-red: light-dark(#89001a, #ff9e97);
    --color-text-red: light-dark(#89001a, #ffc6c1);

    --color-background-orange: light-dark(#fad0b5, #ffa2583D);
    --color-border-orange: light-dark(#e6bda2, #e2883e);
    --color-icon-orange: light-dark(#6e3500, #ffa258);
    --color-text-orange: light-dark(#6e3500, #ffc9a2);

    --color-background-yellow: light-dark(#f8da9d, #deb4333D);
    --color-border-yellow: light-dark(#e4c279, #c0990e);
    --color-icon-yellow: light-dark(#584400, #deb433);
    --color-text-yellow: light-dark(#584400, #fdcf4f);

    --color-background-green: light-dark(#c5e5c0, #84c9803D);
    --color-border-green: light-dark(#b2d1ac, #69ad67);
    --color-icon-green: light-dark(#0c5700, #84c980);
    --color-text-green: light-dark(#0c5700, #9fe59b);

    --color-background-teal: light-dark(#a5e3d6, #7ec6b83D);
    --color-border-teal: light-dark(#94d6c8, #63ab9d);
    --color-icon-teal: light-dark(#005348, #7ec6b8);
    --color-text-teal: light-dark(#005348, #99e2d3);

    --color-background-cyan: light-dark(#a3e0ef, #83c2d43D);
    --color-border-cyan: light-dark(#91d3e3, #67a7b8);
    --color-icon-cyan: light-dark(#00505f, #83c2d4);
    --color-text-cyan: light-dark(#00505f, #9edef0);

    --color-background-blue: light-dark(#c4ddfb, #9eb7ff3D);
    --color-border-blue: light-dark(#b1c9e7, #6d9cfe);
    --color-icon-blue: light-dark(#00458c, #9eb7ff);
    --color-text-blue: light-dark(#00458c, #c7d3ff);

    --color-background-purple: light-dark(#eccef3, #f297ff3D);
    --color-border-purple: light-dark(#d8bbdf, #dd74f0);
    --color-icon-purple: light-dark(#700084, #f297ff);
    --color-text-purple: light-dark(#700084, #fac1ff);

    --color-background-pink: light-dark(#fccadc, #ff99c33D);
    --color-border-pink: light-dark(#e7b7c8, #f273aa);
    --color-icon-pink: light-dark(#83004b, #ff99c3);
    --color-text-pink: light-dark(#83004b, #ffc3da);

    --color-background-gray: light-dark(#e5e5e5, #FFFFFF1A);
    --color-border-gray: light-dark(#d4d4d4, #262626);
    --color-icon-gray: light-dark(#525252, #a3a3a3);
    --color-text-gray: light-dark(#262626, #e5e5e5);

    /* Brand */
    --color-brand-blue: #225BFF;
}

/* ---------- Typography (base 14px, ratio 1.2) ---------- */
:root {
    --font-family-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-heading: var(--font-family-body);
    --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-4xs: 0.375rem;
    --font-size-3xs: 0.4375rem;
    --font-size-2xs: 0.5rem;
    --font-size-xs: 0.625rem;
    --font-size-sm: 0.75rem;
    --font-size-base: 0.875rem;
    --font-size-lg: 1.0625rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.8125rem;
    --font-size-4xl: 2.1875rem;
    --font-size-5xl: 2.625rem;

    --text-heading-1-size: var(--font-size-2xl); --text-heading-1-weight: var(--font-weight-semibold); --text-heading-1-leading: 1.3333;
    --text-heading-2-size: var(--font-size-xl); --text-heading-2-weight: var(--font-weight-semibold); --text-heading-2-leading: 1.4;
    --text-heading-3-size: var(--font-size-lg); --text-heading-3-weight: var(--font-weight-bold); --text-heading-3-leading: 1.4118;
    --text-heading-4-size: var(--font-size-base); --text-heading-4-weight: var(--font-weight-bold); --text-heading-4-leading: 1.4286;
    --text-heading-5-size: var(--font-size-sm); --text-heading-5-weight: var(--font-weight-semibold); --text-heading-5-leading: 1.6667;
    --text-heading-6-size: var(--font-size-xs); --text-heading-6-weight: var(--font-weight-semibold); --text-heading-6-leading: 1.6;

    --text-body-size: var(--font-size-base); --text-body-weight: var(--font-weight-normal); --text-body-leading: 1.4286;
    --text-large-size: var(--font-size-lg); --text-large-weight: var(--font-weight-semibold); --text-large-leading: 1.4118;
    --text-label-size: var(--font-size-base); --text-label-weight: var(--font-weight-medium); --text-label-leading: 1.4286;
    --text-code-size: var(--font-size-base); --text-code-weight: var(--font-weight-normal); --text-code-leading: 1.4286;
    --text-supporting-size: var(--font-size-sm); --text-supporting-weight: var(--font-weight-normal); --text-supporting-leading: 1.6667;
}

/* ---------- Spacing and element sizing (4px scale) ---------- */
:root {
    --spacing-0: 0px;
    --spacing-0-5: 2px;
    --spacing-1: 4px;
    --spacing-1-5: 6px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-11: 44px;
    --spacing-12: 48px;

    --size-element-sm: 28px;
    --size-element-md: 32px;
    --size-element-lg: 36px;

    --border-width: 1px;
}

/* ---------- Radius ---------- */
:root {
    --radius-none: 0.25rem;
    --radius-inner: 0.375rem;
    --radius-element: 0.625rem;
    --radius-container: 0.75rem;
    --radius-page: 1.75rem;
    --radius-full: 9999px;
}

/* ---------- Shadow ---------- */
/* Dark mode adds a 1px inset white ring so surfaces read as lit from above. */
:root {
    --shadow-low:
        0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
        0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
        inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
    --shadow-med:
        0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)),
        0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)),
        inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%));
    --shadow-high:
        0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)),
        0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)),
        inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%));

    --shadow-inset-hover: inset 0 0 0 2px #0074e24D;
    --shadow-inset-selected: inset 0 0 0 2px #0074e280;
    --shadow-inset-error: inset 0 0 0 2px #e33f4a4D;
}

/* ---------- Motion ---------- */
:root {
    --duration-fast: 125ms;
    --duration-medium: 300ms;
    --duration-slow: 700ms;
    --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}