/**
 * Trilia Design Tokens
 *
 * Values are derived from the centralized Trilia PT Flutter design system.
 * The wrapper scope prevents version 0.1.0 from changing the live site.
 */

.trilia-design-system {
    color-scheme: light;

    /* Brand */
    --trilia-brand-primary: #3157d5;
    --trilia-brand-primary-dark: #7c95ff;
    --trilia-brand-secondary: #3bafbf;
    --trilia-brand-secondary-dark: #7edce7;

    /* Theme aliases: light */
    --trilia-color-primary: #3157d5;
    --trilia-color-on-primary: #ffffff;
    --trilia-color-secondary: #3bafbf;
    --trilia-color-on-secondary: #082c31;

    --trilia-color-background: #eff3f8;
    --trilia-color-surface-lowest: #ffffff;
    --trilia-color-surface-low: #f2f6fb;
    --trilia-color-surface: #f8fafd;
    --trilia-color-surface-container: #eff3f8;
    --trilia-color-surface-high: #e7edf6;
    --trilia-color-surface-highest: #dde6f1;

    --trilia-color-outline: #a6b3c3;
    --trilia-color-outline-variant: #d1dae7;
    --trilia-color-text: #1c2430;
    --trilia-color-text-muted: #4d5b6b;
    --trilia-color-text-disabled: #7b8795;

    /* Semantic */
    --trilia-color-success: #2e7d32;
    --trilia-color-success-container: #e8f5e9;
    --trilia-color-on-success-container: #174b1a;
    --trilia-color-info: #3157d5;
    --trilia-color-info-container: #e6ecff;
    --trilia-color-on-info-container: #17337f;
    --trilia-color-warning: #a35d00;
    --trilia-color-warning-container: #fff3d6;
    --trilia-color-on-warning-container: #5f3700;
    --trilia-color-urgent: #d98270;
    --trilia-color-urgent-container: #ffedea;
    --trilia-color-on-urgent-container: #6a2921;

    /* Fixed-purpose */
    --trilia-color-canvas: #ffffff;
    --trilia-color-ink: #000000;
    --trilia-color-drawing-red: #d32f2f;
    --trilia-color-drawing-blue: #1976d2;
    --trilia-color-drawing-green: #388e3c;

    /* Typography */
    --trilia-font-family: "Noto Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --trilia-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --trilia-font-size-label-small: 0.75rem;
    --trilia-font-size-label: 0.8125rem;
    --trilia-font-size-body-small: 0.875rem;
    --trilia-font-size-body: 1rem;
    --trilia-font-size-title-small: 1.125rem;
    --trilia-font-size-title: 1.375rem;
    --trilia-font-size-headline: clamp(1.65rem, 1.25rem + 1.1vw, 2.25rem);
    --trilia-font-size-display: clamp(2rem, 1.3rem + 2.25vw, 3.25rem);

    --trilia-line-height-tight: 1.15;
    --trilia-line-height-title: 1.25;
    --trilia-line-height-body: 1.55;

    --trilia-font-weight-regular: 400;
    --trilia-font-weight-medium: 600;
    --trilia-font-weight-bold: 700;
    --trilia-font-weight-heavy: 800;

    /* Spacing — mirrors TriliaSpacing */
    --trilia-space-hairline: 1px;
    --trilia-space-xxs: 2px;
    --trilia-space-micro: 3px;
    --trilia-space-xs: 4px;
    --trilia-space-compact: 6px;
    --trilia-space-sm: 8px;
    --trilia-space-snug: 10px;
    --trilia-space-md: 12px;
    --trilia-space-form: 14px;
    --trilia-space-lg: 16px;
    --trilia-space-relaxed: 18px;
    --trilia-space-xl: 20px;
    --trilia-space-spacious: 22px;
    --trilia-space-xxl: 24px;
    --trilia-space-section: 28px;
    --trilia-space-xxxl: 32px;
    --trilia-space-huge: 40px;
    --trilia-space-extra-huge: 48px;
    --trilia-space-hero: 96px;

    /* Radius — mirrors TriliaRadius */
    --trilia-radius-tiny: 4px;
    --trilia-radius-small: 8px;
    --trilia-radius-control: 9px;
    --trilia-radius-compact: 10px;
    --trilia-radius-medium: 12px;
    --trilia-radius-form: 14px;
    --trilia-radius-large: 16px;
    --trilia-radius-dialog: 18px;
    --trilia-radius-extra-large: 20px;
    --trilia-radius-spacious: 22px;
    --trilia-radius-panel: 24px;
    --trilia-radius-pill: 999px;

    /* Sizes */
    --trilia-control-height: 42px;
    --trilia-icon-size: 23px;
    --trilia-icon-size-selected: 24px;
    --trilia-border-width: 1px;

    /* Layout */
    --trilia-breakpoint-compact: 700px;
    --trilia-breakpoint-tablet: 900px;
    --trilia-breakpoint-desktop: 1200px;
    --trilia-content-narrow: 720px;
    --trilia-content-default: 1120px;
    --trilia-content-wide: 1440px;

    /* Motion */
    --trilia-duration-fast: 120ms;
    --trilia-duration-normal: 200ms;
    --trilia-easing-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Elevation */
    --trilia-shadow-small: 0 1px 2px rgb(17 31 44 / 8%);
    --trilia-shadow-medium: 0 8px 24px rgb(17 31 44 / 12%);
    --trilia-shadow-dialog: 0 24px 64px rgb(6 16 26 / 24%);

    /* Focus */
    --trilia-focus-ring: 0 0 0 3px rgb(49 87 213 / 24%);
}

.trilia-design-system[data-trilia-theme="dark"] {
    color-scheme: dark;

    --trilia-color-primary: #7c95ff;
    --trilia-color-on-primary: #0b141d;
    --trilia-color-secondary: #7edce7;
    --trilia-color-on-secondary: #0b2529;

    --trilia-color-background: #0b141d;
    --trilia-color-surface-lowest: #0f1821;
    --trilia-color-surface-low: #121d27;
    --trilia-color-surface: #14202a;
    --trilia-color-surface-container: #182532;
    --trilia-color-surface-high: #223140;
    --trilia-color-surface-highest: #2d3c4b;

    --trilia-color-outline: #536879;
    --trilia-color-outline-variant: #334656;
    --trilia-color-text: #e9eef5;
    --trilia-color-text-muted: #c1cbd7;
    --trilia-color-text-disabled: #82909e;

    --trilia-color-success: #82ca86;
    --trilia-color-success-container: #173a20;
    --trilia-color-on-success-container: #c9f4ce;
    --trilia-color-info: #7c95ff;
    --trilia-color-info-container: #1b2a58;
    --trilia-color-on-info-container: #dde4ff;
    --trilia-color-warning: #ffb95c;
    --trilia-color-warning-container: #3d2b12;
    --trilia-color-on-warning-container: #ffe0b2;
    --trilia-color-urgent: #d98270;
    --trilia-color-urgent-container: #3a2422;
    --trilia-color-on-urgent-container: #ffdad4;

    --trilia-shadow-small: 0 1px 2px rgb(0 0 0 / 28%);
    --trilia-shadow-medium: 0 10px 28px rgb(0 0 0 / 32%);
    --trilia-shadow-dialog: 0 26px 72px rgb(0 0 0 / 52%);
    --trilia-focus-ring: 0 0 0 3px rgb(124 149 255 / 30%);
}

@media (prefers-color-scheme: dark) {
    .trilia-design-system:not([data-trilia-theme]),
    .trilia-design-system[data-trilia-theme="system"] {
        color-scheme: dark;

        --trilia-color-primary: #7c95ff;
        --trilia-color-on-primary: #0b141d;
        --trilia-color-secondary: #7edce7;
        --trilia-color-on-secondary: #0b2529;
        --trilia-color-background: #0b141d;
        --trilia-color-surface-lowest: #0f1821;
        --trilia-color-surface-low: #121d27;
        --trilia-color-surface: #14202a;
        --trilia-color-surface-container: #182532;
        --trilia-color-surface-high: #223140;
        --trilia-color-surface-highest: #2d3c4b;
        --trilia-color-outline: #536879;
        --trilia-color-outline-variant: #334656;
        --trilia-color-text: #e9eef5;
        --trilia-color-text-muted: #c1cbd7;
        --trilia-color-text-disabled: #82909e;
        --trilia-color-success: #82ca86;
        --trilia-color-success-container: #173a20;
        --trilia-color-on-success-container: #c9f4ce;
        --trilia-color-info: #7c95ff;
        --trilia-color-info-container: #1b2a58;
        --trilia-color-on-info-container: #dde4ff;
        --trilia-color-warning: #ffb95c;
        --trilia-color-warning-container: #3d2b12;
        --trilia-color-on-warning-container: #ffe0b2;
        --trilia-color-urgent-container: #3a2422;
        --trilia-color-on-urgent-container: #ffdad4;
    }
}