@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-latin-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

@layer vendor, tokens, reset, shell, components, domain, responsive;

@layer tokens {
    :root,
    :root[data-casey-theme="light"] {
        color-scheme: light;

        --casey-bg: #f5f7fb;
        --casey-surface: #ffffff;
        --casey-surface-raised: #ffffff;
        --casey-surface-2: #f7f9fc;
        --casey-surface-3: #eaf2ff;
        --casey-border: #d7dee9;
        --casey-control-border-strong: #76869f;
        --casey-border-soft: #e7ebf2;
        --casey-text: #1d2939;
        --casey-text-secondary: #526176;
        --casey-muted: #53647c;
        --casey-blue: #225ca8;
        --casey-blue-deep: #174a90;
        --casey-blue-light: #eaf2ff;
        --casey-teal: #1f61b4;
        --casey-teal-deep: #174a90;
        --casey-teal-bright: #225ca8;
        --casey-logo-c: var(--casey-blue);
        --casey-logo-tick: var(--casey-teal);
        --casey-primary: var(--casey-blue);
        --casey-accent: var(--casey-teal);
        --casey-success: #207a4a;
        --casey-warning: #9a5a08;
        --casey-error: #b42318;
        --casey-on-accent: #ffffff;
        --casey-primary-button-bg: var(--casey-blue);
        --casey-primary-button-hover-bg: var(--casey-blue-deep);
        --casey-primary-button-active-bg: color-mix(in srgb, var(--casey-blue-deep) 88%, black);
        --casey-primary-button-text: var(--casey-on-accent);

        --casey-shell-bg: #1d2939;
        --casey-shell-text: #f0f4fa;
        --casey-shell-muted: #bdc8d8;
        --casey-shell-surface: #29364a;
        --casey-shell-border: #43526a;
        --casey-topbar-bg: rgba(255, 255, 255, 0.96);
        --casey-input-bg: #ffffff;
        --casey-panel-bg: #ffffff;
        --casey-panel-solid: #ffffff;
        --casey-table-head: #f7f9fc;
        --casey-table-hover-bg: color-mix(in srgb, var(--casey-blue) 8%, var(--casey-surface));
        --casey-card-subtle: rgba(29, 41, 57, 0.035);
        --casey-selected-bg: #eaf2ff;
        --casey-selected-border: #bfd4f3;
        --casey-focus: #76869f;
        --casey-control-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231d2939' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
        --casey-button-secondary-hover: color-mix(in srgb, var(--casey-blue) 8%, var(--casey-surface));
        --casey-internal-note-bg: #fff5e5;
        --casey-checkbox-bg: #ffffff;
        --casey-checkbox-border: #68788f;
        --casey-checkbox-checked-outline: var(--casey-teal);
        --casey-control-checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2.2 6.1 2.3 2.3 5.3-5.3'/%3E%3C/svg%3E");

        --casey-lifecycle-new-foreground: #1e40af;
        --casey-lifecycle-new-surface: #dbeafe;
        --casey-lifecycle-active-foreground: #166534;
        --casey-lifecycle-active-surface: #dcfce7;
        --casey-lifecycle-waiting-foreground: #92400e;
        --casey-lifecycle-waiting-surface: #fef3c7;
        --casey-lifecycle-planned-foreground: #6b21a8;
        --casey-lifecycle-planned-surface: #f3e8ff;
        --casey-lifecycle-completed-foreground: #374151;
        --casey-lifecycle-completed-surface: #e5e7eb;
        --casey-lifecycle-closed-foreground: #6f4e37;
        --casey-lifecycle-closed-surface: #f5ebe0;

        --casey-priority-urgent-foreground: #b42318;
        --casey-priority-urgent-surface: #fef3f2;
        --casey-priority-high-foreground: #b54708;
        --casey-priority-high-surface: #fffaeb;
        --casey-priority-normal-foreground: #475569;
        --casey-priority-normal-surface: #f1f5f9;
        --casey-priority-low-foreground: #64748b;
        --casey-priority-low-surface: #f8fafc;

        --casey-category-question-fill: #eff6ff;
        --casey-category-question-border: #93c5fd;
        --casey-category-question-text: #1d4ed8;
        --casey-category-issue-fill: #fff3f5;
        --casey-category-issue-border: #f0a0af;
        --casey-category-issue-text: #b83a55;
        --casey-category-feature-fill: #f5f3ff;
        --casey-category-feature-border: #c4b5fd;
        --casey-category-feature-text: #6d28d9;
        --casey-category-service-request-fill: #f0fdfa;
        --casey-category-service-request-border: #7dd3c7;
        --casey-category-service-request-text: #0f766e;
        --casey-category-neutral-fill: var(--casey-card-subtle);
        --casey-category-neutral-border: var(--casey-border);
        --casey-category-neutral-text: var(--casey-text-secondary);

        /* Compatibility aliases used by existing domain styles. */
        --casey-green: var(--casey-success);
        --casey-yellow: var(--casey-warning);
        --casey-orange: var(--casey-warning);
        --casey-red: var(--casey-error);
        --casey-purple: #6750a4;
    }

    :root[data-casey-theme="dark"] {
        color-scheme: dark;

        --casey-bg: #101827;
        --casey-surface: #182233;
        --casey-surface-raised: #182233;
        --casey-surface-2: #202c3e;
        --casey-surface-3: #193b68;
        --casey-border: #344357;
        --casey-control-border-strong: #70829c;
        --casey-border-soft: #2a3950;
        --casey-text: #f0f4fa;
        --casey-text-secondary: #bdc8d8;
        --casey-muted: #93a3b8;
        --casey-blue: #8ab7ff;
        --casey-blue-deep: #b5d2ff;
        --casey-blue-light: #193b68;
        --casey-teal: #8ab7ff;
        --casey-teal-deep: #b5d2ff;
        --casey-teal-bright: #8ab7ff;
        --casey-logo-c: var(--casey-blue);
        --casey-logo-tick: var(--casey-teal);
        --casey-primary: var(--casey-blue);
        --casey-accent: var(--casey-teal);
        --casey-success: #5ece92;
        --casey-warning: #f2bc67;
        --casey-error: #ff9690;
        --casey-on-accent: #101827;
        --casey-primary-button-bg: var(--casey-blue);
        --casey-primary-button-hover-bg: var(--casey-blue-deep);
        --casey-primary-button-active-bg: color-mix(in srgb, var(--casey-blue-deep) 88%, #101827);
        --casey-primary-button-text: #101827;

        --casey-shell-bg: #101827;
        --casey-shell-text: #f0f4fa;
        --casey-shell-muted: #bdc8d8;
        --casey-shell-surface: #202c3e;
        --casey-shell-border: #344357;
        --casey-topbar-bg: rgba(16, 24, 39, 0.96);
        --casey-input-bg: #182233;
        --casey-panel-bg: #182233;
        --casey-panel-solid: #182233;
        --casey-table-head: #202c3e;
        --casey-table-hover-bg: color-mix(in srgb, var(--casey-blue) 12%, transparent);
        --casey-card-subtle: rgba(255, 255, 255, 0.035);
        --casey-selected-bg: #193b68;
        --casey-selected-border: #426487;
        --casey-focus: #b5d2ff;
        --casey-control-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f0f4fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
        --casey-button-secondary-hover: color-mix(in srgb, var(--casey-blue) 12%, var(--casey-surface));
        --casey-internal-note-bg: #493208;
        --casey-checkbox-bg: #182233;
        --casey-checkbox-border: #bdc8d8;
        --casey-checkbox-checked-outline: var(--casey-blue);
        --casey-control-checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23101827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2.2 6.1 2.3 2.3 5.3-5.3'/%3E%3C/svg%3E");

        --casey-lifecycle-new-foreground: #93c5fd;
        --casey-lifecycle-new-surface: #1e3a8a;
        --casey-lifecycle-active-foreground: #86efac;
        --casey-lifecycle-active-surface: #065f46;
        --casey-lifecycle-waiting-foreground: #fcd34d;
        --casey-lifecycle-waiting-surface: #78350f;
        --casey-lifecycle-planned-foreground: #d8b4fe;
        --casey-lifecycle-planned-surface: #581c87;
        --casey-lifecycle-completed-foreground: #f3f4f6;
        --casey-lifecycle-completed-surface: #4b5563;
        --casey-lifecycle-closed-foreground: #e6d5c3;
        --casey-lifecycle-closed-surface: #4a3b32;

        --casey-priority-urgent-foreground: #fda29b;
        --casey-priority-urgent-surface: #5c1d1a;
        --casey-priority-high-foreground: #fdb022;
        --casey-priority-high-surface: #5c3a10;
        --casey-priority-normal-foreground: #cbd5e1;
        --casey-priority-normal-surface: #334155;
        --casey-priority-low-foreground: #cbd5e1;
        --casey-priority-low-surface: #29364a;

        --casey-category-question-fill: #172f52;
        --casey-category-question-border: #3b73ad;
        --casey-category-question-text: #9bcaff;
        --casey-category-issue-fill: #42202a;
        --casey-category-issue-border: #9f5264;
        --casey-category-issue-text: #ffb1bf;
        --casey-category-feature-fill: #33254f;
        --casey-category-feature-border: #7661a8;
        --casey-category-feature-text: #d7c2ff;
        --casey-category-service-request-fill: #173f3c;
        --casey-category-service-request-border: #3c827a;
        --casey-category-service-request-text: #8de3d7;
        --casey-category-neutral-fill: var(--casey-surface-2);
        --casey-category-neutral-border: var(--casey-control-border-strong);
        --casey-category-neutral-text: var(--casey-text-secondary);

        --casey-green: var(--casey-success);
        --casey-yellow: var(--casey-warning);
        --casey-orange: var(--casey-warning);
        --casey-red: var(--casey-error);
        --casey-purple: #b7a6ff;
    }

    :root {
        --casey-focus-ring-width: 2px;
        --casey-focus-ring-offset: 1px;

        --casey-font-sans: "Inter", system-ui, "Segoe UI", sans-serif;
        --casey-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        --casey-font-weight-body: 400;
        --casey-font-weight-meta: 500;
        --casey-font-weight-link: 500;
        --casey-font-weight-pill: 400;
        --casey-font-weight-heading: 600;
        --casey-font-weight-title: 700;

        --casey-font-title: clamp(1.75rem, 1.55rem + 0.5vw, 2rem);
        --casey-line-title: 1.18;
        --casey-font-heading: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
        --casey-line-heading: 1.4;
        --casey-font-body: 0.875rem;
        --casey-line-body: 1.43;
        --casey-font-substantial: 1rem;
        --casey-line-substantial: 1.55;
        --casey-font-code: 0.875rem;
        --casey-line-code: 1.55;
        --casey-font-min: 0.75rem;
        --casey-font-meta: 0.8125rem;
        --casey-line-meta: 1.38;
        --casey-font-chip: 0.8125rem;
        --casey-line-chip: 1.3;

        --casey-button-primary-font-size: 0.83rem;
        --casey-button-primary-padding-block: 0.5rem;
        --casey-button-primary-padding-inline: 0.75rem;
        --casey-button-secondary-font-size: 0.73rem;
        --casey-button-secondary-padding-block: 0.33rem;
        --casey-button-secondary-padding-inline: 0.5rem;
        --casey-button-tall-height: 2.35rem;
        --casey-button-compact-height: 1.9rem;
        --casey-button-primary-label: var(--casey-primary-button-text);
        --casey-button-secondary-bg: var(--casey-input-bg);
        --casey-button-secondary-label: var(--casey-text);
        --casey-button-secondary-border: var(--casey-control-border-strong);
        --casey-button-secondary-hover-bg: var(--casey-surface-2);
        --casey-button-secondary-hover-border: var(--casey-blue);

        --casey-space-1: 0.25rem;
        --casey-space-2: 0.5rem;
        --casey-space-3: 0.75rem;
        --casey-space-4: 1rem;
        --casey-space-5: 1.25rem;
        --casey-space-6: 1.5rem;
        --casey-space-8: 2rem;

        --casey-control-height: 2.4rem;
        --casey-control-compact-height: 2rem;
        --casey-control-padding-inline: 0.625rem;
        --casey-control-compact-padding-inline: 0.5rem;
        --casey-control-compact-radius: var(--casey-radius-sm);
        --casey-control-shadow:
            inset 0 1px 0 color-mix(in srgb, var(--casey-text) 10%, transparent),
            0 1px 2px rgba(15, 31, 54, .05);
        --casey-control-hover-shadow:
            inset 0 1px 0 color-mix(in srgb, var(--casey-text) 13%, transparent),
            0 .3rem .8rem rgba(15, 31, 54, .08);
        --casey-scrollbar-size: 8px;
        --casey-scrollbar-thumb: color-mix(in srgb, var(--casey-muted) 52%, transparent);
        --casey-scrollbar-thumb-hover: color-mix(in srgb, var(--casey-blue) 72%, var(--casey-muted));
        --casey-scrollbar-thumb-active: color-mix(in srgb, var(--casey-teal) 76%, var(--casey-muted));
        --casey-target-size: 2.75rem;
        --casey-row-height: 3rem;
        --casey-radius-control: 0.5rem;
        --casey-radius-sm: 0.4rem;
        --casey-radius-panel: 0.75rem;
        --casey-radius-major: 1rem;
        --casey-directory-filter-pane-width: 16rem;
        /* Shared overview sizing, based on the Case detail pane. */
        --casey-overview-pane-min-width: 20rem;
        --casey-overview-pane-width: 23rem;
        --casey-message-width: 78ch;
        --casey-canvas-max: 140rem;
    }
}