/* GENERATED by web/app/looks/build_tokens.py from
   vendor/cpd-design-language/project/tokens.json (revision 2026-09-25). Do not edit by hand. */

:root {
  --font-sans: Cairo, "Segoe UI", Tahoma, sans-serif;
  --type-page-title-size: 1.5rem;
  --type-page-title-line: 1.4;
  --type-page-title-weight: 700;
  --type-sheet-title-size: 1.08rem;
  --type-sheet-title-line: 1.5;
  --type-sheet-title-weight: 700;
  --type-section-title-size: 1.05rem;
  --type-section-title-line: 1.6;
  --type-section-title-weight: 700;
  --type-greeting-size: 1.03rem;
  --type-greeting-line: 1.35;
  --type-greeting-weight: 700;
  --type-card-title-size: .88rem;
  --type-card-title-line: 1.6;
  --type-card-title-weight: 700;
  --type-balance-figure-size: 2.2rem;
  --type-balance-figure-line: 1.15;
  --type-balance-figure-weight: 700;
  --type-balance-denominator-size: 1.35rem;
  --type-balance-denominator-line: 1.15;
  --type-balance-denominator-weight: 700;
  --type-attendance-time-size: 1.22rem;
  --type-attendance-time-line: 1.45;
  --type-attendance-time-weight: 700;
  --type-calendar-date-size: 1rem;
  --type-calendar-date-line: 1.1;
  --type-calendar-date-weight: 400;
  --type-body-size: 14px;
  --type-body-line: 1.7;
  --type-body-weight: 400;
  --type-article-size: .82rem;
  --type-article-line: 1.95;
  --type-article-weight: 400;
  --type-row-label-size: .9rem;
  --type-row-label-line: 1.6;
  --type-row-label-weight: 700;
  --type-field-label-size: .76rem;
  --type-field-label-line: 1.6;
  --type-field-label-weight: 700;
  --type-caption-size: .67rem;
  --type-caption-line: 1.6;
  --type-caption-weight: 400;
  --type-button-size: .88rem;
  --type-button-line: 1.4;
  --type-button-weight: 700;
  --type-chip-size: .75rem;
  --type-chip-line: 1.4;
  --type-chip-weight: 400;
  --type-badge-size: .67rem;
  --type-badge-line: 1.4;
  --type-badge-weight: 700;
  --type-nav-label-size: .69rem;
  --type-nav-label-line: 1.4;
  --type-nav-label-weight: 400;
  --space-tight: 4px;
  --space-compact: 8px;
  --space-grid: 10px;
  --space-stack: 12px;
  --space-surface: 16px;
  --space-page: 20px;
  --space-section: 24px;
  --radius-badge: 7px;
  --radius-chip: 9px;
  --radius-field: 10px;
  --radius-button: 11px;
  --radius-notice: 12px;
  --radius-surface: 16px;
  --radius-dialog: 20px;
  --radius-action-ios: 24px;
  --radius-sheet: 26px;
  --radius-segment: 3px;
  --radius-full: 999px;
  --target-min: 44px;
  --button-min: 46px;
  --field-min: 44px;
  --header-height: 56px;
  --tabbar-height: 70px;
  --statusbar-height: 30px;
  --icon-body: 24px;
  --icon-nav: 22px;
  --icon-service: 30px;
  --unread-dot-size: 9px;
  --logo-home: 150px;
  --logo-signin: 200px;
  --app-max: 540px;
  --icon-tint: 0.13;
  --disabled: 0.45;
  --shadow-sheet: 0 -8px 40px #00000022;
  --shadow-alert: 0 16px 60px #00000033;
  --shadow-segment: 0 2px 5px #00000014;
}

/* Light: the default and the explicit choice. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --paper: #f6f1e8;
  --surface: #ffffff;
  --ink: #25221d;
  --muted: #6e6556;
  --line: #e6decf;
  --control-line: var(--line);
  --gold: #b58a3a;
  --gold-deep: #7e5d1c;
  --gold-tint: #f3ecdf;
  --primary: var(--gold-deep);
  --on-primary: #ffffff;
  --green: #34734f;
  --on-green: #ffffff;
  --red: #a9382c;
  --withdraw: #a9382c;
  --withdraw-hover: #912e24;
  --on-danger: #ffffff;
  --unread-dot: #dc3545;
  --unread-badge: #c0392b;
  --cpd-blue: #386fa5;
  --cpd-gold: #997021;
  --cpd-green: #357b56;
  --cpd-red: #b5443a;
  --cpd-teal: #277f80;
  --cpd-purple: #8059a5;
  --cpd-slate: #647283;
  --attendance-amber: #96600b;
  --attendance-missing: #a63d7a;
  --holiday-surface: #e9ecef;
  --holiday-ink: #55616c;
  --weekend-surface: #f3f4f5;
  --ledger-available: var(--cpd-green);
  --ledger-pending: #daa72f;
  --ledger-deducted: #b94b40;
  --progress-current: #936911;
  --control-fill: rgba(118,118,128,.12);
  --glass-fill: rgba(255,255,255,.76);
  --sheet-fill: rgba(250,249,246,.96);
  --scrim: #00000099;
  --shadow-float: 0 12px 34px #46351f1a;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #08090b;
  --surface: #111317;
  --ink: #f5f5f3;
  --muted: #aaaeb5;
  --line: #282c32;
  --control-line: var(--line);
  --gold: #c79f51;
  --gold-deep: #e2bd75;
  --gold-tint: #282319;
  --primary: var(--gold);
  --on-primary: #111317;
  --green: #80bd92;
  --on-green: #08090b;
  --red: #f17f73;
  --withdraw: #a9382c;
  --withdraw-hover: #912e24;
  --on-danger: #ffffff;
  --unread-dot: #dc3545;
  --unread-badge: #c0392b;
  --cpd-blue: #85b9ef;
  --cpd-gold: #dfb86a;
  --cpd-green: #84c69c;
  --cpd-red: #f38e81;
  --cpd-teal: #7bc8c7;
  --cpd-purple: #bba0de;
  --cpd-slate: #b0becf;
  --attendance-amber: #e5b45f;
  --attendance-missing: #e69cbe;
  --holiday-surface: #2d333b;
  --holiday-ink: #c5ccd4;
  --weekend-surface: #20252b;
  --ledger-available: var(--cpd-green);
  --ledger-pending: #daa72f;
  --ledger-deducted: #e8786b;
  --progress-current: #e9bd58;
  --control-fill: rgba(160,160,170,.18);
  --glass-fill: rgba(38,39,43,.82);
  --sheet-fill: rgba(28,29,32,.97);
  --scrim: #00000099;
  --shadow-float: 0 12px 34px #00000070;
}
:root[data-theme="high-contrast-light"] {
  color-scheme: light;
  --paper: #f6f1e8;
  --surface: #ffffff;
  --ink: #111111;
  --muted: #464038;
  --line: #cec5b5;
  --control-line: #867b68;
  --gold: #705000;
  --gold-deep: #604300;
  --gold-tint: #f3ecdf;
  --primary: var(--gold-deep);
  --on-primary: #ffffff;
  --green: #005b29;
  --on-green: #ffffff;
  --red: #a00018;
  --withdraw: #960c20;
  --withdraw-hover: #960c20;
  --on-danger: #ffffff;
  --unread-dot: #dc3545;
  --unread-badge: #c0392b;
  --cpd-blue: #004b87;
  --cpd-gold: #705000;
  --cpd-green: #005b29;
  --cpd-red: #a00018;
  --cpd-teal: #00575a;
  --cpd-purple: #59317d;
  --cpd-slate: #354353;
  --attendance-amber: #744500;
  --attendance-missing: #7d1f55;
  --holiday-surface: #e9ecef;
  --holiday-ink: #37424d;
  --weekend-surface: #f3f4f5;
  --ledger-available: var(--cpd-green);
  --ledger-pending: #daa72f;
  --ledger-deducted: #b94b40;
  --progress-current: #936911;
  --control-fill: rgba(118,118,128,.12);
  --glass-fill: var(--surface);
  --sheet-fill: var(--surface);
  --scrim: #00000099;
  --shadow-float: 0 12px 34px #46351f1a;
}
:root[data-theme="high-contrast-dark"] {
  color-scheme: dark;
  --paper: #08090b;
  --surface: #111317;
  --ink: #ffffff;
  --muted: #d8dce2;
  --line: #454b54;
  --control-line: #7b8491;
  --gold: #e6c381;
  --gold-deep: #e6c381;
  --gold-tint: #282319;
  --primary: var(--gold);
  --on-primary: #111317;
  --green: #98d9ae;
  --on-green: #08090b;
  --red: #ffa99e;
  --withdraw: #960c20;
  --withdraw-hover: #960c20;
  --on-danger: #ffffff;
  --unread-dot: #dc3545;
  --unread-badge: #c0392b;
  --cpd-blue: #a8cfff;
  --cpd-gold: #e6c381;
  --cpd-green: #98d9ae;
  --cpd-red: #ffa99e;
  --cpd-teal: #96d8d5;
  --cpd-purple: #d0b9ef;
  --cpd-slate: #cbd5e2;
  --attendance-amber: #ffd08a;
  --attendance-missing: #ffb6dd;
  --holiday-surface: #2d333b;
  --holiday-ink: #e8edf2;
  --weekend-surface: #20252b;
  --ledger-available: var(--cpd-green);
  --ledger-pending: #daa72f;
  --ledger-deducted: #e8786b;
  --progress-current: #e9bd58;
  --control-fill: rgba(160,160,170,.18);
  --glass-fill: var(--surface);
  --sheet-fill: var(--surface);
  --scrim: #00000099;
  --shadow-float: 0 12px 34px #00000070;
}

/* Follow the device when no explicit theme is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    color-scheme: dark;
    --paper: #08090b;
    --surface: #111317;
    --ink: #f5f5f3;
    --muted: #aaaeb5;
    --line: #282c32;
    --control-line: var(--line);
    --gold: #c79f51;
    --gold-deep: #e2bd75;
    --gold-tint: #282319;
    --primary: var(--gold);
    --on-primary: #111317;
    --green: #80bd92;
    --on-green: #08090b;
    --red: #f17f73;
    --withdraw: #a9382c;
    --withdraw-hover: #912e24;
    --on-danger: #ffffff;
    --unread-dot: #dc3545;
    --unread-badge: #c0392b;
    --cpd-blue: #85b9ef;
    --cpd-gold: #dfb86a;
    --cpd-green: #84c69c;
    --cpd-red: #f38e81;
    --cpd-teal: #7bc8c7;
    --cpd-purple: #bba0de;
    --cpd-slate: #b0becf;
    --attendance-amber: #e5b45f;
    --attendance-missing: #e69cbe;
    --holiday-surface: #2d333b;
    --holiday-ink: #c5ccd4;
    --weekend-surface: #20252b;
    --ledger-available: var(--cpd-green);
    --ledger-pending: #daa72f;
    --ledger-deducted: #e8786b;
    --progress-current: #e9bd58;
    --control-fill: rgba(160,160,170,.18);
    --glass-fill: rgba(38,39,43,.82);
    --sheet-fill: rgba(28,29,32,.97);
    --scrim: #00000099;
    --shadow-float: 0 12px 34px #00000070;
  }
}
@media (prefers-contrast: more) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    color-scheme: light;
    --paper: #f6f1e8;
    --surface: #ffffff;
    --ink: #111111;
    --muted: #464038;
    --line: #cec5b5;
    --control-line: #867b68;
    --gold: #705000;
    --gold-deep: #604300;
    --gold-tint: #f3ecdf;
    --primary: var(--gold-deep);
    --on-primary: #ffffff;
    --green: #005b29;
    --on-green: #ffffff;
    --red: #a00018;
    --withdraw: #960c20;
    --withdraw-hover: #960c20;
    --on-danger: #ffffff;
    --unread-dot: #dc3545;
    --unread-badge: #c0392b;
    --cpd-blue: #004b87;
    --cpd-gold: #705000;
    --cpd-green: #005b29;
    --cpd-red: #a00018;
    --cpd-teal: #00575a;
    --cpd-purple: #59317d;
    --cpd-slate: #354353;
    --attendance-amber: #744500;
    --attendance-missing: #7d1f55;
    --holiday-surface: #e9ecef;
    --holiday-ink: #37424d;
    --weekend-surface: #f3f4f5;
    --ledger-available: var(--cpd-green);
    --ledger-pending: #daa72f;
    --ledger-deducted: #b94b40;
    --progress-current: #936911;
    --control-fill: rgba(118,118,128,.12);
    --glass-fill: var(--surface);
    --sheet-fill: var(--surface);
    --scrim: #00000099;
    --shadow-float: 0 12px 34px #46351f1a;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    color-scheme: dark;
    --paper: #08090b;
    --surface: #111317;
    --ink: #ffffff;
    --muted: #d8dce2;
    --line: #454b54;
    --control-line: #7b8491;
    --gold: #e6c381;
    --gold-deep: #e6c381;
    --gold-tint: #282319;
    --primary: var(--gold);
    --on-primary: #111317;
    --green: #98d9ae;
    --on-green: #08090b;
    --red: #ffa99e;
    --withdraw: #960c20;
    --withdraw-hover: #960c20;
    --on-danger: #ffffff;
    --unread-dot: #dc3545;
    --unread-badge: #c0392b;
    --cpd-blue: #a8cfff;
    --cpd-gold: #e6c381;
    --cpd-green: #98d9ae;
    --cpd-red: #ffa99e;
    --cpd-teal: #96d8d5;
    --cpd-purple: #d0b9ef;
    --cpd-slate: #cbd5e2;
    --attendance-amber: #ffd08a;
    --attendance-missing: #ffb6dd;
    --holiday-surface: #2d333b;
    --holiday-ink: #e8edf2;
    --weekend-surface: #20252b;
    --ledger-available: var(--cpd-green);
    --ledger-pending: #daa72f;
    --ledger-deducted: #e8786b;
    --progress-current: #e9bd58;
    --control-fill: rgba(160,160,170,.18);
    --glass-fill: var(--surface);
    --sheet-fill: var(--surface);
    --scrim: #00000099;
    --shadow-float: 0 12px 34px #00000070;
  }
}