/* ═══════════════════════════════════════════════════════════════
   CLOTO TOKENS — Design System Variables
   Brand: Cloto.ai — "You dream. I weave."
   Updated: 2026-03-27 — UI Harmonization (landing v3 alignment)
   ═══════════════════════════════════════════════════════════════ */

/* Google Fonts loaded via <link> in app-shell.php — Cardo + Cormorant Garamond */

:root {

  /* ── Brand Palette ── */
  --cloto-void:        #0b0e15;
  --cloto-surface:     #161a24;
  --cloto-surface-alt: #1c2130;
  --cloto-teal:        #3ecfcf;
  --cloto-teal-mid:    #2da5a5;
  --cloto-teal-deep:   #228585;
  --cloto-teal-light:  #5edada;
  --cloto-gold:        #c9a84c;
  --cloto-gold-light:  #d4af5c;
  --cloto-text:        #e2e4e8;
  --cloto-paper:       #f5f3ee;

  /* ── Semantic Colors ── */
  --cloto-success:     #4ade80;
  --cloto-warning:     #fbbf24;
  --cloto-danger:      #f87171;
  --cloto-info:        #60a5fa;
  --cloto-purple:      #a78bfa;
  --cloto-slate:       #94a3b8;

  /* ── Alpha Palette ──
     Pattern: --cloto-{color}-a{opacity}
     Used instead of raw rgba() for consistency
     Base teal: rgb(62, 207, 207) */

  /* Teal */
  --cloto-teal-a3:  rgba(62, 207, 207, 0.03);
  --cloto-teal-a4:  rgba(62, 207, 207, 0.04);
  --cloto-teal-a5:  rgba(62, 207, 207, 0.05);
  --cloto-teal-a6:  rgba(62, 207, 207, 0.06);
  --cloto-teal-a8:  rgba(62, 207, 207, 0.08);
  --cloto-teal-a10: rgba(62, 207, 207, 0.10);
  --cloto-teal-a12: rgba(62, 207, 207, 0.12);
  --cloto-teal-a15: rgba(62, 207, 207, 0.15);
  --cloto-teal-a18: rgba(62, 207, 207, 0.18);
  --cloto-teal-a20: rgba(62, 207, 207, 0.20);
  --cloto-teal-a25: rgba(62, 207, 207, 0.25);
  --cloto-teal-a30: rgba(62, 207, 207, 0.30);
  --cloto-teal-a35: rgba(62, 207, 207, 0.35);
  --cloto-teal-a40: rgba(62, 207, 207, 0.40);
  --cloto-teal-a50: rgba(62, 207, 207, 0.50);

  /* Gold */
  --cloto-gold-a4:  rgba(201, 168, 76, 0.04);
  --cloto-gold-a6:  rgba(201, 168, 76, 0.06);
  --cloto-gold-a8:  rgba(201, 168, 76, 0.08);
  --cloto-gold-a10: rgba(201, 168, 76, 0.1);
  --cloto-gold-a12: rgba(201, 168, 76, 0.12);
  --cloto-gold-a15: rgba(201, 168, 76, 0.15);
  --cloto-gold-a18: rgba(201, 168, 76, 0.18);
  --cloto-gold-a20: rgba(201, 168, 76, 0.2);
  --cloto-gold-a25: rgba(201, 168, 76, 0.25);
  --cloto-gold-a30: rgba(201, 168, 76, 0.3);
  --cloto-gold-a35: rgba(201, 168, 76, 0.35);
  --cloto-gold-a50: rgba(201, 168, 76, 0.5);

  /* Surface — base rgb(22, 26, 36) */
  --cloto-surface-a6:  rgba(22, 26, 36, 0.06);
  --cloto-surface-a8:  rgba(22, 26, 36, 0.08);
  --cloto-surface-a10: rgba(22, 26, 36, 0.10);
  --cloto-surface-a40: rgba(22, 26, 36, 0.40);
  --cloto-surface-a50: rgba(22, 26, 36, 0.50);
  --cloto-surface-a55: rgba(22, 26, 36, 0.55);
  --cloto-surface-a70: rgba(22, 26, 36, 0.70);
  --cloto-surface-a85: rgba(22, 26, 36, 0.85);

  /* Void — base rgb(11, 14, 21) */
  --cloto-void-a40: rgba(11, 14, 21, 0.4);
  --cloto-void-a60: rgba(11, 14, 21, 0.6);

  /* Black */
  --cloto-black-a5:  rgba(0, 0, 0, 0.05);
  --cloto-black-a6:  rgba(0, 0, 0, 0.06);
  --cloto-black-a8:  rgba(0, 0, 0, 0.08);
  --cloto-black-a10: rgba(0, 0, 0, 0.1);
  --cloto-black-a15: rgba(0, 0, 0, 0.15);
  --cloto-black-a50: rgba(0, 0, 0, 0.5);
  --cloto-black-a60: rgba(0, 0, 0, 0.6);

  /* Danger */
  --cloto-danger-a6:  rgba(248, 113, 113, 0.06);
  --cloto-danger-a8:  rgba(248, 113, 113, 0.08);
  --cloto-danger-a12: rgba(248, 113, 113, 0.12);
  --cloto-danger-a20: rgba(248, 113, 113, 0.2);
  --cloto-danger-a25: rgba(248, 113, 113, 0.25);
  --cloto-danger-a35: rgba(248, 113, 113, 0.35);

  /* Success */
  --cloto-success-a6:  rgba(74, 222, 128, 0.06);
  --cloto-success-a8:  rgba(74, 222, 128, 0.08);
  --cloto-success-a12: rgba(74, 222, 128, 0.12);
  --cloto-success-a20: rgba(74, 222, 128, 0.2);
  --cloto-success-a50: rgba(74, 222, 128, 0.5);

  /* White */
  --cloto-white-a8:  rgba(255, 255, 255, 0.08);
  --cloto-white-a55: rgba(255, 255, 255, 0.55);
  --cloto-white-a80: rgba(255, 255, 255, 0.8);
  --cloto-white-a85: rgba(255, 255, 255, 0.85);

  /* Purple */
  --cloto-purple-a6:  rgba(167, 139, 250, 0.06);
  --cloto-purple-a8:  rgba(167, 139, 250, 0.08);
  --cloto-purple-a12: rgba(167, 139, 250, 0.12);
  --cloto-purple-a20: rgba(167, 139, 250, 0.2);
  --cloto-purple-a35: rgba(167, 139, 250, 0.35);

  /* Warning */
  --cloto-warning-a8:  rgba(251, 191, 36, 0.08);
  --cloto-warning-a12: rgba(251, 191, 36, 0.12);
  --cloto-warning-a20: rgba(251, 191, 36, 0.2);

  /* Info */
  --cloto-info-a8:  rgba(96, 165, 250, 0.08);
  --cloto-info-a12: rgba(96, 165, 250, 0.12);
  --cloto-info-a20: rgba(96, 165, 250, 0.2);

  /* ── Text Levels — opaque hex (landing v3 alignment) ── */
  --cloto-text-100:    #e2e4e8;
  --cloto-text-70:     #8b949e;
  --cloto-text-60:     #727c87;
  --cloto-text-50:     #667080;
  --cloto-text-40:     #5a6370;
  --cloto-text-30:     #4d5564;
  --cloto-text-25:     #404858;
  --cloto-text-15:     #252d3a;

  /* ── Opacity Tokens ── */
  --opacity-disabled:  0.35;
  --opacity-dimmed:    0.4;
  --opacity-muted:     0.6;

  /* ── Surface — opaque (no glass/blur) ── */
  --cloto-glass-bg:    #1a1e2a;
  --cloto-glass-blur:  none;
  --cloto-glass-border: rgba(255, 255, 255, 0.05);
  --cloto-glass-border-hover: rgba(255, 255, 255, 0.12);
  --cloto-glass-border-active: rgba(255, 255, 255, 0.25);

  /* ── New: Input / Elevated / Tessila ── */
  --cloto-input-bg:             rgba(62, 207, 207, 0.04);
  --cloto-elevated-bg:          #1e2430;
  --cloto-infusion-bg:          rgba(62, 207, 207, 0.12);
  --cloto-infusion-bg-hover:    rgba(62, 207, 207, 0.18);
  --cloto-infusion-border:      var(--cloto-teal-a35);
  --cloto-correction-border:    rgba(201, 168, 76, 0.4);

  /* ── Zone Hierarchy (V2 layout) ── */
  --cloto-zone-kanban:       var(--cloto-void);
  --cloto-zone-content:      #181c26;
  --cloto-zone-chat:         #14170e;
  --cloto-zone-chat-border:  rgba(201, 168, 76, 0.06);
  --cloto-zone-chat-input:   #121510;

  /* ── Depth Level Colors (generic, depth-based) ── */
  --cloto-level-0: #3ecfcf;   /* teal */
  --cloto-level-1: #c9a84c;   /* gold */
  --cloto-level-2: #4ade80;   /* green */
  --cloto-level-3: #fbbf24;   /* amber */
  --cloto-level-4: #a78bfa;   /* purple */

  /* ── Typography ── */
  --cloto-font-brand:   'Cardo', Georgia, serif;
  --cloto-font-editor:  'Cardo', Georgia, serif;
  --cloto-font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --cloto-font-display: var(--cloto-font-brand);  /* legacy alias */
  --cloto-font-body:    var(--cloto-font-ui);      /* legacy alias */
  --cloto-font-mono:    'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ── Font Sizes ── */
  --cloto-fs-2xs:   10px;
  --cloto-fs-xs:    11px;
  --cloto-fs-sm:    12px;
  --cloto-fs-base:  13px;
  --cloto-fs-md:    14px;
  --cloto-fs-lg:    16px;
  --cloto-fs-xl:    18px;
  --cloto-fs-2xl:   22px;
  --cloto-fs-3xl:   28px;
  --cloto-fs-reading: 15px;

  /* ═══════════════════════════════════════════════════════════
     GUIDE TOKENS — Source of truth
     from /brand/cloto-implementation-guide.md
     ═══════════════════════════════════════════════════════════ */

  /* ── Corner Radius ── */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Spacing (base 4px) ── */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   16px;
  --space-10:  20px;
  --space-12:  24px;
  --space-16:  32px;
  --space-20:  40px;
  --space-24:  48px;
  --space-32:  64px;

  /* ── Shadows / Elevation ── */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow-teal:    0 0 8px rgba(62, 207, 207, 0.35);
  --shadow-glow-gold:    0 0 8px rgba(201, 168, 76, 0.4);
  --shadow-focus-teal:   0 0 20px rgba(62, 207, 207, 0.10);
  --shadow-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.1);
  --shadow-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.1);

  /* ── Legacy shadow aliases ── */
  --cloto-shadow-sm:        var(--shadow-sm);
  --cloto-shadow-md:        var(--shadow-md);
  --cloto-shadow-lg:        var(--shadow-lg);
  --cloto-shadow-glow-teal: var(--shadow-glow-teal);
  --cloto-shadow-glow-gold: var(--shadow-glow-gold);

  /* ── Legacy spacing aliases ── */
  --cloto-sp-2:   var(--space-1);
  --cloto-sp-4:   var(--space-2);
  --cloto-sp-6:   var(--space-3);
  --cloto-sp-8:   var(--space-4);
  --cloto-sp-10:  var(--space-5);
  --cloto-sp-12:  var(--space-6);
  --cloto-sp-16:  var(--space-8);
  --cloto-sp-20:  var(--space-10);
  --cloto-sp-24:  var(--space-12);
  --cloto-sp-32:  var(--space-16);
  --cloto-sp-40:  var(--space-20);
  --cloto-sp-48:  var(--space-24);

  /* ── Legacy radius aliases ── */
  --cloto-radius-sm:   var(--radius-xs);
  --cloto-radius-md:   var(--radius-md);
  --cloto-radius-lg:   var(--radius-lg);
  --cloto-radius-xl:   var(--radius-xl);
  --cloto-radius-pill:  var(--radius-full);

  /* ── Transitions ── */
  --ease-default:    ease;
  --ease-spring:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   0.15s;
  --duration-normal: 0.2s;
  --duration-slow:   0.35s;
  --duration-ambient: 0.5s;
  --ease-sheet:      cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Legacy transition aliases ── */
  --cloto-ease:          var(--ease-spring);
  --cloto-duration:      var(--duration-normal);
  --cloto-duration-slow: var(--duration-slow);
  --cloto-transition:    all var(--duration-normal) var(--ease-spring);

  /* ── Z-index Scale ── */
  --cloto-z-base:      1;
  --cloto-z-dropdown:  100;
  --cloto-z-sticky:    200;
  --cloto-z-header:    300;
  --cloto-z-drawer:    400;
  --cloto-z-modal:     500;
  --cloto-z-overlay:   600;
  --cloto-z-toast:     700;
  --cloto-z-wizard:    800;
  --cloto-z-zen:       900;
  --cloto-z-max:       9999;

  /* ═══════════════════════════════════════════════════════════
     BACKWARD-COMPATIBLE ALIASES (--fbw-*)
     These are consumed by old JS that reads CSS vars
     ═══════════════════════════════════════════════════════════ */

  /* Background & Surface */
  --fbw-bg:              var(--cloto-void);
  --fbw-surface:         var(--cloto-surface);
  --fbw-surface-alt:     var(--cloto-surface-alt);

  /* Text */
  --fbw-text:            var(--cloto-text-100);
  --fbw-text-secondary:  var(--cloto-text-70);
  --fbw-text-muted:      var(--cloto-text-40);
  --fbw-text-subtle:     var(--cloto-text-25);

  /* Borders — white-based */
  --fbw-border:          rgba(255, 255, 255, 0.05);
  --fbw-border-hover:    rgba(255, 255, 255, 0.12);
  --fbw-border-active:   rgba(255, 255, 255, 0.25);
  --fbw-border-color:    rgba(255, 255, 255, 0.05);
  --fbw-divider:         rgba(255, 255, 255, 0.04);

  /* Accent */
  --fbw-accent:          var(--cloto-teal);
  --fbw-accent-hover:    var(--cloto-teal-light);
  --fbw-accent-bg:       rgba(62, 207, 207, 0.08);
  --fbw-accent-border:   rgba(62, 207, 207, 0.25);

  /* AI / Gold */
  --fbw-ai-accent:       var(--cloto-gold);
  --fbw-ai-bg:           rgba(201, 168, 76, 0.1);
  --fbw-ai-border:       rgba(201, 168, 76, 0.25);

  /* Status */
  --fbw-success:         var(--cloto-success);
  --fbw-warning:         var(--cloto-warning);
  --fbw-danger:          var(--cloto-danger);
  --fbw-info:            var(--cloto-info);

  /* Layout */
  --sidebar-width:       48px;
  --topbar-height:       36px;
  --cloto-header-height: 52px;
  --cloto-panel-width:   360px;
  --cloto-col-width:     320px;

  /* Layout V2 — Three-panel grid */
  --cloto-v2-kanban-min:   280px;
  --cloto-v2-kanban-share: 35%;
  --cloto-v2-col-width:    200px;

  /* Legacy aliases (layout) — TODO: remove when all usages migrated */
  --fbw-header-height:   var(--cloto-header-height);
  --fbw-panel-width:     var(--cloto-panel-width);
  --fbw-col-width:       var(--cloto-col-width);
  --fbw-col-gap:         var(--space-16);
  --fbw-v2-kanban-min:   var(--cloto-v2-kanban-min);
  --fbw-v2-kanban-share: var(--cloto-v2-kanban-share);
  --fbw-v2-col-width:    var(--cloto-v2-col-width);
  --fbw-v2-col-gap:      var(--space-6);

  /* Shadows (aliases) */
  --fbw-shadow:          var(--cloto-shadow-sm);
  --fbw-shadow-lg:       var(--cloto-shadow-lg);

  /* Typography (aliases) */
  --fbw-font-family:     var(--cloto-font-body);
  --fbw-font-mono:       var(--cloto-font-mono);
  --fbw-font-size:       var(--cloto-fs-base);

  /* Card */
  --fbw-card-bg:         var(--cloto-glass-bg);
  --fbw-card-border:     var(--cloto-glass-border);
  --fbw-card-radius:     var(--cloto-radius-lg);

  /* Radius & Spacing (aliases) */
  --fbw-radius:          var(--cloto-radius-md);
  --fbw-radius-lg:       var(--cloto-radius-lg);
  --fbw-spacing:         var(--cloto-sp-16);
  --fbw-spacing-sm:      var(--cloto-sp-8);

  /* Level colors (aliases used by JS) */
  --fbw-level-1-color:   var(--cloto-level-0);
  --fbw-level-2-color:   var(--cloto-level-1);
  --fbw-level-3-color:   var(--cloto-level-2);
  --fbw-level-4-color:   var(--cloto-level-3);
  --fbw-level-5-color:   var(--cloto-level-4);

  /* Scrollbar */
  --fbw-scrollbar-thumb: rgba(62, 207, 207, 0.15);
  --fbw-scrollbar-track: transparent;

  /* Card V2 — kanban card tokens */
  --card-bg:              rgba(255, 255, 255, 0.04);
  --card-bg-hover:        rgba(255, 255, 255, 0.07);
  --card-bg-selected:     rgba(255, 255, 255, 0.10);
  --card-border:          rgba(255, 255, 255, 0.07);
  --card-border-selected: rgba(255, 255, 255, 0.25);
  --card-title-color:     #e2e4e8;
  --card-text-color:      #8b949e;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — body.fd-light overrides
   ═══════════════════════════════════════════════════════════════ */

body.fd-light {

  /* ── Brand Palette ── */
  --cloto-void:        #f0ece5;
  --cloto-surface:     #f8f6f2;
  --cloto-surface-alt: #f0ede8;
  --cloto-teal:        #126e6e;
  --cloto-teal-mid:    #0e5a5a;
  --cloto-teal-deep:   #0a4848;
  --cloto-teal-light:  #1a8888;
  --cloto-gold:        #9a7e30;
  --cloto-gold-light:  #b8922a;
  --cloto-text:        #1a1c24;
  --cloto-paper:       #faf8f4;

  /* ── Semantic Colors ── */
  --cloto-success:     #16a34a;
  --cloto-warning:     #b45309;
  --cloto-danger:      #dc2626;
  --cloto-info:        #2563eb;
  --cloto-purple:      #7c3aed;

  /* ── Text Levels — opaque hex (light mode) ── */
  --cloto-text-100:    #1a1c24;
  --cloto-text-70:     #4a4e58;
  --cloto-text-60:     #626670;
  --cloto-text-50:     #6a6e78;
  --cloto-text-40:     #7a7e88;
  --cloto-text-30:     #8d919a;
  --cloto-text-25:     #a0a4ac;
  --cloto-text-15:     #c8cacc;

  /* ── Surface — opaque (no glass/blur) ── */
  --cloto-glass-bg:    #f4f2ee;
  --cloto-glass-border: rgba(0, 0, 0, 0.06);
  --cloto-glass-border-hover: rgba(0, 0, 0, 0.12);
  --cloto-glass-border-active: rgba(0, 0, 0, 0.20);

  /* ── New: Input / Elevated / Tessila ── */
  --cloto-input-bg:             rgba(18, 110, 110, 0.04);
  --cloto-elevated-bg:          #f0ede8;
  --cloto-infusion-bg:          rgba(18, 110, 110, 0.04);
  --cloto-infusion-bg-hover:    rgba(18, 110, 110, 0.08);
  --cloto-infusion-border:      rgba(18, 110, 110, 0.20);
  --cloto-correction-border:    rgba(154, 126, 48, 0.35);

  /* ── Surface Alpha Variants — base rgb(248, 246, 242) ── */
  --cloto-surface-a6:  rgba(248, 246, 242, 0.06);
  --cloto-surface-a8:  rgba(248, 246, 242, 0.08);
  --cloto-surface-a10: rgba(248, 246, 242, 0.1);
  --cloto-surface-a40: rgba(248, 246, 242, 0.4);
  --cloto-surface-a50: rgba(248, 246, 242, 0.5);
  --cloto-surface-a55: rgba(248, 246, 242, 0.55);
  --cloto-surface-a70: rgba(248, 246, 242, 0.7);
  --cloto-surface-a85: rgba(248, 246, 242, 0.85);

  /* ── Zone Hierarchy (V2 layout) ── */
  --cloto-zone-kanban:       #e5e0d5;
  --cloto-zone-content:      #f8f6f2;
  --cloto-zone-chat:         #eee9dc;
  --cloto-zone-chat-border:  rgba(154, 126, 48, 0.10);
  --cloto-zone-chat-input:   rgba(236, 232, 223, 0.5);

  /* ── Depth Level Colors ── */
  --cloto-level-0: #0e7a7a;
  --cloto-level-1: #8a6e20;
  --cloto-level-2: #16a34a;
  --cloto-level-3: #b45309;
  --cloto-level-4: #7c3aed;

  /* ── Shadows (light mode) ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 24px 48px rgba(0, 0, 0, 0.15);
  --shadow-glow-teal:    0 0 8px rgba(18, 110, 110, 0.25);
  --shadow-glow-gold:    0 0 8px rgba(154, 126, 48, 0.25);
  --shadow-focus-teal:   0 0 16px rgba(18, 110, 110, 0.08);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.08);
  --shadow-focus-success: 0 0 0 3px rgba(22, 163, 74, 0.08);

  /* ── Backward-compat overrides ── */
  --fbw-bg:              var(--cloto-void);
  --fbw-surface:         var(--cloto-surface);
  --fbw-surface-alt:     var(--cloto-surface-alt);
  --fbw-text:            var(--cloto-text-100);
  --fbw-text-secondary:  var(--cloto-text-70);
  --fbw-text-muted:      var(--cloto-text-40);
  --fbw-text-subtle:     var(--cloto-text-25);
  --fbw-border:          rgba(0, 0, 0, 0.06);
  --fbw-border-hover:    rgba(0, 0, 0, 0.12);
  --fbw-border-active:   rgba(0, 0, 0, 0.20);
  --fbw-border-color:    rgba(0, 0, 0, 0.06);
  --fbw-divider:         rgba(0, 0, 0, 0.04);
  --fbw-accent:          var(--cloto-teal);
  --fbw-accent-hover:    #1a8888;
  --fbw-accent-bg:       rgba(18, 110, 110, 0.06);
  --fbw-accent-border:   rgba(18, 110, 110, 0.25);
  --fbw-ai-accent:       var(--cloto-gold);
  --fbw-ai-bg:           rgba(154, 126, 48, 0.06);
  --fbw-ai-border:       rgba(154, 126, 48, 0.25);
  --fbw-card-bg:         var(--cloto-glass-bg);
  --fbw-card-border:     var(--cloto-glass-border);
  --fbw-scrollbar-thumb: rgba(26, 28, 36, 0.15);

  /* Card V2 — kanban card tokens (light) */
  --card-bg:              #ffffff;
  --card-bg-hover:        rgba(0, 0, 0, 0.02);
  --card-bg-selected:     rgba(0, 0, 0, 0.04);
  --card-border:          rgba(0, 0, 0, 0.08);
  --card-border-selected: rgba(0, 0, 0, 0.20);
  --card-title-color:     #1a1c24;
  --card-text-color:      #7a7e88;
}

/* ═══════════════════════════════════════════════════════════════
   THEME TRANSITION — organic cross-fade during toggle
   Class added/removed by JS toggleTheme(); lasts ~1.2s
   Staggered: surfaces shift first, then text follows
   ═══════════════════════════════════════════════════════════════ */

html.cloto-theme-transition,
html.cloto-theme-transition *,
html.cloto-theme-transition *::before,
html.cloto-theme-transition *::after {
  transition: background-color 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
              border-color    0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow      0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
              color           1.1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.08s,
              fill            1.1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.08s,
              stroke          1.1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.08s !important;
}

/* Exclude elements where transition would cause visual glitches */
html.cloto-theme-transition canvas,
html.cloto-theme-transition video,
html.cloto-theme-transition img {
  transition: none !important;
}
/* Theme toggle buttons: icon must switch instantly, not fade through invisible */
html.cloto-theme-transition #fc-theme-toggle,
html.cloto-theme-transition #fc-theme-toggle svg,
html.cloto-theme-transition #fc-theme-toggle line,
html.cloto-theme-transition #fc-theme-toggle circle,
html.cloto-theme-transition #fc-theme-toggle path,
html.cloto-theme-transition .fc-header__action-btn,
html.cloto-theme-transition .fc-header__action-btn svg,
html.cloto-theme-transition .fc-header__action-btn line,
html.cloto-theme-transition .fc-header__action-btn circle,
html.cloto-theme-transition .fc-header__action-btn path,
html.cloto-theme-transition .fd-theme-toggle,
html.cloto-theme-transition .fd-theme-toggle svg,
html.cloto-theme-transition .fd-theme-toggle line,
html.cloto-theme-transition .fd-theme-toggle circle,
html.cloto-theme-transition .fd-theme-toggle path {
  transition: none !important;
}
/* Splash header: switch instantly like workspace header */
html.cloto-theme-transition .cloto-splash-header,
html.cloto-theme-transition .cloto-splash-header * {
  transition: none !important;
}