/*
 * Arteno design tokens — CLAUDE.md §9.
 *
 * Light ships now; dark is defined here so Phase 6 only has to flip the
 * attribute. Every colour used anywhere in the app is declared here.
 */

:root {
    /* ---------------------------------------------------------- typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;   /* data screens default */
    --text-md: 14px;     /* body */
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;

    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* ------------------------------------------------------------ spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* ------------------------------------------------------------- radius */
    --radius-micro: 4px;   /* badges, kbd, anything under 24px tall */
    --radius-control: 6px;
    --radius-card: 8px;
    --radius-modal: 12px;
    --radius-pill: 999px;

    /* -------------------------------------------------------- dimensions */
    --sidebar-width: 240px;
    --sidebar-rail: 64px;
    --topbar-height: 56px;
    --pageheader-height: 56px;
    --filterbar-height: 48px;
    --row-height: 36px;
    --control-height: 32px;
    --form-max-width: 960px;

    /* ------------------------------------------------------ neutral ramp */
    --grey-50: #f7f8f8;
    --grey-100: #eceeef;
    --grey-200: #dde0e2;
    --grey-300: #c5cacd;
    --grey-400: #9aa1a6;
    --grey-500: #6f787e;
    --grey-600: #545c62;
    --grey-700: #3c4347;
    --grey-800: #272c2f;
    --grey-900: #15181a;

    /* -------------------------------------------------------------- brand */
    --accent: #1f5f5b;
    --accent-hover: #184a47;
    --accent-soft: rgba(31, 95, 91, 0.08);
    --accent-softer: rgba(31, 95, 91, 0.04);
    --accent-border: rgba(31, 95, 91, 0.35);
    --accent-fg: #ffffff;

    /* ----------------------------------------------------------- semantic */
    --green: #197a4b;
    --green-bg: #e8f5ee;
    --green-border: #b6ddc7;
    --amber: #8a5a00;
    --amber-bg: #fdf3e2;
    --amber-border: #e8cf9e;
    --red: #b3261e;
    --red-bg: #fceded;
    --red-border: #eec2c0;
    --blue: #1d5fb3;
    --blue-bg: #eaf1fb;
    --blue-border: #bed4f0;

    /* ----------------------------------------------------------- surfaces
     * Three border weights, and they are not interchangeable: a hairline
     * divides the inside of a container, --border is the container's own edge,
     * --border-strong belongs to things you can click. Using one value for all
     * three is what makes an interface look flat.
     */
    --bg: #ffffff;
    --bg-sunken: #f7f8f8;
    --bg-raised: #ffffff;
    --bg-hover: var(--grey-100);
    --surface-inset: var(--grey-50);   /* table heads, modal footers */
    --hairline: var(--grey-100);       /* dividers inside a container */
    --border: var(--grey-200);         /* the edge of a container */
    --border-strong: var(--grey-300);  /* interactive edges */
    --scrim: rgba(21, 24, 26, 0.24);

    --fg: var(--grey-900);
    --fg-muted: var(--grey-600);
    --fg-subtle: var(--grey-500);
    --fg-faint: var(--grey-400);
    --fg-inverse: #ffffff;

    /* The single permitted elevation: popovers, modals, the bulk-action bar.
       Never on tables (CLAUDE.md §9). */
    --shadow: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);

    /* A filled control reads as a raised surface only when its top edge is
       lighter and its bottom edge is darker. One sheen, one pair of insets. */
    --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --inset-shade: inset 0 -1px 0 rgba(16, 24, 40, 0.10);
    --contact-shadow: 0 1px 1px rgba(16, 24, 40, 0.06);
    --btn-primary-border: #1a4f4c;
    --btn-primary-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 48%);
    --btn-shade: 0 1px 0 rgba(16, 24, 40, 0.02), inset 0 -1px 0 rgba(16, 24, 40, 0.04);

    /* Tracking tightens as type grows and opens as it shrinks. */
    --tracking-xl: -0.02em;
    --tracking-lg: -0.01em;
    --tracking-base: 0;
    --tracking-sm: 0.01em;
    --tracking-caps: 0.04em;

    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-border);

    /* Three durations, used everywhere. Anything slower feels sluggish in a
       data-entry tool; anything faster reads as a jump. */
    --t-instant: 0ms;
    --t-fast: 80ms;
    --t-base: 120ms;
    --t-slow: 160ms;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* overlay entry only */
    --transition: var(--t-base) var(--ease);
}

[data-theme="dark"] {
    --grey-50: #1b1f21;
    --grey-100: #23282b;
    --grey-200: #2f3538;
    --grey-300: #414951;
    --grey-400: #6b757c;
    --grey-500: #8f989e;
    --grey-600: #adb5ba;
    --grey-700: #c9cfd3;
    --grey-800: #e3e7e9;
    --grey-900: #f4f6f7;

    --accent: #4ba39c;
    --accent-hover: #63b8b1;
    --accent-soft: rgba(75, 163, 156, 0.12);
    --accent-softer: rgba(75, 163, 156, 0.06);
    --accent-border: rgba(75, 163, 156, 0.4);
    --accent-fg: #0d1214;

    --green: #4fbc84;
    --green-bg: #15281f;
    --green-border: #27523b;
    --amber: #d9a441;
    --amber-bg: #2a2114;
    --amber-border: #55421f;
    --red: #e4736a;
    --red-bg: #2c1817;
    --red-border: #58302d;
    --blue: #6aa5ec;
    --blue-bg: #16202e;
    --blue-border: #2c4364;

    --bg: #121618;
    --bg-sunken: #0d1113;
    --bg-raised: #1b1f21;
    --bg-hover: var(--grey-100);
    --surface-inset: var(--grey-50);
    --hairline: var(--grey-100);
    --border: var(--grey-200);
    --border-strong: var(--grey-300);
    --scrim: rgba(0, 0, 0, 0.5);

    --fg: var(--grey-900);
    --fg-muted: var(--grey-600);
    --fg-subtle: var(--grey-500);
    --fg-faint: var(--grey-400);
    --fg-inverse: #0d1214;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --btn-primary-border: #2f6b66;
    --contact-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    --btn-shade: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/*
 * Inter is self-hosted, but the .woff2 binaries are not in the repo yet —
 * see public/assets/fonts/README.md. Until they are dropped in, local() picks
 * up a system copy and the stack falls back to system-ui, so the UI is correct
 * either way.
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Inter"), local("Inter-Regular"), url("../fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local("Inter Medium"), local("Inter-Medium"), url("../fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local("Inter SemiBold"), local("Inter-SemiBold"), url("../fonts/Inter-SemiBold.woff2") format("woff2");
}