/* ==========================================================================
   colors.css - single source of truth for every color / design token used
   across the site's custom stylesheets (style.css, dashboard.css,
   t-miniapp.css, captive.css, 404.css, instant-pay.css).

   Load this BEFORE those files in every layout so their rules can reference
   var(--token) instead of hard-coded literals. Previously each file
   declared its own near-duplicate :root block and they'd drifted out of
   sync - --ink-muted was referenced in style.css but never defined anywhere,
   and none of them
   actually matched the official brand manual. This file is now the only
   place these are set.

   Values below are aligned to the Larryta logo brand palette and adjusted
   for UI contrast/readability. */

:root {
    /* ── Core brand ───────────────────────────────────────────────────────
       Logo source colors: incorporate green, incorporate gold, charcoal.
       UI primary is a darker green than the logo background so white text
       and small navigation labels keep enough contrast. */
    --brand-green: #609f3f;
    --brand-green-rgb: 96, 159, 63;
    --brand-gold: #d49a00;
    --brand-gold-rgb: 212, 154, 0;
    --brand-charcoal: #303030;
    --brand-charcoal-rgb: 48, 48, 48;

    --primary-color: #2f7d0b;
    --primary-dark-color: #225f08;
    --primary-light: var(--brand-green);
    --primary-rgb: 47, 125, 11;
    --primary-50: rgba(var(--primary-rgb), 0.06);
    --primary-100: rgba(var(--primary-rgb), 0.12);
    --primary-soft: rgba(var(--primary-rgb), 0.16);

    --accent-color: #f4d36a;
    --info-color: #0bbcd3;
    --secondary-color: var(--brand-gold);
    --secondary-rgb: var(--brand-gold-rgb);
    --action-warning: #f5c84c;
    --action-warning-hover: #f8d66f;
    --action-warning-text: #1f270c;
    --section-green: #f6fbf2;
    --section-green-strong: #eef8e8;
    --section-green-chip: #f1f8eb;

    /* ── Surfaces & text ──────────────────────────────────────────────────
       --ink-muted was used by style.css's disabled-input styling but had
       no definition anywhere; given a real value here. */
    --surface: #ffffff;
    --surface-muted: #f7faf5;
    --ink: #111827;
    --ink-soft: #475569;
    --ink-muted: #64748b;
    --ink-faint: #94a3b8;
    --ink-rgb: 15, 23, 42;
    --border-soft: rgba(var(--ink-rgb), 0.09);
    --border-strong: rgba(var(--ink-rgb), 0.14);

    /* ── Radius / shadow / focus-ring / motion scale ─────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-xs: 0 1px 2px rgba(var(--ink-rgb), 0.05);
    --shadow-soft: 0 1px 3px rgba(var(--ink-rgb), 0.06), 0 1px 2px rgba(var(--ink-rgb), 0.04);
    --shadow-card: 0 4px 16px -4px rgba(var(--ink-rgb), 0.08), 0 1px 3px rgba(var(--ink-rgb), 0.05);
    --shadow-lift: 0 8px 24px -8px rgba(var(--ink-rgb), 0.14), 0 2px 6px rgba(var(--ink-rgb), 0.05);

    --ring-primary: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
    --ring-offset: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--primary-rgb), 0.35);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── 404 / error page accents ─────────────────────────────────────────
       --error-brand/--error-text/--error-muted are aliases so 404.css
       didn't need every declaration rewritten; the *-dark/*-light shades
       are unique to that page's gradient treatment. */
    --error-brand: var(--primary-color);
    --error-brand-dark: #1f6510;
    --error-brand-light: #75d11e;
    --error-text: var(--ink);
    --error-muted: var(--ink-muted);
    --error-border: rgba(var(--ink-rgb), 0.08);

    /* ── Instant Pay (KHQR kiosk) dark theme ───────────────────────────────
       Deliberately its own darker, more saturated palette for a full-bleed
       dark display screen - not derived from --primary-color, which is
       tuned for light pages instead. */
    --instant-pay-green: #268003;
    --instant-pay-light: #3aa60c;
    --instant-pay-ink: #0a1f08;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --surface: #161d17;
    --surface-muted: #0f1510;
    --ink: #f4f7f4;
    --ink-soft: #c1cbc1;
    --ink-muted: #9aa79b;
    --ink-faint: #738174;
    --ink-rgb: 244, 247, 244;
    --border-soft: rgba(244, 247, 244, 0.1);
    --border-strong: rgba(244, 247, 244, 0.18);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-card: 0 8px 24px -10px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.24);
    --shadow-lift: 0 14px 36px -14px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.28);

    --ring-offset: 0 0 0 2px #161d17, 0 0 0 4px rgba(var(--primary-rgb), 0.42);
}

/* ── Dark theme compatibility layer ─────────────────────────────────────
   Many older page styles still set literal white/gray backgrounds. Keep
   this broad but component-focused so new dark/system theme works across
   public pages, dashboard, booking flows, and utility screens. */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body {
    background-color: var(--surface-muted);
    color: var(--ink);
}

:root[data-theme="dark"] :is(
    .card,
    .modal-content,
    .offcanvas,
    .accordion-item,
    .list-group-item,
    .dropdown-menu,
    .table-responsive,
    .table-payment,
    .table-print,
    .terms-card,
    .portal-card,
    .error-card,
    .glass-card,
    .payment-card,
    .slider-card,
    .app-card,
    .bus-card,
    .pay-info-card,
    .pay-table-card,
    .pay-cancel-info-card,
    .payment-summary-card,
    .payment-table-shell,
    .sch-seatmap-card,
    .pay-skl-card,
    .print-ticket-card,
    .ptk-scan-card,
    .destination-card,
    .step-card,
    .home-about-card,
    .about-service-card,
    .verification-card,
    .login-modal-content,
    .tc-modal .modal-content,
    .ticket-card,
    .ticket-body,
    .dashboard-card,
    .profile-card,
    .info-card,
    .notif-dropdown,
    .fb-card,
    .mini-card
) {
    background-color: var(--surface) !important;
    border-color: var(--border-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(
    .card-header,
    .modal-header,
    .modal-footer,
    .accordion-header,
    .accordion-button,
    .accordion-body,
    .pay-info-card-header,
    .pay-table-header,
    .payment-page,
    .payment-page .table-payment thead td,
    .print-ticket-page .card-header,
    .fb-card--muted,
    .mini-card--muted
) {
    background-color: var(--surface-muted) !important;
    border-color: var(--border-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] .ticket-card::before,
:root[data-theme="dark"] .ticket-card::after {
    background-color: var(--surface-muted) !important;
    border-color: var(--border-soft) !important;
}

:root[data-theme="dark"] :is(
    .form-control,
    .form-select,
    .input-group-text,
    .login-modal-input-group,
    .pax-form .input-group,
    .country-dropdown-menu,
    .direction-dropdown-menu,
    .fb-dropdown-menu,
    .mini-dropdown-menu
) {
    background-color: var(--surface) !important;
    border-color: var(--border-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(.form-control, .form-select)::placeholder {
    color: var(--ink-faint) !important;
}

:root[data-theme="dark"] :is(.form-control, .form-select):disabled,
:root[data-theme="dark"] :is(.form-control, .form-select)[readonly] {
    background-color: var(--surface-muted) !important;
    color: var(--ink-muted) !important;
}

:root[data-theme="dark"] :is(
    .table,
    .table-summary,
    .pay-success-table,
    .payment-page .table-payment,
    .print-ticket-page .table-print,
    .print-ticket-page .table-striped,
    .booking-table
) {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--border-soft);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
    --bs-table-striped-color: var(--ink);
    background-color: var(--surface) !important;
    border-color: var(--border-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(.table, .booking-table, .pay-success-table, .table-payment, .table-print) > :not(caption) > * > * {
    background-color: transparent !important;
    border-color: var(--border-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(
    .table thead th,
    .table thead td,
    .booking-table th,
    .pay-success-table thead th,
    .table-payment thead td
) {
    background-color: rgba(var(--primary-rgb), 0.12) !important;
    color: var(--ink-soft) !important;
}

:root[data-theme="dark"] :is(
    h1, h2, h3, h4, h5, h6,
    .text-dark,
    .text-body,
    .card-title,
    .section-title,
    .notif-title,
    .destination-title,
    .step-title,
    .verification-card h1,
    .login-modal-title,
    .booking-table td,
    .info-row strong
) {
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(
    .text-muted,
    .text-secondary,
    .lead,
    .card-text,
    .destination-copy,
    .step-copy,
    .verification-card p,
    .booking-code-label,
    .info-row span:first-child
) {
    color: var(--ink-muted) !important;
}

:root[data-theme="dark"] :is(.dropdown-item, .theme-dropdown-item, .lang-dropdown-item) {
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(.dropdown-item:hover, .dropdown-item:focus, .theme-dropdown-item:hover, .lang-dropdown-item:hover) {
    background-color: rgba(var(--primary-rgb), 0.12) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(
    .datepicker,
    .datepicker-dropdown,
    .ui-datepicker,
    .ui-widget-content
) {
    background: var(--surface) !important;
    border-color: var(--border-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(.datepicker table, .datepicker table tr th, .datepicker table tr td) {
    background: transparent !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(.datepicker table tr td.old, .datepicker table tr td.new, .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover) {
    color: var(--ink-faint) !important;
}

:root[data-theme="dark"] :is(.datepicker table tr td.day:hover, .datepicker table tr td.day.focused) {
    background: rgba(var(--primary-rgb), 0.14) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(.popover, .toast, .toast-header) {
    background-color: var(--surface) !important;
    border-color: var(--border-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] :is(.alert, .badge.bg-light) {
    border-color: var(--border-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] img:not(.logo):not(.navbar-brand img) {
    color-scheme: light;
}