/*
 *  tokens.css
 *  Zyquo Cloud Web
 *
 *  Author: Simon-Pierre Boucher
 *  Mail: contact@spboucher.ai
 *
 *  ZyquoTheme design tokens, ported 1:1 from the native app's ZyquoTheme.swift.
 *  Every color, font, spacing, radius, and shadow in the app comes from these
 *  variables — components contain zero raw hex values or magic numbers.
 *  Light is the flagship/default theme; dark derives from the same semantics.
 */

:root {
  /* Colors — light (flagship) */
  --z-background: #fafbfd;
  --z-surface: #ffffff;
  --z-surface-secondary: #f2f4f8;
  --z-accent: #4e6af0;
  --z-accent-subtle: #ebeffd;
  --z-text-primary: #1a1c22;
  --z-text-secondary: #6b7080;
  --z-text-tertiary: #9ea3b0;
  --z-border: #e4e7ee;
  --z-success: #2fa36b;
  --z-warning: #d9822b;
  --z-danger: #d64545;
  --z-on-accent: #ffffff;

  /* Syntax highlighting (light) */
  --z-code-keyword: var(--z-accent);
  --z-code-string: var(--z-success);
  --z-code-comment: var(--z-text-tertiary);
  --z-code-number: #b26a0b;
  --z-code-type: #2380c2;
  --z-code-function: #6e4fd4;
  --z-code-property: #2f6fbf;
  --z-code-attribute: var(--z-warning);

  /* Typography */
  --z-font-sans:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --z-font-mono:
    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --z-font-size-title: 20px;
  --z-font-size-body: 13.5px; /* user-adjustable 12–18 via --z-chat-font-size */
  --z-chat-font-size: 13.5px;
  --z-font-size-caption: 11px;
  --z-line-height-body: 1.45;

  /* Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 */
  --z-space-xxs: 4px;
  --z-space-xs: 8px;
  --z-space-sm: 12px;
  --z-space-md: 16px;
  --z-space-lg: 20px;
  --z-space-xl: 24px;
  --z-space-xxl: 32px;

  /* Radii */
  --z-radius-small: 6px;
  --z-radius-medium: 10px;
  --z-radius-large: 14px;

  /* Shadows — extremely soft, floating elements only */
  --z-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
  --z-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.1);

  /* Metrics */
  --z-sidebar-width: 260px;
  --z-chat-header-height: 52px;
  --z-max-message-column: 760px;
  --z-content-inset: 16px;
  --z-hairline: 0.5px;
  --z-attachment-thumb: 56px;
  --z-turn-rhythm: 16px;
  --z-touch-target: 44px;

  /* Motion */
  --z-motion-hover: 80ms ease-in-out;
  --z-motion-send: 150ms ease-out;
  --z-motion-pressed-scale: 0.97;

  color-scheme: light;
}

/* Dark theme — secondary, opt-in (never auto-default) */
:root[data-theme='dark'] {
  --z-background: #14161e;
  --z-surface: #1c1f2a;
  --z-surface-secondary: #232734;
  --z-accent: #6d84f5;
  --z-accent-subtle: #28304c;
  --z-text-primary: #e8eaf2;
  --z-text-secondary: #9ba1b5;
  --z-text-tertiary: #6a7188;
  --z-border: #2c3040;
  --z-success: #43bd83;
  --z-warning: #e59a4d;
  --z-danger: #e36363;

  --z-code-number: #e0a458;
  --z-code-type: #62b7f0;
  --z-code-function: #a48cf2;
  --z-code-property: #7fb4e8;

  --z-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
  --z-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* Accent variants (Settings → Appearance) */
:root[data-accent='graphite'] {
  --z-accent: #5b6270;
  --z-accent-subtle: #eef0f4;
}
:root[data-theme='dark'][data-accent='graphite'] {
  --z-accent: #8a93a6;
  --z-accent-subtle: #2a2e3a;
}
:root[data-accent='teal'] {
  --z-accent: #1d9a8f;
  --z-accent-subtle: #e6f6f4;
}
:root[data-theme='dark'][data-accent='teal'] {
  --z-accent: #3bb5aa;
  --z-accent-subtle: #1f3a38;
}
:root[data-accent='amber'] {
  --z-accent: #c77d1d;
  --z-accent-subtle: #fbf1e3;
}
:root[data-theme='dark'][data-accent='amber'] {
  --z-accent: #dd9b45;
  --z-accent-subtle: #3d3222;
}
:root[data-accent='rose'] {
  --z-accent: #c94f7c;
  --z-accent-subtle: #faeaf1;
}
:root[data-theme='dark'][data-accent='rose'] {
  --z-accent: #de7099;
  --z-accent-subtle: #3d2733;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --z-motion-hover: 0ms;
    --z-motion-send: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}