/* ==========================================================================
   ORECS Global Theme Tokens
   ==========================================================================
   Default Theme: Dark (active under :root)
   Light Theme Override: body.skin-light
   ========================================================================== */

:root {
    /* --- Core Page & Layout --- */
    --tok-bg: #101820;
    --tok-planner-bg: radial-gradient(circle at top left, rgba(31, 111, 235, 0.22), transparent 34%),
        linear-gradient(135deg, #101820 0%, #151f2b 48%, #0b1117 100%);
    --tok-text: #e5edf6;
    --tok-text-muted: #9fb0c3;
    --tok-text-muted-dark: #718096;
    --tok-border: #2f4258;
    --tok-border-light: rgba(255, 255, 255, 0.22);
    --tok-shadow: 0 14px 32px rgba(0, 0, 0, 0.30);
    --tok-shadow-sm: 0 10px 20px rgba(0, 0, 0, 0.22);
    --tok-table-header-bg: rgba(255, 255, 255, 0.06);
    --tok-table-hover-bg: rgba(255, 255, 255, 0.02);

    /* --- Table (fontstyleGrd) --- */
    --tok-grd-header-bg:    #111827;
    --tok-grd-header-text:  #ffffff;
    --tok-grd-footer-bg:    #111827;
    --tok-grd-footer-text:  #ffffff;
    --tok-grd-body-bg:      #ffffff;
    --tok-grd-body-text:    #334155;
    --tok-grd-body-alt-bg:  #f8fafc;
    --tok-grd-border:       #e2e8f0;
    --tok-grd-hover-bg:     #e8f0fe;
    --tok-grd-link:         #1d4ed8;
    --tok-grd-link-hover:   #1e40af;

    /* --- Standard ORECS Skin-linked Core Variables --- */
    --accent: #1f6feb;
    --accent-2: #1849a9;
    --accent-soft: rgba(31, 111, 235, 0.16);
    --accent-soft-2: rgba(31, 111, 235, 0.22);
    --line: #2f4258;
    --line-2: #32465e;
    --canvas: #101820;
    --panel: #162232;
    --card: rgba(30, 41, 55, 0.98);
    --card-2: #101820;
    --text: #e5edf6;
    --muted: #9fb0c3;
    --muted-2: #718096;

    /* --- Cards & Containers --- */
    --tok-card-bg: linear-gradient(180deg, rgba(30, 41, 55, 0.98), rgba(17, 24, 39, 0.98));
    --tok-card-inner-bg: #101820;
    --tok-card-hover-border: #60a5fa;

    /* --- Form Controls --- */
    --tok-input-bg: #0f1720;
    --tok-input-text: #f8fafc;
    --tok-input-border: #40546b;
    --tok-input-focus-border: #60a5fa;
    --tok-input-focus-shadow: rgba(96, 165, 250, 0.16);

    /* --- Brand & Highlights --- */
    --tok-primary: #1f6feb;
    --tok-primary-hover: #2f81f7;
    --tok-primary-soft: rgba(31, 111, 235, 0.16);
    --tok-primary-glow: rgba(96, 165, 250, 0.14);
    --tok-primary-shadow: rgba(31, 111, 235, 0.22);

    /* --- Metric Colors --- */
    --tok-metric-default: #60a5fa;
    --tok-metric-completed: #22c55e;
    --tok-metric-notcompleted: #f87171;
    --tok-metric-pending: #fbbf24;
    --tok-metric-bg: linear-gradient(180deg, #1e2937, #141d27);

    /* --- Hero Banner --- */
    --tok-hero-bg: linear-gradient(135deg, #0f2f4f, #1f6feb 58%, #1849a9);
    --tok-hero-border: rgba(134, 182, 255, 0.35);
    --tok-hero-text: #ffffff;
    --tok-hero-subtext: #dbeafe;

    /* --- Impact Categories --- */
    --tok-impact-header-bg: linear-gradient(135deg, #07111d, #0f2f4f);
    --tok-impact-card-bg: #162232;
    --tok-impact-card-border: #344860;
    --tok-impact-group-bg: rgba(15, 23, 32, 0.72);
    --tok-impact-option-bg: #0f1720;
    --tok-impact-option-border: #3b5168;
    --tok-impact-option-text: #d9e6f2;

    /* --- State Badges & Indicators --- */
    --tok-badge-pending-bg: rgba(250, 204, 21, 0.16);
    --tok-badge-pending-text: #fde68a;
    --tok-badge-pending-border: rgba(250, 204, 21, 0.38);

    --tok-badge-completed-bg: rgba(34, 197, 94, 0.16);
    --tok-badge-completed-text: #bbf7d0;
    --tok-badge-completed-border: rgba(34, 197, 94, 0.38);

    --tok-badge-notcompleted-bg: rgba(248, 113, 113, 0.16);
    --tok-badge-notcompleted-text: #fecaca;
    --tok-badge-notcompleted-border: rgba(248, 113, 113, 0.38);

    --tok-badge-notice-bg: rgba(251, 191, 36, 0.12);
    --tok-badge-notice-text: #fde68a;
    --tok-badge-notice-border: rgba(251, 191, 36, 0.36);

    /* --- Review Panel --- */
    --tok-review-bg: #111c29;
    --tok-review-reason-bg: rgba(251, 146, 60, 0.10);
    --tok-review-reason-border: rgba(251, 146, 60, 0.28);
    --tok-review-reason-title: #ffffff;
    --tok-review-locked-bg: rgba(15, 23, 32, 0.80);
    --tok-review-locked-border: #32465e;

    /* --- Semantic UI Tokens --- */
    --tok-msg-success: #86efac;
    --tok-msg-error: #fca5a5;
    --tok-dev-header-bg: #1a1a1a;
    --tok-dev-header-span: #9fb0c3;
    --tok-insight-small: #e5e7eb;

    /* --- Expense Entry Specific Tokens --- */
    --brand: var(--tok-primary);
    --brand-dark: var(--tok-primary-hover);
    --brand-soft: var(--tok-primary-soft);
    --ink: var(--tok-text);
    --ink-soft: var(--tok-text-muted);
    --line-strong: var(--tok-border);
    --bg: var(--tok-bg);
    --green: var(--tok-metric-completed);
    --orange: var(--tok-metric-pending);
    --danger: var(--tok-metric-notcompleted);
    --radius: 16px;
    --radius-sm: 10px;

    /* --- Legacy ORECS Development Variables (Dark Defaults) --- */
    --orecs-bg: #202020;
    --orecs-grid-a: rgba(255, 255, 255, .035);
    --orecs-grid-b: rgba(255, 255, 255, .025);
    --orecs-card: #2b2b2b;
    --orecs-card2: #333333;
    --orecs-text: #ffffff;
    --orecs-strong: #ffffff;
    --orecs-muted: #c7c7c7;
    --orecs-border: #777777;
    --orecs-field: #222222;
    --orecs-primary: #f5a400;
    --orecs-primary-dark: #d88d00;
    --orecs-danger: #ef4444;
    --orecs-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    --orecs-topbar-bg: rgba(0, 0, 0, .28);
    --orecs-tabs-bg: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px), #202020;
    --orecs-tabs-border-bottom: rgba(255, 255, 255, 0.08);
    --orecs-tab-bg: #252525;
    --orecs-tab-text: #ffffff;
    --orecs-tab-border: #777777;
    --orecs-active-tab-text: #000000;
    --orecs-primary-soft: rgba(245, 164, 0, .14);
    --orecs-primary-border: rgba(245, 164, 0, .45);
    --orecs-danger-soft: rgba(239, 68, 68, .12);
    --orecs-danger-text: #ffb4b4;
    --orecs-danger-border: rgba(239, 68, 68, .45);
    --orecs-mandatory-color: #ffd24d;
}

body.skin-light {
    /* --- Core Page & Layout --- */
    --tok-bg: #f4f7fb;
    --tok-planner-bg: #f4f7fb;
    --tok-text: #0f172a;
    --tok-text-muted: #556579;
    --tok-text-muted-dark: #64748b;
    --tok-border: #d0d9e8;
    --tok-border-light: rgba(0, 0, 0, 0.12);
    --tok-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    --tok-shadow-sm: 0 6px 15px rgba(15, 23, 42, 0.04);
    --tok-table-header-bg: rgba(31, 111, 235, 0.12);
    --tok-table-hover-bg: rgba(31, 111, 235, 0.04);

    /* --- Table (fontstyleGrd) --- */
    --tok-grd-header-bg:    #111827;
    --tok-grd-header-text:  #ffffff;
    --tok-grd-footer-bg:    #111827;
    --tok-grd-footer-text:  #ffffff;
    --tok-grd-body-bg:      #ffffff;
    --tok-grd-body-text:    #334155;
    --tok-grd-body-alt-bg:  #f8fafc;
    --tok-grd-border:       #e2e8f0;
    --tok-grd-hover-bg:     #e8f0fe;
    --tok-grd-link:         #1d4ed8;
    --tok-grd-link-hover:   #1e40af;

    /* --- Standard ORECS Skin-linked Core Variables --- */
    --accent: #2563eb;
    --accent-2: #1e3a8a;
    --accent-soft: rgba(37, 99, 235, 0.10);
    --accent-soft-2: rgba(37, 99, 235, 0.14);
    --line: #d7e1ee;
    --line-2: #cfd8e3;
    --canvas: #e7ecf2;
    --panel: #f2f5f9;
    --card: #f7f9fd;
    --card-2: #ffffff;
    --text: #0f172a;
    --muted: #556579;
    --muted-2: #475569;

    /* --- Cards & Containers --- */
    --tok-card-bg: #ffffff;
    --tok-card-inner-bg: #f8fafc;
    --tok-card-hover-border: #2563eb;

    /* --- Form Controls --- */
    --tok-input-bg: #ffffff;
    --tok-input-text: #0f172a;
    --tok-input-border: #cbd5e1;
    --tok-input-focus-border: #2563eb;
    --tok-input-focus-shadow: rgba(37, 99, 235, 0.12);

    /* --- Brand & Highlights --- */
    --tok-primary: #2563eb;
    --tok-primary-hover: #1d4ed8;
    --tok-primary-soft: rgba(37, 99, 235, 0.08);
    --tok-primary-glow: rgba(37, 99, 235, 0.10);
    --tok-primary-shadow: rgba(37, 99, 235, 0.15);

    /* --- Metric Colors --- */
    --tok-metric-default: #2563eb;
    --tok-metric-completed: #16a34a;
    --tok-metric-notcompleted: #dc2626;
    --tok-metric-pending: #d97706;
    --tok-metric-bg: linear-gradient(180deg, #f8fafc, #f1f5f9);

    /* --- Hero Banner --- */
    --tok-hero-bg: linear-gradient(135deg, #1e3a8a, #2563eb 58%, #3b82f6);
    --tok-hero-border: rgba(37, 99, 235, 0.20);
    --tok-hero-text: #ffffff;
    --tok-hero-subtext: #eff6ff;

    /* --- Impact Categories --- */
    --tok-impact-header-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    --tok-impact-card-bg: #f8fafc;
    --tok-impact-card-border: #cbd5e1;
    --tok-impact-group-bg: rgba(241, 245, 249, 0.95);
    --tok-impact-option-bg: #ffffff;
    --tok-impact-option-border: #cbd5e1;
    --tok-impact-option-text: #334155;

    /* --- State Badges & Indicators --- */
    --tok-badge-pending-bg: rgba(217, 119, 6, 0.08);
    --tok-badge-pending-text: #b45309;
    --tok-badge-pending-border: rgba(217, 119, 6, 0.24);

    --tok-badge-completed-bg: rgba(22, 163, 74, 0.08);
    --tok-badge-completed-text: #15803d;
    --tok-badge-completed-border: rgba(22, 163, 74, 0.24);

    --tok-badge-notcompleted-bg: rgba(220, 38, 38, 0.08);
    --tok-badge-notcompleted-text: #b91c1c;
    --tok-badge-notcompleted-border: rgba(220, 38, 38, 0.24);

    --tok-badge-notice-bg: rgba(217, 119, 6, 0.06);
    --tok-badge-notice-text: #b45309;
    --tok-badge-notice-border: rgba(217, 119, 6, 0.20);

    /* --- Review Panel --- */
    --tok-review-bg: #f8fafc;
    --tok-review-reason-bg: rgba(217, 119, 6, 0.06);
    --tok-review-reason-border: rgba(217, 119, 6, 0.20);
    --tok-review-reason-title: #0f172a;
    --tok-review-locked-bg: rgba(241, 245, 249, 0.90);
    --tok-review-locked-border: #cbd5e1;

    /* --- Semantic UI Tokens --- */
    --tok-msg-success: #16a34a;
    --tok-msg-error: #dc2626;
    --tok-dev-header-bg: #ffffff;
    --tok-dev-header-span: #475569;
    --tok-insight-small: var(--muted);

    /* --- Expense Entry Specific Tokens --- */
    --brand: #1f6feb;
    --brand-dark: #1849a9;
    --brand-soft: #eef5ff;
    --ink: #101828;
    --ink-soft: #344054;
    --line-strong: #d0d5dd;
    --bg: #f4f7fb;
    --green: #099250;
    --orange: #dc6803;
    --danger: #d92d20;
    --radius: 16px;
    --radius-sm: 10px;

    /* --- Legacy ORECS Development Variables (Light Overrides) --- */
    --orecs-bg: #f4f7fb;
    --orecs-grid-a: rgba(0, 0, 0, .02);
    --orecs-grid-b: rgba(0, 0, 0, .015);
    --orecs-card: #ffffff;
    --orecs-card2: #f0f4f8;
    --orecs-text: #334155;
    --orecs-strong: #0f172a;
    --orecs-muted: #64748b;
    --orecs-border: #cbd5e1;
    --orecs-field: #f8fafc;
    --orecs-primary: #1f6feb;
    --orecs-primary-dark: #1849a9;
    --orecs-danger: #ef4444;
    --orecs-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    --orecs-topbar-bg: rgba(255, 255, 255, .7);
    --orecs-tabs-bg: linear-gradient(rgba(0, 0, 0, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .02) 1px, transparent 1px), #e2e8f0;
    --orecs-tabs-border-bottom: rgba(0, 0, 0, 0.08);
    --orecs-tab-bg: #f1f5f9;
    --orecs-tab-text: #475569;
    --orecs-tab-border: #cbd5e1;
    --orecs-active-tab-text: #ffffff;
    --orecs-primary-soft: rgba(31, 111, 235, .1);
    --orecs-primary-border: rgba(31, 111, 235, .35);
    --orecs-danger-soft: rgba(239, 68, 68, .1);
    --orecs-danger-text: #dc2626;
    --orecs-danger-border: rgba(239, 68, 68, .3);
    --orecs-mandatory-color: #1849a9;
}