/* ============================================================================
   Zinnvytech — Brand Tokens
   ----------------------------------------------------------------------------
   Single source of truth for the Zinnvytech visual identity.
   Every Zinnvytech product (website, web apps, mobile apps, documents) should
   consume these tokens rather than scattering raw hex values in components.

   Layer 1  Raw brand palette  — the fixed brand colours, theme independent.
   Layer 2  Semantic tokens    — what a colour MEANS. These re-map per theme.
   ========================================================================== */

:root {
  /* ---- Layer 1: raw brand palette (never theme-dependent) ---------------- */
  --zinnvy-blue: #2563eb;
  --zinnvy-blue-hover: #1d4ed8;
  --zinnvy-blue-light: #3b82f6;
  --zinnvy-deep-navy: #0b1220;
  --zinnvy-cyan: #06b6d4;
  --zinnvy-cyan-light: #22d3ee;
  --zinnvy-white: #ffffff;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #070b14;

  --brand-success: #16a34a;
  --brand-warning: #d97706;
  --brand-error: #dc2626;

  /* ---- Layer 2: semantic tokens — LIGHT (the default experience) --------- */
  --zinnvy-primary: #2563eb;
  --zinnvy-primary-hover: #1d4ed8;
  --zinnvy-primary-soft: rgb(37 99 235 / 0.08);
  --zinnvy-primary-contrast: #ffffff;

  --zinnvy-accent: #06b6d4;
  --zinnvy-accent-soft: rgb(6 182 212 / 0.1);

  --zinnvy-deep: #0b1220;

  --zinnvy-bg: #ffffff;
  --zinnvy-surface: #f8fafc;
  --zinnvy-surface-elevated: #ffffff;
  --zinnvy-surface-sunken: #f1f5f9;

  --zinnvy-text: #0b1220;
  --zinnvy-text-muted: #64748b;
  --zinnvy-text-strong-muted: #334155;
  --zinnvy-text-on-deep: #f8fafc;
  --zinnvy-text-on-deep-muted: #94a3b8;

  --zinnvy-border: #e2e8f0;
  --zinnvy-border-strong: #cbd5e1;
  --zinnvy-border-on-deep: rgb(255 255 255 / 0.12);

  --zinnvy-success: #16a34a;
  --zinnvy-success-soft: rgb(22 163 74 / 0.1);
  --zinnvy-warning: #d97706;
  --zinnvy-warning-soft: rgb(217 119 6 / 0.1);
  --zinnvy-error: #dc2626;
  --zinnvy-error-soft: rgb(220 38 38 / 0.08);

  /* Grid / blueprint hairlines used in the technical visual language */
  --zinnvy-grid-line: rgb(11 18 32 / 0.055);
  --zinnvy-grid-line-on-deep: rgb(255 255 255 / 0.055);

  /* Elevation scale — restrained, matched to a corporate software aesthetic */
  --shadow-xs: 0 1px 2px rgb(11 18 32 / 0.04);
  --shadow-sm: 0 1px 3px rgb(11 18 32 / 0.06), 0 1px 2px rgb(11 18 32 / 0.04);
  --shadow-md: 0 4px 16px -4px rgb(11 18 32 / 0.08), 0 2px 6px -2px rgb(11 18 32 / 0.04);
  --shadow-lg: 0 16px 40px -12px rgb(11 18 32 / 0.14), 0 4px 12px -4px rgb(11 18 32 / 0.06);
  --shadow-brand: 0 10px 30px -10px rgb(37 99 235 / 0.45);

  /* Brand gradient — used sparingly: hero artwork, key highlights only */
  --zinnvy-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);

  /* Radius scale — rounded, never pill-shaped */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  /* Motion tokens — one rhythm across the whole system */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* Layout */
  --header-height: 72px;
  --z-header: 100;
  --z-drawer: 1000;
}

/* ---- Layer 2: semantic tokens — DARK ------------------------------------
   Dark mode is intentionally designed, not an inversion. Brand blue is
   lightened (#3B82F6) so it keeps a >=4.5:1 relationship with dark surfaces,
   borders are raised so they stay visible, and surfaces step up rather than
   down to convey elevation.
   ------------------------------------------------------------------------ */
[data-theme='dark'] {
  --zinnvy-primary: #3b82f6;
  --zinnvy-primary-hover: #60a5fa;
  --zinnvy-primary-soft: rgb(59 130 246 / 0.14);
  --zinnvy-primary-contrast: #04070d;

  --zinnvy-accent: #22d3ee;
  --zinnvy-accent-soft: rgb(34 211 238 / 0.14);

  --zinnvy-deep: #070b14;

  --zinnvy-bg: #070b14;
  --zinnvy-surface: #0b1220;
  --zinnvy-surface-elevated: #111827;
  --zinnvy-surface-sunken: #04070d;

  --zinnvy-text: #f8fafc;
  --zinnvy-text-muted: #94a3b8;
  --zinnvy-text-strong-muted: #cbd5e1;
  --zinnvy-text-on-deep: #f8fafc;
  --zinnvy-text-on-deep-muted: #94a3b8;

  --zinnvy-border: #1e293b;
  --zinnvy-border-strong: #334155;
  --zinnvy-border-on-deep: rgb(255 255 255 / 0.12);

  --zinnvy-success: #4ade80;
  --zinnvy-success-soft: rgb(74 222 128 / 0.14);
  --zinnvy-warning: #fbbf24;
  --zinnvy-warning-soft: rgb(251 191 36 / 0.14);
  --zinnvy-error: #f87171;
  --zinnvy-error-soft: rgb(248 113 113 / 0.14);

  --zinnvy-grid-line: rgb(255 255 255 / 0.05);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 16px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.65), 0 4px 12px -4px rgb(0 0 0 / 0.5);
  --shadow-brand: 0 10px 30px -10px rgb(59 130 246 / 0.5);
}