/* ==========================================================================
   rushaid-tokens.css: Rushaid brand tokens (light and dark)
   --------------------------------------------------------------------------
   Source of truth: .claude/skills/rushaid-brand/SKILL.md and docs/branding.md.

   1. --rs-* are the brand tokens. Templates and new CSS use only these.
   2. The vendor tokens (--theme-color, --bg-*, --text-*, --border-*, ...)
      and the Bootstrap 5.3 variables (--bs-*) are re-pointed onto them, so
      the vendor theme (theme.css, theme-dark-vendor.css and the generated
      rushaid-theme-light.css) renders in beige and walnut in both modes.
   3. Dark mode lives on <html data-theme="dark">, set before first paint by
      layouts/include.blade.php and toggled by theme-switcher.js.

   Load order (layouts/include.blade.php): theme.css, theme-dark-vendor.css,
   rushaid-tokens.css, rushaid-theme-light.css, rushaid-theme.css,
   rushaid.css, rushaid-rtl.css.
   ========================================================================== */

:root {
    /* ---------- Brand palette (light) ---------- */
    --rs-bg: #F4EFE6;
    --rs-surface: #FBF8F2;
    --rs-surface-2: #EFE7DA;
    --rs-border: #E0D6C6;
    --rs-border-strong: #CDBDA8;
    --rs-walnut-900: #2B1810;
    --rs-walnut-700: #45291B;
    --rs-walnut-500: #6E4A33;
    --rs-walnut-300: #A9856A;
    --rs-walnut-100: #E6D8C8;
    --rs-text: #2B1810;
    --rs-text-muted: #6F5D50;
    --rs-on-walnut: #F9F4EC;
    --rs-on-walnut-muted: #D8C8B8;
    --rs-success: #2F6B4F;
    --rs-warning: #B9771F;
    --rs-danger: #9E3B2E;
    --rs-info: #3C5F7A;
    --rs-success-soft: #E3EDE6;
    --rs-warning-soft: #F5E9D6;
    --rs-danger-soft: #F3E1DD;
    --rs-info-soft: #E2E9EE;
    /* Text on the soft fills above (all at least 4.5:1 on their fill) */
    --rs-success-ink: #24533D;
    --rs-warning-ink: #7A4D12;
    --rs-danger-ink: #7F2E24;
    --rs-info-ink: #2F4B61;

    /* ---------- Roles ---------- */
    --rs-heading: var(--rs-walnut-900);
    --rs-link: var(--rs-walnut-500);
    --rs-link-hover: var(--rs-walnut-900);
    --rs-primary: var(--rs-walnut-700);
    --rs-primary-hover: var(--rs-walnut-900);
    --rs-on-primary: var(--rs-on-walnut);
    --rs-hover-fill: var(--rs-walnut-100);
    --rs-focus: var(--rs-walnut-500);
    --rs-focus-ring: 0 0 0 3px rgba(110, 74, 51, .28);
    --rs-plate: #F9F4EC;

    /* The walnut column (brand area and sidebar) is the same in both modes */
    --rs-sidebar-bg: #2B1810;
    --rs-sidebar-text: #F9F4EC;
    --rs-sidebar-text-muted: #D8C8B8;
    --rs-sidebar-hover: rgba(249, 244, 236, .07);
    --rs-sidebar-active-bg: #45291B;
    --rs-sidebar-active-bar: #A9856A;
    --rs-sidebar-divider: rgba(249, 244, 236, .12);

    /* Chart series, in this order */
    --rs-chart-1: #6E4A33;
    --rs-chart-2: #A9856A;
    --rs-chart-3: #3C5F7A;
    --rs-chart-4: #2F6B4F;
    --rs-chart-5: #B9771F;
    --rs-chart-6: #9E3B2E;
    --rs-chart-grid: #E0D6C6;
    --rs-chart-text: #6F5D50;

    /* ---------- Shape, space, type ---------- */
    --rs-radius-lg: 12px;
    --rs-radius: 8px;
    --rs-space-1: 8px;
    --rs-space-2: 16px;
    --rs-space-3: 24px;
    --rs-space-4: 32px;
    --rs-space-5: 40px;
    --rs-space-6: 48px;
    --rs-shadow-sm: 0 1px 2px rgba(43, 24, 16, .06);
    --rs-shadow: 0 2px 8px rgba(43, 24, 16, .08);
    --rs-shadow-lg: 0 8px 24px rgba(43, 24, 16, .12);
    --rs-font: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;

    /* ---------- Vendor tokens re-pointed (theme.css) ---------- */
    --theme-color: var(--rs-primary);
    --theme-color-rgb: 69, 41, 27;
    --theme-color-hover: var(--rs-primary-hover);
    --theme-color-soft: rgba(110, 74, 51, .10);
    --theme-color-text: var(--rs-walnut-500);
    --on-theme: var(--rs-on-primary);
    --primary: var(--rs-primary);
    --primary-color-sidebar: var(--rs-primary);

    --bg-app: var(--rs-bg);
    --bg-surface: var(--rs-surface);
    --bg-surface-raised: var(--rs-surface);
    --bg-surface-sunken: var(--rs-surface-2);
    --bg-sidebar: var(--rs-sidebar-bg);
    --bg-navbar: var(--rs-surface);
    --bg-overlay: rgba(43, 24, 16, .45);

    --border-subtle: var(--rs-border);
    --border-strong: var(--rs-border-strong);
    --border-input: var(--rs-border-strong);

    --text-primary: var(--rs-heading);
    --text-body: var(--rs-text);
    --text-secondary: var(--rs-text-muted);
    --text-muted: var(--rs-text-muted);

    --success: var(--rs-success);
    --success-soft: var(--rs-success-soft);
    --danger: var(--rs-danger);
    --danger-soft: var(--rs-danger-soft);
    --warning: var(--rs-warning);
    --warning-soft: var(--rs-warning-soft);
    --info: var(--rs-info);
    --info-soft: var(--rs-info-soft);
    --neutral: var(--rs-text-muted);
    --neutral-soft: rgba(111, 93, 80, .10);

    --r-sm: 6px;
    --r-md: var(--rs-radius);
    --r-lg: var(--rs-radius-lg);
    --r-xl: 16px;
    --r-input: var(--rs-radius);

    --shadow-xs: var(--rs-shadow-sm);
    --shadow-sm: var(--rs-shadow-sm);
    --shadow-md: var(--rs-shadow);
    --shadow-lg: var(--rs-shadow-lg);
    --shadow-xl: 0 12px 32px rgba(43, 24, 16, .16);

    --chart-grid: var(--rs-chart-grid);
    --chart-text: var(--rs-chart-text);

    /* ---------- Bootstrap 5.3 variables ---------- */
    --bs-font-sans-serif: var(--rs-font);
    --bs-body-font-family: var(--rs-font);
    --bs-body-bg: var(--rs-bg);
    --bs-body-bg-rgb: 244, 239, 230;
    --bs-body-color: var(--rs-text);
    --bs-body-color-rgb: 43, 24, 16;
    --bs-emphasis-color: var(--rs-walnut-900);
    --bs-emphasis-color-rgb: 43, 24, 16;
    --bs-heading-color: var(--rs-heading);
    --bs-secondary-color: var(--rs-text-muted);
    --bs-secondary-bg: var(--rs-surface-2);
    --bs-tertiary-color: var(--rs-text-muted);
    --bs-tertiary-bg: var(--rs-surface-2);
    --bs-border-color: var(--rs-border);
    --bs-border-color-translucent: rgba(43, 24, 16, .12);
    --bs-border-radius: var(--rs-radius);
    --bs-border-radius-lg: var(--rs-radius-lg);
    --bs-primary: var(--rs-primary);
    --bs-primary-rgb: 69, 41, 27;
    --bs-primary-text-emphasis: var(--rs-walnut-900);
    --bs-primary-bg-subtle: var(--rs-walnut-100);
    --bs-primary-border-subtle: var(--rs-walnut-300);
    --bs-secondary: var(--rs-text-muted);
    --bs-secondary-rgb: 111, 93, 80;
    --bs-success: var(--rs-success);
    --bs-success-rgb: 47, 107, 79;
    --bs-warning: var(--rs-warning);
    --bs-warning-rgb: 185, 119, 31;
    --bs-danger: var(--rs-danger);
    --bs-danger-rgb: 158, 59, 46;
    --bs-info: var(--rs-info);
    --bs-info-rgb: 60, 95, 122;
    --bs-light: var(--rs-surface-2);
    --bs-light-rgb: 239, 231, 218;
    --bs-dark: var(--rs-walnut-900);
    --bs-dark-rgb: 43, 24, 16;
    --bs-link-color: var(--rs-link);
    --bs-link-color-rgb: 110, 74, 51;
    --bs-link-hover-color: var(--rs-link-hover);
    --bs-link-hover-color-rgb: 43, 24, 16;
    --bs-focus-ring-color: rgba(110, 74, 51, .28);
    --bs-form-valid-color: var(--rs-success);
    --bs-form-valid-border-color: var(--rs-success);
    --bs-form-invalid-color: var(--rs-danger);
    --bs-form-invalid-border-color: var(--rs-danger);
    --bs-form-control-bg: var(--rs-surface);
}

/* ==========================================================================
   Dark mode
   ========================================================================== */
html[data-theme="dark"] {
    --rs-bg: #1E120C;
    --rs-surface: #2B1810;
    --rs-surface-2: #3A2418;
    --rs-border: #4A3225;
    --rs-border-strong: #5E4232;
    --rs-text: #F4EFE6;
    --rs-text-muted: #C9B8A8;
    --rs-success: #7FBF9C;
    --rs-warning: #E0AE63;
    --rs-danger: #E08A7C;
    --rs-info: #9DB9CF;
    --rs-success-soft: rgba(127, 191, 156, .16);
    --rs-warning-soft: rgba(224, 174, 99, .16);
    --rs-danger-soft: rgba(224, 138, 124, .16);
    --rs-info-soft: rgba(157, 185, 207, .16);
    --rs-success-ink: #A9D6BD;
    --rs-warning-ink: #EBC68E;
    --rs-danger-ink: #EDB0A6;
    --rs-info-ink: #C3D5E3;

    --rs-heading: #F4EFE6;
    --rs-link: #D4B89F;
    --rs-link-hover: #F4EFE6;
    /* Filled walnut-700 disappears on dark surfaces; the fill lifts to walnut-300 with dark ink */
    --rs-primary: #A9856A;
    --rs-primary-hover: #C2A086;
    --rs-on-primary: #1E120C;
    --rs-hover-fill: #3A2418;
    --rs-focus: #D4B89F;
    --rs-focus-ring: 0 0 0 3px rgba(212, 184, 159, .35);

    --rs-sidebar-bg: #2B1810;
    --rs-chart-1: #C2A086;
    --rs-chart-2: #8C6A52;
    --rs-chart-3: #9DB9CF;
    --rs-chart-4: #7FBF9C;
    --rs-chart-5: #E0AE63;
    --rs-chart-6: #E08A7C;
    --rs-chart-grid: #4A3225;
    --rs-chart-text: #C9B8A8;

    --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --rs-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    --rs-shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);

    --theme-color: var(--rs-primary) !important;
    --primary: var(--rs-primary) !important;
    --theme-color-rgb: 169, 133, 106;
    --theme-color-hover: var(--rs-primary-hover);
    --theme-color-soft: rgba(212, 184, 159, .14);
    --theme-color-text: var(--rs-link);
    --on-theme: var(--rs-on-primary);
    --primary-color-sidebar: var(--rs-primary);

    --bg-app: var(--rs-bg);
    --bg-surface: var(--rs-surface);
    --bg-surface-raised: var(--rs-surface-2);
    --bg-surface-sunken: #24150E;
    --bg-sidebar: var(--rs-sidebar-bg);
    --bg-navbar: var(--rs-surface);
    --bg-overlay: rgba(0, 0, 0, .6);

    --border-subtle: var(--rs-border);
    --border-strong: var(--rs-border-strong);
    --border-input: var(--rs-border-strong);

    --text-primary: var(--rs-heading);
    --text-body: var(--rs-text);
    --text-secondary: var(--rs-text-muted);
    --text-muted: var(--rs-text-muted);

    --success: var(--rs-success);
    --success-soft: var(--rs-success-soft);
    --danger: var(--rs-danger);
    --danger-soft: var(--rs-danger-soft);
    --warning: var(--rs-warning);
    --warning-soft: var(--rs-warning-soft);
    --info: var(--rs-info);
    --info-soft: var(--rs-info-soft);
    --neutral: var(--rs-text-muted);
    --neutral-soft: rgba(201, 184, 168, .14);

    --shadow-xs: var(--rs-shadow-sm);
    --shadow-sm: var(--rs-shadow-sm);
    --shadow-md: var(--rs-shadow);
    --shadow-lg: var(--rs-shadow-lg);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, .55);

    --chart-grid: var(--rs-chart-grid);
    --chart-text: var(--rs-chart-text);

    --bs-body-bg: var(--rs-bg);
    --bs-body-bg-rgb: 30, 18, 12;
    --bs-body-color: var(--rs-text);
    --bs-body-color-rgb: 244, 239, 230;
    --bs-emphasis-color: var(--rs-heading);
    --bs-emphasis-color-rgb: 244, 239, 230;
    --bs-heading-color: var(--rs-heading);
    --bs-secondary-color: var(--rs-text-muted);
    --bs-secondary-bg: var(--rs-surface-2);
    --bs-tertiary-color: var(--rs-text-muted);
    --bs-tertiary-bg: var(--rs-surface-2);
    --bs-border-color: var(--rs-border);
    --bs-border-color-translucent: rgba(244, 239, 230, .10);
    --bs-primary: var(--rs-primary);
    --bs-primary-rgb: 169, 133, 106;
    --bs-primary-text-emphasis: #E6D8C8;
    --bs-primary-bg-subtle: #3A2418;
    --bs-primary-border-subtle: #6E4A33;
    --bs-secondary: var(--rs-text-muted);
    --bs-secondary-rgb: 201, 184, 168;
    --bs-success: var(--rs-success);
    --bs-success-rgb: 127, 191, 156;
    --bs-warning: var(--rs-warning);
    --bs-warning-rgb: 224, 174, 99;
    --bs-danger: var(--rs-danger);
    --bs-danger-rgb: 224, 138, 124;
    --bs-info: var(--rs-info);
    --bs-info-rgb: 157, 185, 207;
    --bs-light: var(--rs-surface-2);
    --bs-light-rgb: 58, 36, 24;
    --bs-dark: #F4EFE6;
    --bs-dark-rgb: 244, 239, 230;
    --bs-link-color: var(--rs-link);
    --bs-link-color-rgb: 212, 184, 159;
    --bs-link-hover-color: var(--rs-link-hover);
    --bs-link-hover-color-rgb: 244, 239, 230;
    --bs-focus-ring-color: rgba(212, 184, 159, .35);
    --bs-form-control-bg: var(--rs-surface);
    --bs-form-control-disabled-bg: var(--rs-surface-2);
}