/* crm-tokens — the --crm-* token + theme blocks. The ONE definition; crm-core and the login surface both read it. */
:root,
[data-crm-theme="light"],
[data-crm-theme="mixed"],
[data-crm-zone="light"] {
    --crm-primary:           rgb(37, 99, 235);
    --crm-primary-hover:     #1d4ed8;
    --crm-primary-soft:      rgb(217 228 249);
    --crm-primary-text:      #1e40af;

    --crm-danger:            #dc2626;
    --crm-danger-hover:      #b91c1c;
    --crm-danger-soft:       #fee2e2;
    --crm-success:           #16a34a;
    --crm-success-soft:      #dcfce7;
    --crm-success-text:      #166534;
    --crm-warning:           #d97706;
    --crm-warning-soft:      #fef3c7;
    --crm-warning-text:      #92400e;
    --crm-info:              #7c3aed;
    --crm-info-soft:         #ede9fe;
    --crm-info-text:         #5b21b6;

    --crm-bg:                #ffffff;
    --crm-bg-alt:            #eef2f7;  /* recessed surface (lanes/kanban columns) — slightly DARKER than --crm-bg so cards lift visually */
    --crm-surface:           #ffffff;
    --crm-surface-1:         #f8fafc;
    --crm-surface-2:         #f1f5f9;
    --crm-surface-3:         #e2e8f0;
    --crm-surface-inset:     #f8fafc;

    --crm-border:            #e2e8f0;
    --crm-border-strong:     #cbd5e1;
    --crm-ring:              rgba(37, 99, 235, 0.25);

    --crm-text:              #1e293b;
    --crm-text-secondary:    #475569;
    --crm-text-muted:        #64748b;
    --crm-text-faint:        #64748b;
    --crm-text-on-primary:   #ffffff;
    --crm-text-on-danger:    #ffffff;
    --crm-text-on-success:   #ffffff;

    --crm-contrast-border:   rgba(255, 255, 255, 0.3);
    --crm-contrast-border-hover: rgba(255, 255, 255, 0.5);
    --crm-contrast-bg-hover: rgba(255, 255, 255, 0.15);

    --crm-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.05);
    --crm-shadow:            0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --crm-shadow-md:         0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --crm-shadow-lg:         0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    --crm-overlay:           rgba(0, 0, 0, 0.45);

    --crm-halogen-glow:      rgba(37, 99, 235, 0.35);
    --crm-halogen-glow-soft: rgba(37, 99, 235, 0.18);

    --crm-elev-cast:         rgba(15, 23, 42, 0.14);

    --crm-radius-sm:         4px;
    --crm-radius:            6px;
    --crm-radius-lg:         10px;
    --crm-radius-full:       9999px;

    --crm-sp-1:              4px;
    --crm-sp-2:              8px;
    --crm-sp-3:              12px;
    --crm-sp-4:              16px;
    --crm-sp-5:              24px;
    --crm-sp-6:              32px;
    --crm-sp-8:              48px;

    --crm-control-h:         38px;

    --crm-font:              -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --crm-font-display:      ui-serif, "New York", "Sitka Text", Charter, "Bitstream Charter", Cambria, Georgia, serif;
    --crm-font-mono:         ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "Fira Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --crm-text-xs:           0.75rem;
    --crm-text-sm:           0.85rem;
    --crm-text-base:         0.95rem;
    --crm-text-lg:           1.1rem;
    --crm-text-xl:           1.3rem;
    --crm-leading-tight:     1.25;
    --crm-leading-normal:    1.5;
    --crm-weight-normal:     400;
    --crm-weight-medium:     500;
    --crm-weight-semibold:   600;
    --crm-weight-bold:       700;

    --crm-ease:              0.15s ease;

    --crm-timer-bg:          var(--crm-primary-soft);
    --crm-timer-clock:       var(--crm-primary);
    --crm-timer-pulse:       var(--crm-primary);

    --crm-header-bg: var(--crm-primary-soft);

    --crm-status-idea:       #64748b;
    --crm-status-idea-bg:    #f1f5f9;
    --crm-status-not-started:#6b7280;
    --crm-status-not-started-bg:#f3f4f6;
    --crm-status-in-progress:#2563eb;
    --crm-status-in-progress-bg:#dbeafe;
    --crm-status-client-review:#d97706;
    --crm-status-client-review-bg:#fef3c7;
    --crm-status-done:       #16a34a;
    --crm-status-done-bg:    #dcfce7;

    --crm-priority-low:      #64748b;
    --crm-priority-low-bg:   #f1f5f9;
    --crm-priority-medium:   #d97706;
    --crm-priority-medium-bg:#fef3c7;
    --crm-priority-high:     #dc2626;
    --crm-priority-high-bg:  #fee2e2;

    --crm-code-bg:               #0f172a;
    --crm-code-fg:               #e2e8f0;
    --crm-code-border:           rgba(255, 255, 255, 0.08);
    --crm-code-syntax-keyword:   #93c5fd;
    --crm-code-syntax-string:    #86efac;
    --crm-code-syntax-number:    #fcd34d;
    --crm-code-syntax-title:     #c4b5fd;
    --crm-code-syntax-attr:      #fde68a;
    --crm-code-syntax-comment:   #94a3b8;
}

/* The ONE finished-work fill — a hatched wash of the item's OWN project colour.
   ⚠ NOT on :root, and it cannot go there. A custom property's var() references are substituted at
   computed-value time on the element the declaration MATCHED, and the result is what inherits — so
   declared on :root this freezes to the `--crm-bar-*` fallbacks and every finished pill on the site
   hatches the same blue, whatever project it belongs to (found in the wild, Roman 2026-08-20).
   It is declared on the tinted elements themselves so each resolves its own swatch.
   ⚠ A new tinted surface joins THIS list — never by restating the recipe. */
.crm-cal-event,
.crm-timeline__bar,
.crm-capacity__bar,
.crm-capacity__chip,
.crm-calendar__event {
    --crm-done-ink: hsl(var(--crm-bar-hue, 210) calc(var(--crm-bar-sat, 60) * .82%) calc(var(--crm-bar-lum, 52) * 1%));
    --crm-done-fill: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--crm-done-ink) 26%, transparent) 0 6px,
        color-mix(in srgb, var(--crm-done-ink) 5%, transparent) 6px 11px
    );
}

@media screen {
    :is([data-crm-theme="dark"], [data-crm-zone="dark"]) {
        --crm-primary:           rgb(96, 165, 250);
        --crm-primary-hover:     #93bbfd;
        --crm-primary-soft:      rgb(40 60 87);
        --crm-primary-text:      #93bbfd;

        --crm-danger:            #f87171;
        --crm-danger-hover:      #fca5a5;
        --crm-danger-soft:       rgba(248, 113, 113, 0.15);
        --crm-success:           #4ade80;
        --crm-success-soft:      rgba(74, 222, 128, 0.15);
        --crm-success-text:      #86efac;
        --crm-warning:           #fbbf24;
        --crm-warning-soft:      rgba(251, 191, 36, 0.15);
        --crm-warning-text:      #fde68a;
        --crm-info:              #a78bfa;
        --crm-info-soft:         rgba(167, 139, 250, 0.15);
        --crm-info-text:         #c4b5fd;

        --crm-bg:                #0f172a;
        --crm-bg-alt:            #0a1020;
        --crm-surface:           #1e293b;
        --crm-surface-1:         #1e293b;
        --crm-surface-2:         #334155;
        --crm-surface-3:         #475569;
        --crm-surface-inset:     #1e293b;

        --crm-border:            #334155;
        --crm-border-strong:     #475569;
        --crm-ring:              rgba(96, 165, 250, 0.3);

        --crm-text:              #f1f5f9;
        --crm-text-secondary:    #cbd5e1;
        --crm-text-muted:        #94a3b8;
        --crm-text-faint:        #64748b;
        --crm-text-on-primary:   #ffffff;
        --crm-text-on-danger:    #ffffff;
        --crm-text-on-success:   #ffffff;

        --crm-contrast-border:   rgba(255, 255, 255, 0.3);
        --crm-contrast-border-hover: rgba(255, 255, 255, 0.5);
        --crm-contrast-bg-hover: rgba(255, 255, 255, 0.15);

        --crm-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.3);
        --crm-shadow:            0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --crm-shadow-md:         0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --crm-shadow-lg:         0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

        --crm-overlay:           rgba(0, 0, 0, 0.65);

        --crm-halogen-glow:      rgba(255, 224, 138, 0.9);
        --crm-halogen-glow-soft: rgba(255, 210, 74, 0.55);

        --crm-elev-cast:         rgba(0, 0, 0, 0.55);

        --crm-timer-bg:          var(--crm-primary-soft);
        --crm-timer-clock:       var(--crm-primary);
        --crm-timer-pulse:       var(--crm-primary);

        --crm-header-bg: rgb(209 228 255 / 15%);

        --crm-status-idea:       #94a3b8;
        --crm-status-idea-bg:    rgba(148, 163, 184, 0.15);
        --crm-status-not-started:#9ca3af;
        --crm-status-not-started-bg:rgba(156, 163, 175, 0.15);
        --crm-status-in-progress:#60a5fa;
        --crm-status-in-progress-bg:rgba(96, 165, 250, 0.15);
        --crm-status-client-review:#fbbf24;
        --crm-status-client-review-bg:rgba(251, 191, 36, 0.15);
        --crm-status-done:       #4ade80;
        --crm-status-done-bg:    rgba(74, 222, 128, 0.15);

        --crm-priority-low:      #94a3b8;
        --crm-priority-low-bg:   rgba(148, 163, 184, 0.15);
        --crm-priority-medium:   #fbbf24;
        --crm-priority-medium-bg:rgba(251, 191, 36, 0.15);
        --crm-priority-high:     #f87171;
        --crm-priority-high-bg:  rgba(248, 113, 113, 0.15);
    }
}