/* ═══════════════════════════════════════════════════════════════
   CLOTO TOKENS — Design System Variables
   Brand: Cloto.ai — "You dream. I weave."
   ═══════════════════════════════════════════════════════════════ */

/* Google Fonts loaded via <link> in app-shell.php — no @import needed */

:root {

  /* ── Brand Palette ── */
  --cloto-void:        #0d0f17;
  --cloto-surface:     #1a1c28;
  --cloto-surface-alt: #222436;
  --cloto-teal:        #5ec6c6;
  --cloto-teal-mid:    #3a8b8b;
  --cloto-teal-deep:   #2a6b6b;
  --cloto-teal-light:  #7ed6d6;
  --cloto-gold:        #c9a84c;
  --cloto-gold-light:  #d4af5c;
  --cloto-text:        #e8e6e1;
  --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 */

  /* Teal */
  --cloto-teal-a3:  rgba(94, 198, 198, 0.03);
  --cloto-teal-a4:  rgba(94, 198, 198, 0.04);
  --cloto-teal-a6:  rgba(94, 198, 198, 0.06);
  --cloto-teal-a8:  rgba(94, 198, 198, 0.08);
  --cloto-teal-a10: rgba(94, 198, 198, 0.1);
  --cloto-teal-a12: rgba(94, 198, 198, 0.12);
  --cloto-teal-a15: rgba(94, 198, 198, 0.15);
  --cloto-teal-a18: rgba(94, 198, 198, 0.18);
  --cloto-teal-a20: rgba(94, 198, 198, 0.2);
  --cloto-teal-a25: rgba(94, 198, 198, 0.25);
  --cloto-teal-a30: rgba(94, 198, 198, 0.3);
  --cloto-teal-a35: rgba(94, 198, 198, 0.35);
  --cloto-teal-a40: rgba(94, 198, 198, 0.4);
  --cloto-teal-a50: rgba(94, 198, 198, 0.5);

  /* 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 */
  --cloto-surface-a6:  rgba(26, 28, 40, 0.06);
  --cloto-surface-a8:  rgba(26, 28, 40, 0.08);
  --cloto-surface-a10: rgba(26, 28, 40, 0.1);
  --cloto-surface-a40: rgba(26, 28, 40, 0.4);
  --cloto-surface-a50: rgba(26, 28, 40, 0.5);
  --cloto-surface-a55: rgba(26, 28, 40, 0.55);
  --cloto-surface-a70: rgba(26, 28, 40, 0.7);
  --cloto-surface-a85: rgba(26, 28, 40, 0.85);

  /* Void */
  --cloto-void-a40: rgba(13, 15, 23, 0.4);
  --cloto-void-a60: rgba(13, 15, 23, 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 Opacity Levels ── */
  --cloto-text-100:    #e8e6e1;
  --cloto-text-70:     rgba(232, 230, 225, 0.7);
  --cloto-text-40:     rgba(232, 230, 225, 0.4);
  --cloto-text-25:     rgba(232, 230, 225, 0.25);
  --cloto-text-15:     rgba(232, 230, 225, 0.15);

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

  /* ── Glass Surface ── */
  --cloto-glass-bg:    rgba(26, 28, 40, 0.65);
  --cloto-glass-blur:  blur(20px);
  --cloto-glass-border: rgba(94, 198, 198, 0.08);
  --cloto-glass-border-hover: rgba(94, 198, 198, 0.15);
  --cloto-glass-border-active: rgba(94, 198, 198, 0.25);

  /* ── Zone Hierarchy (V2 layout) ── */
  --cloto-zone-kanban:       var(--cloto-void);
  --cloto-zone-content:      #1e2030;
  --cloto-zone-chat:         #1a1916;
  --cloto-zone-chat-border:  rgba(201, 168, 76, 0.06);
  --cloto-zone-chat-input:   rgba(18, 16, 12, 0.5);

  /* ── Outline Level Colors ── */
  --cloto-level-volume:   #5ec6c6;   /* teal */
  --cloto-level-atto:     #c9a84c;   /* gold */
  --cloto-level-capitolo: #4ade80;   /* green */
  --cloto-level-scena:    #fbbf24;   /* amber */
  --cloto-level-beat:     #a78bfa;   /* purple */

  /* ── Typography ── */
  --cloto-font-brand:   'Cormorant Garamond', Georgia, serif;
  --cloto-font-ui:      'DM Sans', 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:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --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(94, 198, 198, 0.4);
  --shadow-glow-gold:    0 0 8px rgba(201, 168, 76, 0.4);
  --shadow-focus-teal:   0 0 0 3px rgba(94, 198, 198, 0.1);
  --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 */
  --fbw-border:          rgba(94, 198, 198, 0.08);
  --fbw-border-hover:    rgba(94, 198, 198, 0.15);
  --fbw-border-active:   rgba(94, 198, 198, 0.25);
  --fbw-border-color:    rgba(94, 198, 198, 0.08);
  --fbw-divider:         rgba(94, 198, 198, 0.06);

  /* Accent */
  --fbw-accent:          var(--cloto-teal);
  --fbw-accent-hover:    var(--cloto-teal-light);
  --fbw-accent-bg:       rgba(94, 198, 198, 0.08);
  --fbw-accent-border:   rgba(94, 198, 198, 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-volume);
  --fbw-level-2-color:   var(--cloto-level-atto);
  --fbw-level-3-color:   var(--cloto-level-capitolo);
  --fbw-level-4-color:   var(--cloto-level-scena);
  --fbw-level-5-color:   var(--cloto-level-beat);

  /* Scrollbar */
  --fbw-scrollbar-thumb: rgba(94, 198, 198, 0.15);
  --fbw-scrollbar-track: transparent;
}


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

body.fd-light {

  /* ── Brand Palette (from brand guide) ── */
  --cloto-void:        #ece8df;
  --cloto-surface:     #faf8f4;
  --cloto-surface-alt: #f3f0ea;
  --cloto-teal:        #1a8a8a;
  --cloto-teal-mid:    #157070;
  --cloto-teal-deep:   #0e5454;
  --cloto-gold:        #9a7e30;
  --cloto-gold-light:  #b8922a;
  --cloto-text:        #1a1c28;
  --cloto-paper:       #ffffff;

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

  /* ── Text Opacity Levels ── */
  --cloto-text-100:    #1a1c28;
  --cloto-text-70:     rgba(26, 28, 40, 0.7);
  --cloto-text-40:     rgba(26, 28, 40, 0.4);
  --cloto-text-25:     rgba(26, 28, 40, 0.25);
  --cloto-text-15:     rgba(26, 28, 40, 0.12);

  /* ── Glass Surface ── */
  --cloto-glass-bg:    rgba(255, 255, 255, 0.7);
  --cloto-glass-border: rgba(26, 138, 138, 0.12);
  --cloto-glass-border-hover: rgba(26, 138, 138, 0.22);
  --cloto-glass-border-active: rgba(26, 138, 138, 0.35);

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

  /* ── Outline Level Colors ── */
  --cloto-level-volume:   #0e7a7a;
  --cloto-level-atto:     #8a6e20;
  --cloto-level-capitolo: #16a34a;
  --cloto-level-scena:    #b45309;
  --cloto-level-beat:     #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(26, 138, 138, 0.25);
  --shadow-glow-gold:    0 0 8px rgba(154, 126, 48, 0.25);
  --shadow-focus-teal:   0 0 0 3px rgba(26, 138, 138, 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(26, 138, 138, 0.12);
  --fbw-border-hover:    rgba(26, 138, 138, 0.22);
  --fbw-border-active:   rgba(26, 138, 138, 0.35);
  --fbw-border-color:    rgba(26, 28, 40, 0.1);
  --fbw-divider:         rgba(26, 28, 40, 0.06);
  --fbw-accent:          var(--cloto-teal);
  --fbw-accent-hover:    #228f8f;
  --fbw-accent-bg:       rgba(26, 138, 138, 0.06);
  --fbw-accent-border:   rgba(26, 138, 138, 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, 40, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   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;
}