:root {
    /*
     * Creative AI Design System v0.2
     *
     * Theme architecture:
     *
     * Brand tokens
     *      ↓
     * Semantic tokens
     *      ↓
     * Components / modules
     *
     * Product CSS should consume semantic tokens instead
     * of hardcoding light/dark colours.
     */

    color-scheme: light;
    /* ============================================================
     * BRAND
     * ============================================================ */

    --ca-brand-orange: #fc782e;
    --ca-brand-orange-hover: #e9681f;
    --ca-brand-orange-strong: #d95b12;
    --ca-brand-orange-soft: #fff1e8;
    --ca-brand-orange-muted: #fff8f4;
    --ca-brand-charcoal: #3c3c3b;
    --ca-brand-charcoal-soft: #4c4c4c;
    /* ============================================================
     * SEMANTIC — LIGHT
     * ============================================================ */

    --ca-bg: #f7f8fa;
    --ca-surface: #ffffff;
    --ca-surface-muted: #f8f8f7;
    --ca-surface-strong: #f2f2f0;
    --ca-text: #242628;
    --ca-text-muted: #6f7378;
    --ca-text-soft: #a0a4a8;
    --ca-border: #e5e5e2;
    --ca-border-strong: #d8d8d4;
    --ca-primary: var(--ca-brand-orange);
    --ca-primary-hover: var(--ca-brand-orange-hover);
    --ca-primary-strong: var(--ca-brand-orange-strong);
    --ca-primary-soft: var(--ca-brand-orange-soft);
    --ca-primary-muted: var(--ca-brand-orange-muted);
    --ca-primary-rgb: 252, 120, 46;
    --ca-success: #16865d;
    --ca-success-soft: #ecf8f2;
    --ca-warning: #c87510;
    --ca-warning-soft: #fff7e8;
    --ca-danger: #cf3e46;
    --ca-danger-soft: #fff0f1;
    --ca-info: #2563eb;
    --ca-info-soft: #eff6ff;
    --ca-info-border: #bfdbfe;
    --ca-topbar-bg: rgba(255, 255, 255, .96);
    --ca-control-bg: var(--ca-surface);
    --ca-control-disabled-bg: var(--ca-surface-muted);
    --ca-focus-ring: 0 0 0 3px rgba(var(--ca-primary-rgb), .16);
    /* ============================================================
     * LAYOUT
     * ============================================================ */

    --ca-sidebar-width: 248px;
    --ca-topbar-height: 68px;
    /* ============================================================
     * RADIUS
     * ============================================================ */

    --ca-radius-sm: 8px;
    --ca-radius-md: 12px;
    --ca-radius-lg: 16px;
    /* ============================================================
     * SHADOWS
     * ============================================================ */

    --ca-shadow-sm: 0 1px 2px rgba(60, 60, 59, .04);
    --ca-shadow-md: 0 10px 32px rgba(60, 60, 59, .07);
    --ca-shadow-lg: 0 20px 55px rgba(60, 60, 59, .10);
    /* ============================================================
     * MOTION
     * ============================================================ */

    --ca-transition: 160ms ease;
    /* ============================================================
     * BOOTSTRAP BRIDGE
     * ============================================================ */

    --bs-body-bg: var(--ca-bg);
    --bs-body-color: var(--ca-text);
    --bs-emphasis-color: var(--ca-text);
    --bs-secondary-color: var(--ca-text-muted);
    --bs-secondary-bg: var(--ca-surface-strong);
    --bs-tertiary-bg: var(--ca-surface-muted);
    --bs-border-color: var(--ca-border);
    --bs-link-color: var(--ca-primary-strong);
    --bs-link-hover-color: var(--ca-primary-hover);
}


/* ================================================================
 * DARK
 * ================================================================ */

html[data-theme="dark"] {
    color-scheme: dark;
    /* ------------------------------------------------------------
     * SURFACES
     * ------------------------------------------------------------ */

    --ca-bg: #0f1115;
    --ca-surface: #171a1f;
    --ca-surface-muted: #1d2127;
    --ca-surface-strong: #252a31;
    /* ------------------------------------------------------------
     * TYPOGRAPHY
     * ------------------------------------------------------------ */

    --ca-text: #f3f4f6;
    --ca-text-muted: #a9b0b9;
    --ca-text-soft: #747d88;
    /* ------------------------------------------------------------
     * BORDERS
     * ------------------------------------------------------------ */

    --ca-border: #2d333b;
    --ca-border-strong: #3b434d;
    /* ------------------------------------------------------------
     * PRIMARY
     *
     * Orange remains the Creative AI identity.
     * The strong semantic variant becomes lighter in dark mode
     * to preserve contrast.
     * ------------------------------------------------------------ */

    --ca-primary: #fc782e;
    --ca-primary-hover: #ff8a4c;
    --ca-primary-strong: #ff9a62;
    --ca-primary-soft: rgba(252, 120, 46, .14);
    --ca-primary-muted: rgba(252, 120, 46, .08);
    /*
     * Compatibility while legacy module CSS is audited.
     * Some existing selectors consume these brand surfaces
     * directly instead of their semantic equivalents.
     */

    --ca-brand-orange-soft: rgba(252, 120, 46, .14);
    --ca-brand-orange-muted: rgba(252, 120, 46, .08);
    /* ------------------------------------------------------------
     * STATUS
     * ------------------------------------------------------------ */

    --ca-success: #58d6a5;
    --ca-success-soft: rgba(88, 214, 165, .12);
    --ca-warning: #f0b75b;
    --ca-warning-soft: rgba(240, 183, 91, .12);
    --ca-danger: #ff7b83;
    --ca-danger-soft: rgba(255, 123, 131, .12);
    --ca-info: #78a7ff;
    --ca-info-soft: rgba(120, 167, 255, .12);
    --ca-info-border: rgba(120, 167, 255, .30);
    /* ------------------------------------------------------------
     * SHELL / CONTROLS
     * ------------------------------------------------------------ */

    --ca-topbar-bg: rgba(23, 26, 31, .94);
    --ca-control-bg: #171a1f;
    --ca-control-disabled-bg: #20242a;
    /* ------------------------------------------------------------
     * SHADOWS
     * ------------------------------------------------------------ */

    --ca-shadow-sm: 0 1px 2px rgba(0, 0, 0, .20);
    --ca-shadow-md: 0 12px 34px rgba(0, 0, 0, .26);
    --ca-shadow-lg: 0 22px 60px rgba(0, 0, 0, .34);
    --ca-focus-ring: 0 0 0 3px rgba(var(--ca-primary-rgb), .24);
    /* ------------------------------------------------------------
     * BOOTSTRAP
     * ------------------------------------------------------------ */

    --bs-body-bg: var(--ca-bg);
    --bs-body-color: var(--ca-text);
    --bs-emphasis-color: var(--ca-text);
    --bs-secondary-color: var(--ca-text-muted);
    --bs-secondary-bg: var(--ca-surface-strong);
    --bs-tertiary-bg: var(--ca-surface-muted);
    --bs-border-color: var(--ca-border);
    --bs-link-color: var(--ca-primary-strong);
    --bs-link-hover-color: var(--ca-primary-hover);
}


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