/*
 * Ezone UI v1 — design tokens (single source of truth for ezone.vn, chat.ezone.vn, pos.ezone.vn).
 * Style guide: https://ezone.vn/ui/
 *
 * Include first:  <link rel="stylesheet" href="https://ezone.vn/ui/v1/tokens.css?v=…">
 * Apps alias their own variables to these (e.g. chat: --brand: var(--ez-primary)).
 *
 * Theme:
 *   explicit dark   data-theme="dark" or data-bs-theme="dark" (Bootstrap) on <html> or any subtree
 *   explicit light  <html data-theme="light"> or  <html data-bs-theme="light">
 *   automatic       no attribute → follows the OS (prefers-color-scheme)
 *
 * v1 rule: only additive changes. Renaming/removing a token or changing what it means needs /ui/v2/.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* A theme attribute on any element (Bootstrap also puts data-bs-theme on <body> or a section)
   scopes the palette to that subtree, so those selectors are listed next to :root. */
:root,
[data-theme="light"],
[data-bs-theme="light"] {
  /* Type */
  --ez-font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ez-font-size: 14px;
  --ez-line-height: 1.5;

  /* Brand */
  --ez-primary: #0b5cff;
  --ez-primary-hover: #0a4fe0;
  --ez-primary-active: #0843c0;
  --ez-primary-soft: rgba(11, 92, 255, 0.10);
  --ez-brand-start: #1a73ff;
  --ez-brand-end: #6a5cff;
  --ez-brand-grad: linear-gradient(135deg, #1a73ff 0%, #0b5cff 45%, #6a5cff 100%);
  --ez-brand-ring: rgba(11, 92, 255, 0.28);
  --ez-on-brand: #ffffff;

  /* Status */
  --ez-info: #2f7bff;
  --ez-success: #12b76a;
  --ez-success-soft: rgba(18, 183, 106, 0.12);
  --ez-warning: #f59e0b;
  --ez-warning-soft: rgba(245, 158, 11, 0.14);
  --ez-danger: #ef4444;
  --ez-danger-soft: rgba(239, 68, 68, 0.12);

  /* Surfaces */
  --ez-body-bg: #eef2f9;
  --ez-bg-glow-1: rgba(47, 123, 255, 0.18);
  --ez-bg-glow-2: rgba(122, 92, 255, 0.14);
  --ez-surface: #ffffff;
  --ez-surface-subtle: #f6f8fc;
  --ez-surface-hover: #edf1f8;
  --ez-surface-glass: rgba(255, 255, 255, 0.82);

  /* Navigation rail (dark in both themes) */
  --ez-rail: #0d1b33;
  --ez-rail-2: #14274a;
  --ez-rail-text: #8ea3c7;
  --ez-rail-active: rgba(77, 141, 255, 0.2);

  /* Text */
  --ez-text: #0f1b2e;
  --ez-text-strong: #0f1b2e;
  --ez-text-muted: #4a5872;
  --ez-text-soft: #8592a8;

  /* Lines and focus */
  --ez-border: #e3e8f2;
  --ez-border-soft: #edf1f8;
  --ez-control-border: #d3dbea;
  --ez-focus-border: #0b5cff;
  --ez-focus-ring: rgba(11, 92, 255, 0.12);

  /* Elevation */
  --ez-shadow-sm: 0 1px 2px rgba(16, 32, 64, 0.06), 0 1px 3px rgba(16, 32, 64, 0.06);
  --ez-shadow-md: 0 6px 18px rgba(16, 32, 64, 0.08), 0 2px 6px rgba(16, 32, 64, 0.05);
  --ez-shadow-lg: 0 24px 60px rgba(16, 32, 64, 0.18), 0 8px 20px rgba(16, 32, 64, 0.08);
  --ez-shadow-brand: 0 10px 24px rgba(11, 92, 255, 0.32);

  /* Shape */
  --ez-radius-sm: 10px;
  --ez-radius: 12px;
  --ez-radius-card: 18px;
  --ez-radius-lg: 20px;
  --ez-radius-xl: 24px;
  --ez-radius-pill: 999px;

  /* Space and touch */
  --ez-space-1: 4px;
  --ez-space-2: 8px;
  --ez-space-3: 12px;
  --ez-space-4: 16px;
  --ez-space-5: 24px;
  --ez-space-6: 32px;
  --ez-touch: 44px;
  --ez-control-h: 40px;

  /* Motion */
  --ez-ease: cubic-bezier(.2, .8, .2, 1);

  /* Layers */
  --ez-z-bar: 1030;
  --ez-z-sheet: 1045;
  --ez-z-modal: 1055;

  /* Breakpoints (for reference; media queries cannot read variables):
     phone < 768px · tablet 768–1199.98px · desktop >= 1200px */

  color-scheme: light;
}

/* Dark palette — explicit choice, or OS preference when the page sets no theme attribute.
   :root[…] outranks app stylesheets that style html[data-bs-theme="dark"]. */
:root[data-theme="dark"],
:root[data-bs-theme="dark"],
[data-theme="dark"],
[data-bs-theme="dark"] {
  --ez-primary: #4c8dff;
  --ez-primary-hover: #6a9fff;
  --ez-primary-active: #3b7bf0;
  --ez-primary-soft: rgba(77, 140, 255, 0.16);
  --ez-brand-ring: rgba(76, 141, 255, 0.4);
  --ez-body-bg: #070d1a;
  --ez-bg-glow-1: rgba(47, 123, 255, 0.16);
  --ez-bg-glow-2: rgba(122, 92, 255, 0.14);
  --ez-surface: #0f1829;
  --ez-surface-subtle: #131f35;
  --ez-surface-hover: #1a2842;
  --ez-surface-glass: rgba(15, 24, 41, 0.86);
  --ez-rail: #050a14;
  --ez-rail-2: #0f1a2e;
  --ez-text: #e8eefb;
  --ez-text-strong: #ffffff;
  --ez-text-muted: #a5b3cc;
  --ez-text-soft: #6f7f9c;
  --ez-border: #1e2c47;
  --ez-border-soft: #172338;
  --ez-control-border: #2a3b5c;
  --ez-focus-border: #4c8dff;
  --ez-focus-ring: rgba(77, 140, 255, 0.2);
  --ez-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ez-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --ez-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not([data-bs-theme]) {
    --ez-primary: #4c8dff;
    --ez-primary-hover: #6a9fff;
    --ez-primary-active: #3b7bf0;
    --ez-primary-soft: rgba(77, 140, 255, 0.16);
    --ez-brand-ring: rgba(76, 141, 255, 0.4);
    --ez-body-bg: #070d1a;
    --ez-bg-glow-1: rgba(47, 123, 255, 0.16);
    --ez-bg-glow-2: rgba(122, 92, 255, 0.14);
    --ez-surface: #0f1829;
    --ez-surface-subtle: #131f35;
    --ez-surface-hover: #1a2842;
    --ez-surface-glass: rgba(15, 24, 41, 0.86);
    --ez-rail: #050a14;
    --ez-rail-2: #0f1a2e;
    --ez-text: #e8eefb;
    --ez-text-strong: #ffffff;
    --ez-text-muted: #a5b3cc;
    --ez-text-soft: #6f7f9c;
    --ez-border: #1e2c47;
    --ez-border-soft: #172338;
    --ez-control-border: #2a3b5c;
    --ez-focus-border: #4c8dff;
    --ez-focus-ring: rgba(77, 140, 255, 0.2);
    --ez-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ez-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
    --ez-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}