/* ═══════════════════════════════════════════════════════════
 * NYAS Theme: Vivid
 * A warm-cream vivid styling with deep orange accents.
 * ═══════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;
    /* ── Backgrounds & Surfaces ── */
    --color-bg: #ece6d8;
    --color-surface: #f3eee3;
    --color-surface-hover: #ebe5d8;
    --color-surface-elevated: #f5f0e5;
    --color-surface-secondary: #e9e3d4;

    /* ── Text ── */
    --color-text-primary: #0f172a;
    --color-text-secondary: #431407;
    --color-text-muted: #78350f;
    --color-text-disabled: #b48d75;

    /* ── Borders ── */
    --color-border: #d7ccb6;

    /* ── Inputs ── */
    --color-input-bg: #f7f2e7;
    --color-input-border: #cbd5e1;

    /* ── Primary Action ── */
    --color-primary: #9a3412;
    --color-primary-light: #d47a4a;
    --color-on-primary: #ffffff;

    /* ── Semantic Status ── */
    --color-success: #4caf50;
    --color-pending: #fb8c00;
    --color-urgent: #d32f2f;
    --color-danger: #9b2c2c;

    /* ── Focus & Overlay ── */
    --color-focus-ring: #22c55e;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-accent: #166534;
    --color-accent-hover: #14532d;
    --color-search-highlight-bg: #fef08a;
    --color-search-highlight-text: #1a202c;

    /* ── Column Backgrounds ── */
    --color-column-bg-odd: transparent;
    --color-column-bg-even: #f3f4f6;

    /* ── Shadows ── */
    --shadow-card: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 0 15px 0 rgba(230, 81, 0, 0.15);
    --shadow-btn-glow: 0 0 10px 0 rgba(230, 81, 0, 0.15);

    /* ── Glass Morphism ── */
    --glass-blur: 12px;
    --glass-bg: rgba(243, 236, 224, 0.78);

    /* ── Logo ── */
    --color-logo: #5d2a18;
    --color-logo-shimmer: rgba(255, 255, 255, 0.4);

    /* ── Category Colors (10) ── */
    --color-category-blue: #3b82f6;
    --color-category-teal: #14b8a6;
    --color-category-green: #22c55e;
    --color-category-yellow: #9e8200;
    --color-category-orange: #f97316;
    --color-category-red: #ef4444;
    --color-category-pink: #ec4899;
    --color-category-purple: #a855f7;
    --color-category-indigo: #6366f1;
    --color-category-gray: #6b7280;

    /* ── Status Glow ── */
    --color-status-glow: transparent;

    /* ── Card-Specific Overrides ── */
    --color-card-bg: rgba(243, 236, 224, 0.82);
    --color-card-text: #0f172a;
    --color-card-text-secondary: #64748b;
    --color-card-border: #f1e9d2;

    /* ── Typography ── */
    --font-family-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-heading: 'Cinzel', 'Georgia', serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heading: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    /* ── Shape ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Motion ── */
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-out: cubic-bezier(0, 0, 0.2, 1);

    /* ═══ M10 Extended Variables ═══ */

    /* ── Logo (Extended) ── */
    --logo-shimmer-duration: 60s;
    /* Animation cycle for logo breathing glow. Custom themes: 7.2s */
    --logo-bg: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg) 12%);
    /* Background behind logo text. Set rgba for plaque */
    --logo-border: color-mix(in srgb, var(--color-border) 70%, transparent);
    /* Border around logo plaque */
    --logo-padding: 0;
    /* Padding inside logo plaque */
    --logo-border-radius: 0;
    /* Border radius of plaque */
    --logo-backdrop-blur: 0;
    /* Backdrop blur for glassmorphic plaque */

    /* ── Background Art ── */
    --bg-image-url: none;
    /* CSS url() for scenic backdrop. 'none' = disabled */
    --bg-image-opacity: 0;
    /* 0–1 opacity for backdrop image */
    --bg-image-position: center;
    /* CSS background-position */
    --bg-image-size: cover;
    /* CSS background-size */

    /* ── Overdue Pulse ── */
    --color-overdue-pulse: transparent;
    /* Border pulse color for overdue cards */
    --overdue-pulse-duration: 3s;
    /* Pulse animation cycle time */

    /* ── Input Focus ── */
    --color-input-focus-glow: rgba(148, 163, 184, 0.25);
    /* Glow ring on input focus */
    --input-focus-pulse: none;
    /* Set to 'input-focus-pulse 1.5s ease' to enable */

    /* ── Scrollbar ── */
    --color-scrollbar-thumb: var(--color-border);
    /* Scrollbar thumb color */
    --color-scrollbar-track: transparent;
    /* Scrollbar track background */
    --scrollbar-width: 6px;
    /* Scrollbar thumb width */
    --scrollbar-thumb-opacity: 0.4;
    /* Thumb at-rest opacity */

    /* ── Overlay / Dialogue ── */
    --overlay-blur: 0px;
    /* Backdrop blur on modal overlay. Custom themes: 25px */

    /* ── Cursor ── */
    --cursor-default: auto;
    /* CSS cursor for body */
    --cursor-pointer: pointer;
    /* CSS cursor for interactive elements */

    /* ── Empty Column ── */
    --color-empty-column-motif: transparent;
    /* Decorative motif color in empty columns */

    /* ── Navigation Lantern ── */
    --nav-active-glow: none;
    /* Box-shadow for active nav item. Custom: warm glow */
    --nav-active-border-color: var(--color-primary);
    /* Active tab accent border */

    /* ── Tooltip Glass ── */
    --tooltip-bg: var(--color-surface);
    /* Tooltip background */
    --tooltip-backdrop-blur: 0;
    /* Tooltip backdrop blur. Custom: 12px */

    /* ── Settings Jali ── */
    --settings-bg-image: none;
    /* Jali lattice pattern for settings. 'none' = disabled */
    --settings-bg-opacity: 0;
    /* Jali opacity. Custom themes: 0.10 */

    /* ── Drag Target ── */
    --color-drag-target-glow: transparent;
    /* Inner glow on receiving column during drag */

    /* ── Skeleton ── */
    --skeleton-shimmer-color: var(--color-surface-secondary);
    /* Shimmer base for skeleton */

    /* ── Bird & Wisps (read by JS components) ── */
    --bird-color: transparent;
    /* Primary fill color for bird SVG */
    --bird-trail-color-1: transparent;
    /* First trail particle color */
    --bird-trail-color-2: transparent;
    /* Second trail particle color */
    --wisp-color: transparent;
    /* Prana-Vayu wisp color */
    --wisp-opacity: 0;
    /* Wisp opacity. Custom themes: 0.15–0.30 */
    --wisp-count: 0;
    /* Number of wisps. Custom themes: 4–8 */
    --flora-count: 0;

    /* ── Cross-Dissolve ── */
    --cross-dissolve-duration: 0ms;
    /* Theme transition time. Custom: 8000ms–10000ms */

    /* ── Assistant ── */
    --assistant-orb-color-primary: var(--color-primary-light);
    --assistant-orb-color-secondary: var(--color-accent);
    --assistant-orb-color-core: #fff9f3;
    --assistant-orb-glow-intensity: 0.65;
    --assistant-orb-size: 56px;
    --assistant-orb-size-mobile: 48px;
    --assistant-chat-bg: rgba(255, 255, 255, 0.94);
    --assistant-chat-bg-elevated: rgba(255, 255, 255, 0.98);
    --assistant-chat-border: color-mix(in srgb, var(--color-primary) 22%, var(--color-border) 78%);
    --assistant-chat-width: 380px;
    --assistant-chat-height: 520px;
    --assistant-chat-radius: var(--radius-xl);
    --assistant-bubble-user-bg: var(--color-primary);
    --assistant-bubble-user-text: #ffffff;
    --assistant-bubble-assistant-bg: var(--color-surface-hover);
    --assistant-bubble-assistant-text: var(--color-text-primary);
    --assistant-voice-active-color: var(--color-danger);
}

/* ── Component Styles ── */

/* Primary action buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-btn-glow);
    color: var(--color-on-primary);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    padding: 0.625rem 1.5rem;
    transition:
      box-shadow var(--duration-normal) var(--easing-default),
      transform 150ms var(--easing-default);
}

.btn-primary:hover {
    box-shadow:
      var(--shadow-btn-glow),
      0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Standard text inputs */
.input-field {
    background: var(--color-input-bg);
    border: 1.5px solid var(--color-input-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family-body);
    transition:
      border-width 150ms ease,
      border-color 150ms ease,
      box-shadow 150ms ease;
}

.input-field:focus,
.input-field:focus-within {
    border-width: 2px;
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-input-focus-glow);
    animation: var(--input-focus-pulse);
}

/* Base class for floating elements (cards, modals) */
.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
    .card-glass {
      background: var(--color-surface);
    }
}

.card-hover:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Progress bar container */
.progress-bar-glow {
    position: relative;
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: visible;
}

/* Active progress track */
.progress-bar-glow-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    box-shadow:
      0 0 8px 2px var(--color-primary),
      0 0 20px 4px var(--color-primary-light);
    transition:
      width 0.4s ease,
      box-shadow 0.3s ease;
}

/* System logo aesthetic */
.nyas-logo {
    color: var(--color-logo);
    font-family: var(--font-family-heading);
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ── Plaque (Extended) ── */
    background: var(--logo-bg);
    border: 1px solid var(--logo-border);
    padding: var(--logo-padding);
    border-radius: var(--logo-border-radius);
    backdrop-filter: blur(var(--logo-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--logo-backdrop-blur));
    transform-origin: center;
    animation: logo-breathing 7.2s ease-in-out infinite;
    will-change: transform, box-shadow, text-shadow;
}

@keyframes logo-breathing {
    0%,
    100% {
      transform: scale(1);
      box-shadow:
        0 0 0 0 transparent,
        0 0 0 0 transparent;
      text-shadow: 0 0 0 transparent;
    }

    30% {
      transform: scale(1.02);
      box-shadow:
        0 0 6px 2px color-mix(in srgb, var(--color-logo-shimmer) 18%, transparent),
        0 0 14px 5px color-mix(in srgb, var(--color-logo-shimmer) 10%, transparent);
      text-shadow: 0 0 4px color-mix(in srgb, var(--color-logo-shimmer) 20%, transparent);
    }

    50% {
      transform: scale(1.055);
      box-shadow:
        0 0 12px 3px color-mix(in srgb, var(--color-logo-shimmer) 34%, transparent),
        0 0 24px 8px color-mix(in srgb, var(--color-logo-shimmer) 18%, transparent);
      text-shadow: 0 0 7px color-mix(in srgb, var(--color-logo-shimmer) 30%, transparent);
    }

    70% {
      transform: scale(1.018);
      box-shadow:
        0 0 5px 1px color-mix(in srgb, var(--color-logo-shimmer) 16%, transparent),
        0 0 12px 4px color-mix(in srgb, var(--color-logo-shimmer) 8%, transparent);
      text-shadow: 0 0 3px color-mix(in srgb, var(--color-logo-shimmer) 14%, transparent);
    }
}