@import url("crest-fonts.css");
/* Shared production token authority. No layout or component selectors. */
:root {
    --type-display: clamp(42px, 4.6vw, 64px);
    --type-title: clamp(32px, 4vw, 40px);
    --type-heading: 20px;
    --type-lede: clamp(18px, 1.55vw, 21px);
    --type-body: 16px;
    --type-detail: 13px;
    --type-kicker: 13px;
    --action-height: 44px;
    --action-radius: 6px;
    --surface-radius: 8px;
    --focus-outline: 3px solid var(--focus-ring);
    --focus-offset: 3px;
    --dialog-shadow: 0 24px 64px rgba(32, 44, 76, 0.24);

    --crest-dark-canvas: #111a2a;
    --crest-dark-surface: #1b273b;
    --crest-dark-ink: #f0f4ff;
    --crest-dark-muted: #b2bfd4;
    --crest-dark-action: #9cbaff;
    --crest-dark-border: #3c4b65;

    --ink: #18243b;
    --muted: #58657a;
    --quiet: #647087;
    --paper: #f6f8fc;
    --panel: #ffffff;
    --line: #d6deeb;
    --navy: #18243b;
    --navy-2: #304564;
    --gold: #a65b00;
    --gold-soft: #fff0c2;
    --gold-strong: #704700;
    --teal: #2459d3;
    --teal-soft: #edf3ff;
    --teal-action: #2459d3;
    --teal-strong: #1744ae;
    --rose: #bd3041;
    --rose-soft: #fff0f2;
    --blue-soft: #edf3ff;
    --telegram-fill: #146da1;
    --whatsapp-fill: #16763d;
    --page-grid: transparent;
    --link-decoration: rgba(32, 44, 76, 0.35);
    --panel-soft: #ffffff;
    --panel-shadow: none;
    --card-shadow: none;
    --tooltip-shadow: 0 18px 36px rgba(32, 44, 76, 0.16);
    --source-dot-ring: rgba(31, 138, 128, 0.12);
    --term-underline: rgba(32, 44, 76, 0.55);
    --focus-ring: #2459d3;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --grid-max: 1180px;
    --grid-gutter: clamp(16px, 2.5vw, 24px);
    --topbar-offset: 128px;
    --mono: var(--crest-font, sans-serif);
    --body: var(--crest-font, sans-serif);
    --serif: var(--crest-font, sans-serif);
    --crest-on-color: #ffffff;
    --crest-document-on-action: var(--crest-on-color);
    --crest-document-page: #f6f8fc;
    --crest-document-surface: #ffffff;
    --crest-document-tint: #edf3ff;
    --crest-document-ink: #18243b;
    --crest-document-muted: #58657a;
    --crest-document-example: #647087;
    --crest-document-action: #2459d3;
    --crest-document-action-hover: #1744ae;
    --crest-document-positive: #087b62;
    --crest-document-positive-hover: #05634e;
    --crest-document-positive-tint: #e7f7ef;
    --crest-document-danger: #bd3041;
    --crest-document-danger-hover: #982333;
    --crest-document-danger-tint: #fff0f2;
    --crest-document-border: #d6deeb;
    --crest-document-border-strong: #7c8da8;
    --crest-document-attention: #704700;
    --crest-document-attention-tint: #fff0c2;
    --surface-hover: var(--blue-soft);
    --rose-strong: var(--rose);
    --navy-hover: var(--navy-2);
    --danger: var(--rose);
    --table-head-bg: var(--blue-soft);
}

html[data-theme="dark"] {
    --dialog-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    --ink: #f0f4ff;
    --muted: #b2bfd4;
    --quiet: #a0afc7;
    --paper: #111a2a;
    --panel: #1b273b;
    --line: #3c4b65;
    --navy: #f0f4ff;
    --navy-2: #d1def5;
    --gold: #ffc56d;
    --gold-soft: #49351b;
    --gold-strong: #ffdc9c;
    --teal: #9cbaff;
    --teal-soft: #263e66;
    --teal-action: #9cbaff;
    --teal-strong: #bdd0ff;
    --rose: #ff9ba8;
    --rose-soft: #482637;
    --blue-soft: #263e66;
    --telegram-fill: #146da1;
    --whatsapp-fill: #16763d;
    --page-grid: transparent;
    --link-decoration: rgba(217, 180, 90, 0.56);
    --panel-soft: #1b273b;
    --panel-shadow: none;
    --card-shadow: none;
    --tooltip-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
    --source-dot-ring: rgba(91, 195, 184, 0.17);
    --term-underline: rgba(217, 180, 90, 0.58);
    --focus-ring: #9cbaff;
    /* PO 2026-09-12: screen documents follow the selected theme. */
    --crest-document-page: var(--crest-dark-canvas);
    --crest-document-surface: var(--crest-dark-surface);
    --crest-document-tint: var(--blue-soft);
    --crest-document-ink: var(--crest-dark-ink);
    --crest-document-muted: var(--crest-dark-muted);
    --crest-document-example: var(--quiet);
    --crest-document-action: var(--crest-dark-action);
    --crest-document-action-hover: var(--teal-strong);
    --crest-document-positive: color-mix(in srgb, #087b62 45%, white);
    --crest-document-positive-hover: color-mix(in srgb, #087b62 30%, white);
    --crest-document-positive-tint: color-mix(in srgb, #087b62 20%, var(--crest-dark-surface));
    --crest-document-danger: var(--rose);
    --crest-document-danger-hover: color-mix(in srgb, var(--rose) 80%, white);
    --crest-document-danger-tint: var(--rose-soft);
    --crest-document-border: var(--crest-dark-border);
    --crest-document-border-strong: #7c8da8;
    --crest-document-attention: var(--gold-strong);
    --crest-document-attention-tint: var(--gold-soft);
    --crest-document-on-action: var(--crest-dark-canvas);

}

:root {
    --topbar-offset: 128px;
}

/* Print and PDF retain the canonical light document, regardless of preference. */
@media print {
    html[data-theme="dark"] {
        --crest-document-on-action: var(--crest-on-color);
        --crest-document-page: #f6f8fc;
        --crest-document-surface: #ffffff;
        --crest-document-tint: #edf3ff;
        --crest-document-ink: #18243b;
        --crest-document-muted: #58657a;
        --crest-document-example: #647087;
        --crest-document-action: #2459d3;
        --crest-document-action-hover: #1744ae;
        --crest-document-positive: #087b62;
        --crest-document-positive-hover: #05634e;
        --crest-document-positive-tint: #e7f7ef;
        --crest-document-danger: #bd3041;
        --crest-document-danger-hover: #982333;
        --crest-document-danger-tint: #fff0f2;
        --crest-document-border: #d6deeb;
        --crest-document-border-strong: #7c8da8;
        --crest-document-attention: #704700;
        --crest-document-attention-tint: #fff0c2;
    }
}