@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    /* ===== CurtaDrama Design System v2 — Light Canvas / Violet Brand ===== */
    /* "Two-canvas" layout: navbar, hero and footer keep a dark chrome band
       (--canvas-dark); everything else runs on the light canvas (--bg). */

    /* Core Palette */
    --brand-primary: #7132F5;
    --brand-primary-hover: #5741D8;
    --brand-danger: #DC3545;
    --brand-danger-hover: #C82333;
    --brand-accent: #F5A623;
    --brand-white: #FFFFFF;

    /* Bootstrap Overrides */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 113, 50, 245;

    /* Backgrounds */
    --bg: #FFFFFF;
    --bg-soft: #F7F7FA;
    --surface: #FFFFFF;
    --surface-hover: #F7F7FA;
    --surface-base: #FFFFFF;
    --surface-muted: #F7F7FA;
    --surface-sand: #F7F7FA;

    /* Typography colors */
    --text: #15151A;
    --text-dim: #5F6270;
    --text-faint: #8B8E9B;

    /* Borders */
    --border: #E5E5EB;
    --border-color: #E5E5EB;
    --border-color-soft: #E5E5EB;

    /* Dark chrome (navbar, hero, footer, offcanvas, dropdowns, search overlay) */
    --canvas-dark: #150F24;
    --on-dark: #F8FAFC;
    --on-primary: #FFFFFF;
    --on-orange: #FFFFFF;

    /* ---- Compatibility aliases (kept so existing selectors resolve temporarily) ---- */
    --brand-orange: var(--brand-primary);
    --brand-danger-border: var(--brand-danger);
    --brand-primary-border: var(--brand-primary);
    --accent-teal: var(--brand-accent);
    --canvas-light: var(--bg);
    --ink-base: var(--text);
    --ink-muted: var(--text-dim);
    --ink-subtle: var(--text-faint);
    --ink-inverse: #FFFFFF;
    --hairline-soft: var(--border);
    --hairline-mid: var(--border);
    --hairline-strong: #C7C7C7;
    --accent: var(--brand-primary);
    --accent-soft: rgba(113, 50, 245, 0.12);
    --active-shadow: rgba(113, 50, 245, 0.28);

    /* Shape — radius system */
    --radius-capsule: 8px; /* Cards */
    --radius-pill: 9999px; /* Only for real circular elements */
    --radius-chip: 5px; /* Chips/Tags */
    --radius-badge: 4px; /* Badges */
    --radius: 6px; /* Buttons and Inputs */
    --maxw: 1440px;

    /* Shadows (soft and editorial) */
    --shadow-sm: 0 1px 2px rgba(21, 21, 26, 0.05);
    --shadow-md: 0 4px 6px rgba(21, 21, 26, 0.05);
    --shadow-lg: 0 10px 15px rgba(21, 21, 26, 0.05);

    /* Animation tokens */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

/* ===== CurtaDrama Design System v2 — Dark Canvas ===== */
[data-bs-theme="dark"] {
    /* Backgrounds */
    --bg: #0F0F13;
    --bg-soft: #15151C;
    --surface: #1A1A22;
    --surface-hover: #20202A;
    --surface-base: #1A1A22;
    --surface-muted: #15151C;
    --surface-sand: #15151C;

    /* Typography colors */
    --text: #F8FAFC;
    --text-dim: #9FA4B5;
    --text-faint: #63687C;

    /* Borders */
    --border: #292933;
    --border-color: #292933;
    --border-color-soft: #292933;

    /* Shadows (dark mode needs deeper shadows) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Compatibility aliases */
    --canvas-light: var(--bg);
    --ink-base: var(--text);
    --ink-muted: var(--text-dim);
    --ink-subtle: var(--text-faint);
    --ink-inverse: #15151A;
    --hairline-soft: var(--border);
    --hairline-mid: var(--border);
    --hairline-strong: #3D3D4D;
}