/**
 * @twork/ui - Shared Tailwind CSS v4 theme
 *
 * This file is the **single source of truth** for all design tokens.
 * Import this in your app's main CSS file:
 *
 *   @import "@twork/ui/styles";
 *
 * The consuming app can then add its own source directive:
 *
 *   @source "../**\/*.{tsx,ts,jsx,js}";
 *
 * Token layers:
 * 1. 6-Color OKLCH system (background/foreground/accent/info/success/destructive)
 * 2. TWork Design System v2 (--tw-brand-*, --tw-bg-*, --tw-text-*, --tw-border-*, etc.)
 * 3. SHADCN compatibility aliases
 * 4. Tailwind v4 @theme inline binding
 */

@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* =============================================================================
   ANIMATABLE CSS CUSTOM PROPERTIES
   Register theme variables for smooth transitions
============================================================================= */

@property --background {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.98 0.003 265);
}
@property --foreground {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.185 0.01 270);
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.55 0.20 25);
}
@property --info {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.65 0.16 70);
}
@property --success {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.55 0.17 145);
}
@property --destructive {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.55 0.22 27);
}

/* =============================================================================
   LIGHT MODE (default)
============================================================================= */

:root {
  /* === 6 BASE COLORS (OKLCH) === */
  --background: oklch(0.98 0.003 265);
  --foreground: oklch(0.185 0.01 270);
  --foreground-rgb: 38, 36, 42;
  --accent: oklch(0.55 0.20 25);            /* TWork brand red */
  --accent-rgb: 219, 60, 20;
  --info: oklch(0.75 0.16 70);              /* amber */
  --success: oklch(0.55 0.17 145);          /* green */
  --destructive: oklch(0.58 0.24 28);       /* red */
  --destructive-rgb: 180, 60, 50;
  --info-rgb: 180, 120, 40;
  --success-rgb: 34, 120, 60;

  /* === TEXT VARIANTS === */
  --success-text: color-mix(in oklab, var(--success) 50%, var(--foreground));
  --destructive-text: color-mix(in oklab, var(--destructive) 50%, var(--foreground));
  --info-text: color-mix(in oklab, var(--info) 50%, var(--foreground));

  /* === SHADOW OPACITY === */
  --shadow-border-opacity: 0.08;
  --shadow-blur-opacity: 0.06;

  /* === SHADOW VALUES === */
  --shadow-minimal:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
    rgba(0, 0, 0, var(--shadow-blur-opacity)) 0px 1px 1px -0.5px,
    rgba(0, 0, 0, var(--shadow-blur-opacity)) 0px 3px 3px -1.5px;

  --shadow-minimal-flat:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px;

  --shadow-modal-small:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.67)) 0px 1px 1px -0.5px,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.67)) 0px 3px 3px 0px,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.33)) 0px 6px 6px 0px,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.33)) 0px 12px 12px 0px,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.33)) 0px 24px 24px 0px;

  /* === Z-INDEX SCALE === */
  --z-base: 0;
  --z-local: 10;
  --z-sticky: 20;
  --z-titlebar: 40;
  --z-panel: 50;
  --z-dropdown: 100;
  --z-tooltip: 150;
  --z-modal: 200;
  --z-overlay: 300;
  --z-fullscreen: 350;
  --z-floating-backdrop: 390;
  --z-floating-menu: 400;
  --z-island-overlay: 390;
  --z-island: 400;
  --z-island-popover: 410;
  --z-splash: 600;

  /* === MIX VARIANTS (srgb for broader compatibility) === */
  --foreground-2: color-mix(in srgb, var(--foreground) 2%, var(--background));
  --foreground-3: color-mix(in srgb, var(--foreground) 3%, var(--background));
  --foreground-5: color-mix(in srgb, var(--foreground) 5%, var(--background));
  --foreground-10: color-mix(in srgb, var(--foreground) 10%, var(--background));
  --foreground-20: color-mix(in srgb, var(--foreground) 20%, var(--background));
  --foreground-30: color-mix(in srgb, var(--foreground) 30%, var(--background));
  --foreground-40: color-mix(in srgb, var(--foreground) 40%, var(--background));
  --foreground-50: color-mix(in srgb, var(--foreground) 50%, var(--background));
  --foreground-60: color-mix(in srgb, var(--foreground) 60%, var(--background));
  --foreground-70: color-mix(in srgb, var(--foreground) 70%, var(--background));
  --foreground-80: color-mix(in srgb, var(--foreground) 80%, var(--background));
  --foreground-90: color-mix(in srgb, var(--foreground) 90%, var(--background));
  --foreground-95: color-mix(in srgb, var(--foreground) 95%, var(--background));

  /* === SHADCN COMPATIBILITY === */
  --secondary: oklch(from var(--foreground) l c h / 0.05);
  --secondary-foreground: var(--foreground);
  --muted: oklch(from var(--foreground) l c h / 0.05);
  --muted-foreground: var(--foreground-50);
  --card: var(--background);
  --card-foreground: var(--foreground);
  --popover: var(--background);
  --popover-foreground: var(--foreground);
  --border: oklch(from var(--foreground) l c h / 0.05);
  --input: oklch(from var(--foreground) l c h / 0.1);
  --ring: oklch(from var(--foreground) l c h / 0.25);
  --ring-width: 1px;
  --ring-offset: 0px;

  /* === COMPONENT TOKENS === */
  --user-message-bubble: oklch(from var(--foreground) l c h / 0.05);
  --md-bullets: var(--foreground-50);
  --md-counters: var(--foreground-50);

  /* === MARKDOWN CSS VARIABLES (TWork brand-aware) === */
  --md-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --md-code-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
  --md-base-size: 14px;
  --md-line-height: 1.6;
  --md-fg-default: #262626;
  --md-fg-muted: #8c8c8c;
  --md-link-color: var(--tw-brand-8);
  --md-code-bg: rgba(175, 184, 193, 0.2);
  --md-code-border: rgba(31, 35, 40, 0.04);
  --md-blockquote-border: #d0d7de;
  --md-blockquote-fg: #8c8c8c;
  --md-table-border: #d9d9d9;
  --md-table-header-bg: rgba(175, 184, 193, 0.2);
  --md-table-stripe-bg: rgba(175, 184, 193, 0.1);
  --md-table-hover-bg: rgba(219, 60, 20, 0.04);
  --md-hr-color: #e8e8e8;
  --md-heading-border: #e8e8e8;
  --md-code-header-bg: rgba(175, 184, 193, 0.2);
  --md-code-block-bg: #f6f8fa;
  --md-code-block-border: rgba(31, 35, 40, 0.1);
  --md-marker-color: var(--tw-brand-8);

  /* === FONTS === */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-default: var(--font-sans);

  /* === LAYOUT === */
  --font-size-base: 14px;
  --radius: 0rem;
  --spacing: 0.25rem;
  --tracking-normal: 0em;

  /* =========================================================================
     TWork Design System v2 — LIGHT MODE
  ========================================================================= */

  /* -- Brand Scale (10 steps) -- */
  --tw-brand-1:  #FEF0ED;
  --tw-brand-2:  #FED9D2;
  --tw-brand-3:  #FDC0B3;
  --tw-brand-4:  #FCA795;
  --tw-brand-5:  #FB8E76;
  --tw-brand-6:  #F46A45;
  --tw-brand-7:  #F46A45;
  --tw-brand-8:  #DB3C14;  /* primary brand */
  --tw-brand-9:  #B8300F;
  --tw-brand-10: #93250B;

  /* -- Brand legacy aliases -- */
  --color-brand-50:  var(--tw-brand-1);
  --color-brand-100: var(--tw-brand-2);
  --color-brand-200: var(--tw-brand-3);
  --color-brand-300: var(--tw-brand-4);
  --color-brand-400: var(--tw-brand-5);
  --color-brand-500: var(--tw-brand-8);
  --color-brand-600: var(--tw-brand-9);
  --color-brand-700: var(--tw-brand-10);

  /* -- Brand identity -- */
  --color-brand-red:      var(--tw-brand-8);
  --color-brand-red-soft: var(--tw-brand-1);
  --shadow-brand-red: 0 2px 8px oklch(from var(--tw-brand-8) l c h / 0.25);

  /* -- Brand gradient -- */
  --brand-gradient-start:  var(--tw-brand-8);
  --brand-gradient-end:    var(--tw-brand-5);
  --brand-gradient-shadow: 0 4px 12px oklch(from var(--tw-brand-8) l c h / 0.3);

  /* -- Semantic Backgrounds -- */
  --tw-bg-primary:   #FFFFFF;
  --tw-bg-secondary: #F7F7F7;
  --tw-bg-tertiary:  #F2F2F2;
  --tw-bg-card:      #FFFFFF;
  --tw-bg-input:     #FFFFFF;
  --tw-bg-hover:     color-mix(in srgb, #000 5%, transparent);
  --tw-bg-active:    color-mix(in srgb, #000 8%, transparent);
  --tw-bg-user:      var(--tw-brand-1);
  --tw-bg-code:      #F8F9FA;
  --tw-bg-overlay:   rgba(0, 0, 0, 0.4);

  /* -- Surface aliases -- */
  --surface-base:    var(--tw-bg-primary);
  --surface-sidebar: var(--tw-bg-secondary);
  --surface-card:    var(--tw-bg-card);
  --surface-hover:   var(--tw-bg-hover);
  --surface-active:  var(--tw-bg-active);
  --surface-input:   var(--tw-bg-input);

  /* -- Semantic Text -- */
  --tw-text-primary:   rgba(0, 0, 0, 0.92);
  --tw-text-secondary: rgba(0, 0, 0, 0.65);
  --tw-text-tertiary:  rgba(0, 0, 0, 0.45);
  --tw-text-disabled:  rgba(0, 0, 0, 0.25);
  --tw-text-link:      var(--tw-brand-8);
  --tw-text-user:      var(--tw-text-primary);

  /* -- Text legacy aliases -- */
  --text-primary:   var(--tw-text-primary);
  --text-secondary: var(--tw-text-secondary);
  --text-tertiary:  var(--tw-text-tertiary);
  --text-disabled:  var(--tw-text-disabled);
  --text-inverse:   #FFFFFF;

  /* -- Semantic Borders -- */
  --tw-border-default: color-mix(in srgb, #000 8%, transparent);
  --tw-border-weak:    color-mix(in srgb, #000 4%, transparent);
  --tw-border-strong:  #E6E6E6;
  --tw-border-input:   #E5E7EB;

  /* -- Border legacy aliases -- */
  --border-default: var(--tw-border-default);
  --border-subtle:  var(--tw-border-weak);
  --border-focus:   var(--tw-brand-8);

  /* -- Icons -- */
  --tw-icon-primary:   rgba(0, 0, 0, 0.9);
  --tw-icon-secondary: rgba(0, 0, 0, 0.7);
  --tw-icon-tertiary:  rgba(0, 0, 0, 0.5);

  /* -- Status Colors -- */
  --tw-status-success: #0CBF5B;
  --tw-status-warning: #FF7800;
  --tw-status-error:   #F64041;
  --tw-status-info:    var(--tw-brand-8);
  --tw-accent-unread:  var(--tw-brand-8);

  /* -- Scrollbar -- */
  --tw-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --tw-scrollbar-hover: rgba(0, 0, 0, 0.3);

  /* -- Spacing System -- */
  --tw-space-0:  0;
  --tw-space-1:  2px;
  --tw-space-2:  4px;
  --tw-space-3:  8px;
  --tw-space-4:  12px;
  --tw-space-5:  16px;
  --tw-space-6:  20px;
  --tw-space-7:  24px;
  --tw-space-8:  32px;
  --tw-space-9:  40px;
  --tw-space-10: 48px;

  /* -- Spacing legacy aliases -- */
  --space-1:  var(--tw-space-2);
  --space-2:  var(--tw-space-3);
  --space-3:  var(--tw-space-4);
  --space-4:  var(--tw-space-5);
  --space-5:  var(--tw-space-6);
  --space-6:  var(--tw-space-7);
  --space-8:  var(--tw-space-8);
  --space-10: var(--tw-space-9);
  --space-12: var(--tw-space-10);

  /* -- Typography System -- */
  --tw-font-display-size:   32px;
  --tw-font-display-height: 40px;
  --tw-font-h1-size:        24px;
  --tw-font-h1-height:      32px;
  --tw-font-h2-size:        20px;
  --tw-font-h2-height:      28px;
  --tw-font-h3-size:        16px;
  --tw-font-h3-height:      24px;
  --tw-font-body-size:      var(--font-size-base, 14px);
  --tw-font-body-height:    22px;
  --tw-font-caption-size:   12px;
  --tw-font-caption-height: 18px;
  --tw-font-code-size:      12px;
  --tw-font-code-height:    18px;
  --tw-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --tw-font-brand: 'Inter', var(--tw-font-sans);

  /* -- Font size legacy aliases -- */
  --fs-caption:  var(--tw-font-caption-size);
  --fs-body-sm:  13px;
  --fs-body:     var(--tw-font-body-size);
  --fs-subtitle: 14px;
  --fs-title-sm: 18px;
  --fs-title:    var(--tw-font-h1-size);
  --fs-h1:       36px;

  /* -- Radius System -- */
  --tw-radius-none: 0;
  --tw-radius-xs:   2px;
  --tw-radius-sm:   4px;
  --tw-radius-md:   6px;
  --tw-radius-lg:   8px;
  --tw-radius-xl:   12px;
  --tw-radius-2xl:  16px;
  --tw-radius-full: 9999px;

  /* -- Radius legacy aliases -- */
  --radius-sm:   var(--tw-radius-sm);
  --radius-md:   var(--tw-radius-lg);
  --radius-lg:   var(--tw-radius-xl);
  --radius-xl:   var(--tw-radius-2xl);
  --radius-2xl:  24px;
  --radius-full: var(--tw-radius-full);

  /* -- Shadow System -- */
  --tw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --tw-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --tw-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.16);
  --tw-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.20);

  /* -- Motion System -- */
  --tw-motion-fast: 120ms;
  --tw-motion-sm:   150ms;
  --tw-motion-base: 200ms;
  --tw-motion-slow: 320ms;
  --tw-easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --tw-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* -- Control Sizes -- */
  --tw-size-control-sm: 24px;
  --tw-size-control-md: 32px;
  --tw-size-control-lg: 40px;
  --tw-icon-size-sm: 12px;
  --tw-icon-size-md: 16px;
  --tw-icon-size-lg: 20px;
  --tw-icon-size-xl: 24px;

  /* -- Motion legacy aliases -- */
  --ease-out: var(--tw-easing-standard);
  --duration-fast:   var(--tw-motion-fast);
  --duration-normal: var(--tw-motion-sm);
  --duration-slow:   var(--tw-motion-base);
}

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

[data-theme="dark"]{
  /* === 6 BASE COLORS === */
  --background: oklch(0.145 0.015 270);
  --foreground: oklch(0.95 0.01 270);
  --foreground-rgb: 237, 236, 240;
  --accent: oklch(0.60 0.22 25);
  --accent-rgb: 219, 80, 40;
  --info: oklch(0.78 0.14 70);
  --success: oklch(0.60 0.17 145);
  --destructive: oklch(0.65 0.22 28);
  --destructive-rgb: 200, 70, 60;
  --info-rgb: 210, 155, 55;
  --success-rgb: 50, 140, 80;

  /* === TEXT VARIANTS === */
  --success-text: color-mix(in oklab, var(--success) 50%, var(--foreground));
  --destructive-text: color-mix(in oklab, var(--destructive) 50%, var(--foreground));
  --info-text: color-mix(in oklab, var(--info) 50%, var(--foreground));

  /* === SHADOW OPACITY === */
  --shadow-border-opacity: 0.15;
  --shadow-blur-opacity: 0.12;

  /* === MIX VARIANTS === */
  --foreground-2: color-mix(in srgb, var(--foreground) 2%, var(--background));
  --foreground-3: color-mix(in srgb, var(--foreground) 3%, var(--background));
  --foreground-5: color-mix(in srgb, var(--foreground) 5%, var(--background));
  --foreground-10: color-mix(in srgb, var(--foreground) 10%, var(--background));
  --foreground-20: color-mix(in srgb, var(--foreground) 20%, var(--background));
  --foreground-30: color-mix(in srgb, var(--foreground) 30%, var(--background));
  --foreground-40: color-mix(in srgb, var(--foreground) 40%, var(--background));
  --foreground-50: color-mix(in srgb, var(--foreground) 50%, var(--background));
  --foreground-60: color-mix(in srgb, var(--foreground) 60%, var(--background));
  --foreground-70: color-mix(in srgb, var(--foreground) 70%, var(--background));
  --foreground-80: color-mix(in srgb, var(--foreground) 80%, var(--background));
  --foreground-90: color-mix(in srgb, var(--foreground) 90%, var(--background));
  --foreground-95: color-mix(in srgb, var(--foreground) 95%, var(--background));

  /* === SHADCN COMPATIBILITY === */
  --secondary: oklch(from var(--foreground) l c h / 0.05);
  --secondary-foreground: var(--foreground);
  --muted: oklch(from var(--foreground) l c h / 0.05);
  --muted-foreground: var(--foreground-50);
  --card: var(--background);
  --card-foreground: var(--foreground);
  --popover: var(--background);
  --popover-foreground: var(--foreground);
  --border: oklch(from var(--foreground) l c h / 0.05);
  --input: oklch(from var(--foreground) l c h / 0.1);
  --ring: oklch(from var(--foreground) l c h / 0.25);

  /* === COMPONENT TOKENS === */
  --user-message-bubble: oklch(from var(--foreground) l c h / 0.05);
  --md-bullets: var(--foreground-50);
  --md-counters: var(--foreground-50);

  /* === MARKDOWN CSS VARIABLES (GitHub Dark, brand-aware) === */
  --md-fg-default: #e6edf3;
  --md-fg-muted: #8b949e;
  --md-link-color: var(--tw-brand-7);
  --md-code-bg: rgba(110, 118, 129, 0.4);
  --md-code-border: rgba(240, 246, 252, 0.1);
  --md-blockquote-border: #3b434b;
  --md-blockquote-fg: #8b949e;
  --md-table-border: #30363d;
  --md-table-header-bg: rgba(110, 118, 129, 0.2);
  --md-table-stripe-bg: rgba(110, 118, 129, 0.1);
  --md-table-hover-bg: rgba(244, 106, 69, 0.08);
  --md-hr-color: #21262d;
  --md-heading-border: #21262d;
  --md-code-header-bg: rgba(110, 118, 129, 0.2);
  --md-code-block-bg: #161b22;
  --md-code-block-border: #30363d;
  --md-marker-color: var(--tw-brand-7);

  /* =========================================================================
     TWork Design System v2 — DARK MODE
  ========================================================================= */

  /* -- Semantic Backgrounds -- */
  --tw-bg-primary:   #1A1B1E;
  --tw-bg-secondary: #141518;
  --tw-bg-tertiary:  #212327;
  --tw-bg-card:      #1A1B1E;
  --tw-bg-input:     #141518;
  --tw-bg-hover:     color-mix(in srgb, #fff 6%, transparent);
  --tw-bg-active:    rgba(255, 255, 255, 0.1);
  --tw-bg-user:      var(--tw-brand-2);
  --tw-bg-code:      #121316;
  --tw-bg-overlay:   rgba(0, 0, 0, 0.6);

  --surface-base:    var(--tw-bg-primary);
  --surface-sidebar: var(--tw-bg-secondary);
  --surface-card:    var(--tw-bg-card);
  --surface-hover:   var(--tw-bg-hover);
  --surface-active:  var(--tw-bg-active);
  --surface-input:   var(--tw-bg-input);

  /* -- Semantic Text -- */
  --tw-text-primary:   rgba(255, 255, 255, 0.92);
  --tw-text-secondary: rgba(255, 255, 255, 0.65);
  --tw-text-tertiary:  rgba(255, 255, 255, 0.45);
  --tw-text-disabled:  rgba(255, 255, 255, 0.25);
  --tw-text-link:      var(--tw-brand-7);
  --tw-text-user:      var(--tw-text-primary);

  --text-primary:   var(--tw-text-primary);
  --text-secondary: var(--tw-text-secondary);
  --text-tertiary:  var(--tw-text-tertiary);
  --text-disabled:  var(--tw-text-disabled);
  --text-inverse:   #0F172A;

  /* -- Semantic Borders -- */
  --tw-border-default: color-mix(in srgb, #fff 10%, transparent);
  --tw-border-weak:    color-mix(in srgb, #fff 5%, transparent);
  --tw-border-strong:  #34373D;
  --tw-border-input:   #2A2C31;

  --border-default: var(--tw-border-default);
  --border-subtle:  var(--tw-border-weak);
  --border-focus:   var(--tw-brand-7);

  /* -- Icons -- */
  --tw-icon-primary:   rgba(255, 255, 255, 0.9);
  --tw-icon-secondary: rgba(255, 255, 255, 0.7);
  --tw-icon-tertiary:  rgba(255, 255, 255, 0.5);

  /* -- Status Colors -- */
  --tw-status-success: #2ECC71;
  --tw-status-warning: #FF9500;
  --tw-status-error:   #FF453A;
  --tw-status-info:    var(--tw-brand-7);
  --tw-accent-unread:  var(--tw-brand-7);

  /* -- Scrollbar -- */
  --tw-scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --tw-scrollbar-hover: rgba(255, 255, 255, 0.3);

  /* -- Brand scale (dark mode static fallback; runtime theme overrides these) -- */
  --tw-brand-1:  #2a1215;
  --tw-brand-2:  #3d1d20;
  --tw-brand-3:  #522a2d;
  --tw-brand-4:  #6a393c;
  --tw-brand-5:  #864d4e;
  --tw-brand-6:  #a86361;
  --tw-brand-7:  #c87e75;
  --tw-brand-8:  #e89a8b;  /* dark mode primary (brightened for readability) */
  --tw-brand-9:  #efb8ab;
  --tw-brand-10: #f5d3c9;

  /* -- Brand aliases (dark: reversed — low index = dark, high = light) -- */
  --color-brand-50:  var(--tw-brand-2);
  --color-brand-100: var(--tw-brand-3);
  --color-brand-200: var(--tw-brand-5);
  --color-brand-300: var(--tw-brand-6);
  --color-brand-400: var(--tw-brand-7);
  --color-brand-500: var(--tw-brand-8);
  --color-brand-600: var(--tw-brand-9);
  --color-brand-700: var(--tw-brand-10);

  --color-brand-red:      var(--tw-brand-8);
  --color-brand-red-soft: var(--tw-brand-2);
  --shadow-brand-red: 0 2px 8px oklch(from var(--tw-brand-8) l c h / 0.35);

  --brand-gradient-start: var(--tw-brand-8);
  --brand-gradient-end:   var(--tw-brand-5);
  --brand-gradient-shadow: 0 4px 12px oklch(from var(--tw-brand-8) l c h / 0.35);
}

/* Inter font option */
html[data-font="inter"] {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-default: var(--font-sans);
  font-optical-sizing: auto;
  font-feature-settings: "cv01", "cv02", "cv03", "cv04", "case";
}

/* =============================================================================
   TAILWIND V4 THEME BINDING
   Map CSS variables to Tailwind v4 utility atoms
============================================================================= */

@theme inline {
  /* 6 base colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-accent: var(--accent);
  --color-info: var(--info);
  --color-success: var(--success);
  --color-destructive: var(--destructive);

  /* Mix variants */
  --color-foreground-2: var(--foreground-2);
  --color-foreground-3: var(--foreground-3);
  --color-foreground-5: var(--foreground-5);
  --color-foreground-10: var(--foreground-10);
  --color-foreground-20: var(--foreground-20);
  --color-foreground-30: var(--foreground-30);
  --color-foreground-40: var(--foreground-40);
  --color-foreground-50: var(--foreground-50);
  --color-foreground-60: var(--foreground-60);
  --color-foreground-70: var(--foreground-70);
  --color-foreground-80: var(--foreground-80);
  --color-foreground-90: var(--foreground-90);
  --color-foreground-95: var(--foreground-95);

  /* Legacy compat */
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-destructive-foreground: var(--background);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Markdown */
  --color-md-bullets: var(--md-bullets);
  --color-md-counters: var(--md-counters);
  --color-md-fg-default: var(--md-fg-default);
  --color-md-fg-muted: var(--md-fg-muted);
  --color-md-link: var(--md-link-color);
  --color-md-code-bg: var(--md-code-bg);
  --color-md-blockquote-border: var(--md-blockquote-border);
  --color-md-blockquote-fg: var(--md-blockquote-fg);
  --color-md-table-border: var(--md-table-border);
  --color-md-table-header-bg: var(--md-table-header-bg);
  --color-md-table-stripe-bg: var(--md-table-stripe-bg);
  --color-md-hr: var(--md-hr-color);
  --color-md-heading-border: var(--md-heading-border);
  --color-md-code-header-bg: var(--md-code-header-bg);
  --color-md-code-block-bg: var(--md-code-block-bg);
  --color-md-code-block-border: var(--md-code-block-border);
  --color-md-marker: var(--md-marker-color);

  /* Component */
  --color-user-message-bubble: var(--user-message-bubble);
  --color-sidebar-hover: oklch(from var(--foreground) l c h / 0.02);

  /* Fonts */
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  /* =========================================================================
     TYPOGRAPHY TOKENS — SEMANTIC TEXT STYLES
     Each token is a composite: `text-{level}` sets BOTH font-size and line-height.
     Use these instead of arbitrary `text-[13px]` / `leading-[1.45]` values.

     Level       Size   Line-height  Use for
     ----------  -----  -----------  -------------------------------------------
     display     32px   40px         Page titles, hero headers
     h1          24px   32px         Major section headings
     h2          20px   28px         Sub-section headings, modal titles
     h3          16px   24px         Card titles, group headers
     subtitle    15px   24px         Emphasized sub-titles, changelog versions
     body        14px   22px         Default body text, form labels
     body-sm     13px   20px         Secondary body, UI controls, mentions
     caption     12px   18px         Helper text, timestamps, metadata
     micro       11px   16px         Badges, tags, minimal indicators
     mini        10px   14px         Icon labels inside tiny badges
  ========================================================================= */

  /* Composite text tokens — `text-{level}` sets size + line-height together */
  --text-display: 32px;
  --text-display--line-height: 40px;
  --text-h1: 24px;
  --text-h1--line-height: 32px;
  --text-h2: 20px;
  --text-h2--line-height: 28px;
  --text-h3: 16px;
  --text-h3--line-height: 24px;
  --text-subtitle: 14px;
  --text-subtitle--line-height: 22px;
  --text-body: 14px;
  --text-body--line-height: 22px;
  --text-body-sm: 13px;
  --text-body-sm--line-height: 20px;
  --text-caption: 12px;
  --text-caption--line-height: 18px;
  --text-micro: 11px;
  --text-micro--line-height: 16px;
  --text-mini: 10px;
  --text-mini--line-height: 14px;

  /* Standalone line-height tokens — use when you only need to adjust leading */
  --leading-display: 40px;
  --leading-h1: 32px;
  --leading-h2: 28px;
  --leading-h3: 24px;
  --leading-subtitle: 22px;
  --leading-body: 22px;
  --leading-body-sm: 20px;
  --leading-caption: 18px;
  --leading-micro: 16px;
  --leading-mini: 14px;

  /* Z-index */
  --z-index-base: var(--z-base);
  --z-index-local: var(--z-local);
  --z-index-sticky: var(--z-sticky);
  --z-index-titlebar: var(--z-titlebar);
  --z-index-panel: var(--z-panel);
  --z-index-dropdown: var(--z-dropdown);
  --z-index-tooltip: var(--z-tooltip);
  --z-index-modal: var(--z-modal);
  --z-index-overlay: var(--z-overlay);
  --z-index-fullscreen: var(--z-fullscreen);
  --z-index-floating-backdrop: var(--z-floating-backdrop);
  --z-index-floating-menu: var(--z-floating-menu);
  --z-index-island-overlay: var(--z-island-overlay);
  --z-index-island: var(--z-island);
  --z-index-island-popover: var(--z-island-popover);
  --z-index-splash: var(--z-splash);

  /* v2 Semantic surfaces → Tailwind: bg-surface-sidebar, bg-surface-card, etc. */
  --color-surface-base:    var(--surface-base);
  --color-surface-sidebar: var(--surface-sidebar);
  --color-surface-card:    var(--surface-card);
  --color-surface-hover:   var(--surface-hover);
  --color-surface-active:  var(--surface-active);
  --color-surface-input:   var(--surface-input);

  /* v2 Semantic text → Tailwind: text-primary, text-secondary, etc. */
  --color-text-primary:   var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary:  var(--text-tertiary);
  --color-text-disabled:  var(--text-disabled);
  --color-text-inverse:   var(--text-inverse);

  /* v2 Semantic borders → Tailwind: border-default, border-subtle, etc. */
  --color-border-default: var(--border-default);
  --color-border-subtle:  var(--border-subtle);
  --color-border-focus:   var(--border-focus);

  /* Shadows */
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  /* Container query breakpoints */
  --container-3xs: 16rem;
  --container-panel-compact: 28rem;
  --container-panel-medium: 40rem;
  --container-mobile: 48rem;
}

/* =============================================================================
   BASE STYLES
============================================================================= */

@layer base {
  * {
    box-sizing: border-box;
    border-color: var(--border);
  }

  html {
    font-size: var(--font-size-base);
  }

  body {
    font-family: var(--font-family-base, var(--font-default));
    font-size: var(--tw-font-body-size);
    line-height: var(--leading-body);
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
  }

  /* Focus ring styles */
  *:focus-visible {
    outline: none;
    --tw-ring-offset-width: var(--ring-offset);
    --tw-ring-width: var(--ring-width);
    --tw-ring-color: var(--ring);
  }
}

/* =============================================================================
   UTILITY CLASSES
============================================================================= */

@layer utilities {
  /* Hide scrollbar but keep scrolling */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar until parent .group is hovered */
  .scrollbar-hover::-webkit-scrollbar {
    width: 4px;
  }
  .scrollbar-hover::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-hover::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
  }
  .group:hover .scrollbar-hover::-webkit-scrollbar-thumb {
    background: var(--border);
  }
  .group:hover .scrollbar-hover::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
  }

  /* Custom shadow utilities */
  .shadow-minimal {
    box-shadow: var(--shadow-minimal);
  }

  .shadow-middle {
    box-shadow:
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
      rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px,
      rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px,
      rgba(0, 0, 0, 0.06) 0px 6px 6px -3px;
  }

  .shadow-medium {
    box-shadow:
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
      rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px,
      rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px,
      rgba(0, 0, 0, 0.06) 0px 6px 6px -3px,
      rgba(0, 0, 0, 0.04) 0px 12px 12px -6px;
  }

  .shadow-hero {
    box-shadow:
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
      rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px,
      rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px,
      rgba(0, 0, 0, 0.06) 0px 6px 6px -3px,
      rgba(0, 0, 0, 0.04) 0px 12px 12px -6px,
      rgba(0, 0, 0, 0.03) 0px 24px 32px -12px,
      rgba(0, 0, 0, 0.02) 0px 48px 64px -24px;
  }

  .shadow-tinted {
    --shadow-color: 0, 0, 0;
    box-shadow:
      rgba(var(--shadow-color), 0) 0px 0px 0px 0px,
      rgba(var(--shadow-color), 0) 0px 0px 0px 0px,
      rgba(var(--shadow-color), calc(var(--shadow-border-opacity) * 1.5)) 0px 0px 0px 1px,
      rgba(var(--shadow-color), var(--shadow-border-opacity)) 0px 1px 1px -0.5px,
      rgba(var(--shadow-color), var(--shadow-blur-opacity)) 0px 3px 3px -1.5px,
      rgba(var(--shadow-color), calc(var(--shadow-blur-opacity) * 0.67)) 0px 6px 6px -3px;
  }

  [data-theme="dark"].shadow-tinted {
    box-shadow:
      rgba(var(--shadow-color), 0) 0px 0px 0px 0px,
      rgba(var(--shadow-color), 0) 0px 0px 0px 0px,
      rgba(var(--shadow-color), calc(var(--shadow-border-opacity) * 3)) 0px 0px 0px 1px,
      rgba(var(--shadow-color), 0) 0px 1px 1px -0.5px,
      rgba(var(--shadow-color), 0) 0px 3px 3px -1.5px,
      rgba(var(--shadow-color), 0) 0px 6px 6px -3px;
  }

  .shadow-strong {
    box-shadow:
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
      rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px,
      rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px,
      rgba(0, 0, 0, 0.06) 0px 6px 6px -3px,
      rgba(0, 0, 0, 0.04) 0px 12px 12px -6px,
      rgba(0, 0, 0, 0.04) 0px 24px 24px -12px;
  }

  .shadow-modal-small {
    box-shadow: var(--shadow-modal-small);
  }

  /* Smooth corners (iOS-style superellipse) */
  .smooth-corners {
    corner-shape: superellipse;
    -webkit-corner-shape: superellipse;
  }

  /* Unified popover styling */
  .popover-styled {
    background: var(--background);
    color: var(--foreground);
    border-radius: 8px;
    border: none;
    box-shadow:
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
      rgba(0, 0, 0, 0.04) 0px 1px 1px -0.5px,
      rgba(0, 0, 0, 0.04) 0px 3px 3px 0px,
      rgba(0, 0, 0, 0.02) 0px 6px 6px 0px,
      rgba(0, 0, 0, 0.02) 0px 12px 12px 0px,
      rgba(0, 0, 0, 0.02) 0px 24px 24px 0px;
  }
}

/* =============================================================================
   SPINNER - SpinKit Grid (3x3)
============================================================================= */

.spinner {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  width: 1em;
  height: 1em;
  gap: 0.08em;
}

.spinner-cube {
  background-color: currentColor;
  animation: spinner-grid 1.3s infinite ease-in-out;
  transform: scale3d(0.5, 0.5, 1);
}

.spinner-cube:nth-child(1) { animation-delay: 0.2s; }
.spinner-cube:nth-child(2) { animation-delay: 0.3s; }
.spinner-cube:nth-child(3) { animation-delay: 0.4s; }
.spinner-cube:nth-child(4) { animation-delay: 0.1s; }
.spinner-cube:nth-child(5) { animation-delay: 0.2s; }
.spinner-cube:nth-child(6) { animation-delay: 0.3s; }
.spinner-cube:nth-child(7) { animation-delay: 0s; }
.spinner-cube:nth-child(8) { animation-delay: 0.1s; }
.spinner-cube:nth-child(9) { animation-delay: 0.2s; }

@keyframes spinner-grid {
  0%, 70%, 100% {
    transform: scale3d(0.5, 0.5, 1);
  }
  35% {
    transform: scale3d(0, 0, 1);
  }
}

/* =============================================================================
   SHIMMER ANIMATION
============================================================================= */

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  position: relative;
  overflow: hidden;
}

.animate-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(from var(--foreground) l c h / 0.06) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
