/* Siyara design tokens: hybrid look (docs/superpowers/specs/2026-09-25-web-redesign-design.md).
   Dark is the default; html[data-theme="light"] switches to alabaster. Every colour in the new shell comes from here. */

:root {
    color-scheme: dark;

    /* surfaces */
    --sy-bg:            #0a0e15;
    --sy-side:          #0d121c;
    --sy-side-border:   #253041;
    --sy-side-text:     #aab4c4;
    --sy-side-active:   rgba(201,165,107,0.14);
    --sy-side-strong:   #ffffff;               /* sidebar hover / active text */
    --sy-side-hover:    rgba(255,255,255,0.05);
    --sy-alert-count-bg: rgba(220,38,38,0.22);
    --sy-alert-count-fg: #fca5a5;
    --sy-top:           #0d121c;
    --sy-top-border:    #253041;
    --sy-surface:       #121926;
    --sy-surface-2:     #0e141f;
    --sy-card:          #161f2d;
    --sy-border:        #344256;
    --sy-input:         #121926;
    --sy-input-border:  #3a4658;

    /* text */
    --sy-text:          #eef2f7;
    --sy-heading:       #ffffff;
    --sy-muted:         #aab4c4;
    --sy-faint:         #8a97ab;

    /* brand + money */
    --sy-gold:          #c9a56b;
    --sy-gold-border:   rgba(201,165,107,0.45);
    --sy-money:         #d9bb85;
    --sy-link:          #d9bb85;
    --sy-primary:       #c9a56b;
    --sy-primary-hover: #d9bb85;
    --sy-on-primary:    #0a0e15;
    --sy-focus:         rgba(201,165,107,0.35);

    /* live counters */
    --sy-timer:         #34d399;

    /* Egyptian plate */
    --sy-plate-bg:      #eef2f7;
    --sy-plate-text:    #0a0e15;
    --sy-plate-border:  #eef2f7;

    /* vivid status pills (job + item status) */
    --sy-pill-green:  #10b981;  --sy-on-green:  #03140d;
    --sy-pill-orange: #f97316;  --sy-on-orange: #1a0a00;
    --sy-pill-amber:  #f5b301;  --sy-on-amber:  #1a1200;
    --sy-pill-blue:   #2563eb;  --sy-on-blue:   #ffffff;
    --sy-pill-red:    #dc2626;  --sy-on-red:    #ffffff;
    --sy-pill-violet: #7c3aed;  --sy-on-violet: #ffffff;
    --sy-pill-gray:   #475569;  --sy-on-gray:   #ffffff;

    /* subtle chips (secondary signals): text colour, tint derived in siyara.css */
    --sy-chip-amber:  #f5c451;
    --sy-chip-orange: #fb923c;
    --sy-chip-blue:   #60a5fa;
    --sy-chip-green:  #34d399;
    --sy-chip-red:    #f87171;

    /* paper (printed / PDF documents): always light, never follows the screen theme */
    --sy-paper:          #ffffff;
    --sy-paper-desk:     #e9e7e1;               /* screen background around the sheet */
    --sy-paper-tint:     #f6f4ef;               /* zebra rows, subtotal rows */
    --sy-paper-line:     #dcdfe4;
    --sy-paper-rule:     #9aa3af;               /* signature lines */
    --sy-ink:            #141922;
    --sy-ink-muted:      #5b6472;
    --sy-ink-on-dark:    #ffffff;
    --sy-ink-soft-on-dark: #c9ced6;
    --sy-paper-gold:     #a8844c;               /* gold that stays readable on white */
    --sy-paper-gold-2:   #d9c08e;
    --sy-paper-green:    #047857;  --sy-paper-green-bg: #e3f4ec;
    --sy-paper-amber:    #8a5a00;  --sy-paper-amber-bg: #fbf0d6;
    --sy-paper-red:      #b91c1c;  --sy-paper-red-bg:   #fbe7e7;
    --sy-paper-gray-bg:  #eef0f3;

    /* type + shape */
    --sy-font:     'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --sy-font-ar:  'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
    --sy-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    --sy-radius:    10px;
    --sy-radius-sm: 7px;
    --sy-side-w:    244px;
    --sy-top-h:     60px;

    /* Bootstrap 5.3 variables follow the tokens, so stock components match the theme */
    --bs-body-bg:            var(--sy-bg);
    --bs-body-color:         var(--sy-text);
    --bs-body-font-family:   var(--sy-font);
    --bs-border-color:       var(--sy-border);
    --bs-secondary-color:    var(--sy-muted);
    --bs-secondary-bg:       var(--sy-surface-2);
    --bs-tertiary-bg:        var(--sy-surface-2);
    --bs-emphasis-color:     var(--sy-heading);
    --bs-heading-color:      var(--sy-heading);
    --bs-link-color:         var(--sy-link);
    --bs-link-color-rgb:     217,187,133;
    --bs-link-hover-color:   var(--sy-gold);
    --bs-link-hover-color-rgb: 201,165,107;
    --bs-code-color:         var(--sy-money);
}

html[data-theme="light"] {
    color-scheme: light;

    --sy-bg:            #f7f6f3;
    --sy-side:          #ffffff;
    --sy-side-border:   #cdd2da;
    --sy-side-text:     #4b5563;
    --sy-side-active:   rgba(184,147,90,0.16);
    --sy-side-strong:   #111827;
    --sy-side-hover:    rgba(17,24,39,0.05);
    --sy-alert-count-bg: #fee2e2;
    --sy-alert-count-fg: #b91c1c;
    --sy-top:           #ffffff;
    --sy-top-border:    #cdd2da;
    --sy-surface:       #ffffff;
    --sy-surface-2:     #f3f2ee;
    --sy-card:          #ffffff;
    --sy-border:        #cdd2da;
    --sy-input:         #ffffff;
    --sy-input-border:  #c3c9d2;

    --sy-text:          #111827;
    --sy-heading:       #111827;
    --sy-muted:         #4b5563;
    --sy-faint:         #6b7280;

    --sy-gold:          #b8935a;
    --sy-gold-border:   #e2d3b8;
    --sy-money:         #8a6a36;
    --sy-link:          #8a6a36;
    --sy-primary:       #141922;
    --sy-primary-hover: #262d3a;
    --sy-on-primary:    #ffffff;
    --sy-focus:         rgba(138,106,54,0.28);

    --sy-timer:         #047857;

    --sy-plate-bg:      #ffffff;
    --sy-plate-text:    #111827;
    --sy-plate-border:  #6b7280;

    --sy-pill-green:  #047857;  --sy-on-green:  #ffffff;
    --sy-pill-orange: #c2410c;  --sy-on-orange: #ffffff;
    --sy-pill-amber:  #b45309;  --sy-on-amber:  #ffffff;
    --sy-pill-blue:   #1d4ed8;  --sy-on-blue:   #ffffff;
    --sy-pill-red:    #b91c1c;  --sy-on-red:    #ffffff;
    --sy-pill-violet: #6d28d9;  --sy-on-violet: #ffffff;
    --sy-pill-gray:   #475569;  --sy-on-gray:   #ffffff;

    --sy-chip-amber:  #9a5b00;
    --sy-chip-orange: #b54708;
    --sy-chip-blue:   #1d4ed8;
    --sy-chip-green:  #047857;
    --sy-chip-red:    #b91c1c;

    --bs-link-color-rgb:       138,106,54;
    --bs-link-hover-color-rgb: 184,147,90;
}