/* ============================================
   Look tokens: the full --opdms-* vocabulary (plan 02, ~/.claude/plans/new-look/).
   Classic values equal today's Bootstrap, so nothing moves. Each look overrides them in its own
   looks/<name>.tokens.css on :root[data-look="..."], which outranks :root whatever the load order.
   Surface and brand names already in site.css :root (--opdms-bg, --opdms-primary, ...) are not repeated here.
   Reference: scriptsAndMore/new-look/look-tokens.md
   ============================================ */

:root {
    /* Surfaces: aliases of the site.css names, so a user's custom surface colours still flow through */
    --opdms-page: var(--opdms-bg);
    --opdms-subtle: var(--opdms-bg-secondary);
    --opdms-border-strong: #adb5bd;
    --opdms-border-translucent: rgba(0, 0, 0, 0.175);
    --opdms-fill: #e9ecef;          /* hover / pressed fills, chips, wells (Bootstrap's secondary-bg) */

    /* Text. Two greys, as in Bootstrap: --opdms-text-secondary (site.css, #6c757d) and --opdms-muted,
       Bootstrap's translucent secondary text colour. Every look file sets both. */
    --opdms-muted: rgba(33, 37, 41, 0.75);
    --opdms-muted-strong: #495057;  /* darker secondary text: labels, inactive tabs (Bootstrap gray-700) */

    /* Status colours (secondary and warning live in site.css: the brand pickers set them) */
    --opdms-success: #198754;
    --opdms-danger: #dc3545;
    --opdms-info: #0dcaf0;
    --opdms-on-primary: #ffffff;
    --opdms-success-rgb: 25, 135, 84;
    --opdms-info-rgb: 13, 202, 240;
    --opdms-danger-rgb: 220, 53, 69;

    /* Tinted status backgrounds and borders: Bootstrap's *-bg-subtle / *-border-subtle are exactly the
       status colour mixed with white at 20% / 40%, so these follow whatever look and brand are active. */
    --opdms-primary-bg: color-mix(in srgb, var(--opdms-primary) var(--opdms-alert-mix), var(--opdms-surface));
    --opdms-success-bg: color-mix(in srgb, var(--opdms-success) var(--opdms-alert-mix), var(--opdms-surface));
    --opdms-warning-bg: color-mix(in srgb, var(--opdms-warning) var(--opdms-alert-mix), var(--opdms-surface));
    --opdms-danger-bg: color-mix(in srgb, var(--opdms-danger) var(--opdms-alert-mix), var(--opdms-surface));
    --opdms-info-bg: color-mix(in srgb, var(--opdms-info) var(--opdms-alert-mix), var(--opdms-surface));
    --opdms-secondary-bg: color-mix(in srgb, var(--opdms-text-secondary) var(--opdms-alert-mix), var(--opdms-surface));
    /* Status text on a tinted chip: Bootstrap 5.2's emphasis colours, which are exactly the status colour 60% toward black */
    --opdms-primary-text: color-mix(in srgb, var(--opdms-primary) 60%, black);
    --opdms-success-text: color-mix(in srgb, var(--opdms-success) 60%, black);
    --opdms-warning-text: color-mix(in srgb, var(--opdms-warning) 60%, black);
    --opdms-danger-text: color-mix(in srgb, var(--opdms-danger) 60%, black);
    --opdms-secondary-text: color-mix(in srgb, var(--opdms-text-secondary) 60%, black);

    /* Attention: a state between warning and danger (AP "awaiting approval", "probable duplicate").
       Its own colour so it never reads as either of them. */
    --opdms-attention: #fd7e14;
    --opdms-attention-bg: color-mix(in srgb, var(--opdms-attention) var(--opdms-alert-mix), var(--opdms-surface));
    --opdms-attention-line: color-mix(in srgb, var(--opdms-attention) 40%, var(--opdms-surface));
    --opdms-attention-text: #8a3c00;

    --opdms-primary-line: color-mix(in srgb, var(--opdms-primary) 40%, var(--opdms-surface));
    --opdms-success-line: color-mix(in srgb, var(--opdms-success) 40%, var(--opdms-surface));
    --opdms-warning-line: color-mix(in srgb, var(--opdms-warning) 40%, var(--opdms-surface));
    --opdms-danger-line: color-mix(in srgb, var(--opdms-danger) 40%, var(--opdms-surface));
    --opdms-info-line: color-mix(in srgb, var(--opdms-info) 40%, var(--opdms-surface));

    /* Readable dark shade of each status colour, for text on a tinted background */
    --opdms-ink-success: #0a3622;
    --opdms-ink-warning: #664d03;
    --opdms-ink-danger: #58151c;
    --opdms-ink-info: #055160;
    --opdms-ink-secondary: #2b2f32;
    --opdms-ink-primary: #052c65;

    /* Category colours: things told apart by colour with no good/bad meaning (event kinds, signers, series) */
    --opdms-cat-1: #6f42c1;  /* purple */
    --opdms-cat-2: #d63384;  /* pink */
    --opdms-cat-3: #fd7e14;  /* orange */
    --opdms-cat-4: #20c997;  /* teal */
    --opdms-cat-5: #6610f2;  /* indigo */
    --opdms-cat-6: #0dcaf0;  /* cyan */
    --opdms-cat-7: #795548;  /* brown */
    --opdms-cat-8: #495057;  /* slate */

    /* Overlay behind modal windows */
    --opdms-scrim: rgba(0, 0, 0, 0.5);

    /* Shape */
    --opdms-radius: 0.375rem;
    --opdms-radius-card: 0.375rem;
    --opdms-radius-btn: 0.375rem;
    --opdms-radius-badge: 0.375rem;

    /* Sizing and type */
    --opdms-control-h: calc(1.5em + 0.75rem + 2px);
    --opdms-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;   /* what app.css has always set on html, body */
    --opdms-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --opdms-fs: 1rem;
    --opdms-fs-sm: 0.875rem;
    --opdms-btn-weight: 400;
    --opdms-heading-weight: 500;

    /* Depth and focus */
    --opdms-shadow-card: none;
    --opdms-shadow-window: 0 4px 16px rgba(0, 0, 0, 0.3);   /* OPWindow's own shadow */

    /* Windows (OPWindow and friends) */
    --opdms-radius-window: 4px;
    --opdms-window-title-bg: var(--opdms-surface-secondary);
    --opdms-window-title-line: var(--opdms-border);
    --opdms-focus: 0 0 0 0.25rem rgba(var(--opdms-primary-rgb), 0.25);

    /* Table headers */
    --opdms-th-bg: transparent;
    --opdms-th-color: var(--opdms-text);
    --opdms-th-size: inherit;
    --opdms-th-case: none;
    --opdms-th-track: 0;
    --opdms-th-weight: inherit;

    /* Top nav */
    --opdms-nav-bg: var(--opdms-navbar-bg);
    --opdms-nav-fg: var(--opdms-text);
    --opdms-nav-line: var(--opdms-border);
    --opdms-nav-accent: var(--opdms-primary);       /* the title and avatar on the top bar */
    --opdms-nav-on-accent: var(--opdms-on-primary);

    /* Tint strengths: how much of a status colour a badge / alert background takes */
    --opdms-badge-mix: 100%;
    --opdms-alert-mix: 20%;
}

/* Bridge to the Bootstrap variables op-base.css and the pages still read, for the new looks only.
   Classic keeps op-base.css's own values untouched. */
:root[data-look]:not([data-look="classic"]) {
    --bs-body-bg: var(--opdms-page);
    --bs-body-color: var(--opdms-text);
    --bs-body-font-family: var(--opdms-font);
    --bs-secondary-color: var(--opdms-muted);
    --bs-secondary-bg: var(--opdms-fill);
    --bs-tertiary-bg: var(--opdms-subtle);
    --bs-border-color: var(--opdms-border);
    --bs-border-radius: var(--opdms-radius);
    --bs-box-shadow: var(--opdms-shadow-window);
    --bs-primary: var(--opdms-primary);
    --bs-primary-rgb: var(--opdms-primary-rgb);
    --bs-secondary: var(--opdms-secondary);
    --bs-secondary-rgb: var(--opdms-secondary-rgb);
    --bs-success: var(--opdms-success);
    --bs-warning: var(--opdms-warning);
    --bs-danger: var(--opdms-danger);
    --bs-info: var(--opdms-info);
    --bs-link-color: var(--opdms-primary);
    --bs-link-color-rgb: var(--opdms-primary-rgb);
    --bs-link-hover-color: var(--opdms-primary-dark);
    --bs-focus-ring-color: rgba(var(--opdms-primary-rgb), 0.25);
    --bs-success-rgb: var(--opdms-success-rgb);
    --bs-info-rgb: var(--opdms-info-rgb);
    --bs-warning-rgb: var(--opdms-warning-rgb);
    --bs-danger-rgb: var(--opdms-danger-rgb);
    --bs-light: var(--opdms-subtle);
    --bs-dark: var(--opdms-text);
    --bs-emphasis-color: var(--opdms-text);
    --bs-heading-color: inherit;
    --bs-primary-bg-subtle: var(--opdms-primary-bg);
    --bs-success-bg-subtle: var(--opdms-success-bg);
    --bs-warning-bg-subtle: var(--opdms-warning-bg);
    --bs-danger-bg-subtle: var(--opdms-danger-bg);
    --bs-info-bg-subtle: var(--opdms-info-bg);
    --bs-secondary-bg-subtle: var(--opdms-secondary-bg);
    --bs-primary-border-subtle: var(--opdms-primary-line);
    --bs-success-border-subtle: var(--opdms-success-line);
    --bs-warning-border-subtle: var(--opdms-warning-line);
    --bs-danger-border-subtle: var(--opdms-danger-line);
    --bs-info-border-subtle: var(--opdms-info-line);
    --bs-primary-text-emphasis: var(--opdms-ink-primary);
    --bs-success-text-emphasis: var(--opdms-ink-success);
    --bs-warning-text-emphasis: var(--opdms-ink-warning);
    --bs-danger-text-emphasis: var(--opdms-ink-danger);
    --bs-info-text-emphasis: var(--opdms-ink-info);
    --bs-secondary-text-emphasis: var(--opdms-ink-secondary);
}

/* Dark mode (data-bs-theme="dark" on <html>; ThemeManager.js), shown only with Debug mode on for now.
   The surfaces, text and borders come from the theme's dark set, written inline by opdms.js setCssVariables. These
   are the tokens it doesn't write, which would otherwise keep their light values: a light --opdms-fill under white
   text made every label value in the info panels white on white. The [data-look] half outranks each look's own
   :root[data-look="..."] block. Values follow Bootstrap 5.3's dark theme. */
:root[data-bs-theme="dark"],
:root[data-bs-theme="dark"][data-look] {
    --opdms-fill: #343a40;
    --opdms-border-strong: #6c757d;
    --opdms-border-translucent: rgba(255, 255, 255, 0.15);
    --opdms-muted: rgba(222, 226, 230, 0.75);
    --opdms-muted-strong: #ced4da;

    /* Status text on a tint: toward white instead of black */
    --opdms-primary-text: color-mix(in srgb, var(--opdms-primary) 60%, white);
    --opdms-success-text: color-mix(in srgb, var(--opdms-success) 60%, white);
    --opdms-warning-text: color-mix(in srgb, var(--opdms-warning) 60%, white);
    --opdms-danger-text: color-mix(in srgb, var(--opdms-danger) 60%, white);
    --opdms-secondary-text: color-mix(in srgb, var(--opdms-text-secondary) 60%, white);
    --opdms-attention-text: #feb272;

    --opdms-ink-success: #75b798;
    --opdms-ink-warning: #ffda6a;
    --opdms-ink-danger: #ea868f;
    --opdms-ink-info: #6edff6;
    --opdms-ink-secondary: #a7acb1;
    --opdms-ink-primary: #6ea8fe;

    --opdms-scrim: rgba(0, 0, 0, 0.65);
    --opdms-shadow-window: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* The Classic card in the look picker (Theme Settings) must draw Classic whatever look is active, so the
   values its preview reads are restated here. Each look's token file covers its own card. */
.op-look-preview[data-look-preview="classic"] {
    --opdms-bg: #ffffff;
    --opdms-bg-secondary: #f8f9fa;
    --opdms-surface: #ffffff;
    --opdms-text: #212529;
    --opdms-text-secondary: #6c757d;
    --opdms-border: #dee2e6;
    --opdms-border-strong: #adb5bd;
    --opdms-input-bg: #ffffff;
    --opdms-primary: #0d6efd;
    --opdms-success: #198754;
    --opdms-ink-success: #0a3622;
    --opdms-radius: 0.375rem;
    --opdms-radius-card: 0.375rem;
    --opdms-radius-btn: 0.375rem;
    --opdms-radius-badge: 0.375rem;
    --opdms-btn-weight: 400;
    --opdms-shadow-card: none;
    --opdms-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}