/* ═══════════════════════════════════════════════════════
   Dinamic5 — Design Tokens
   Single source of truth for colors, typography, spacing,
   shadows, and radii. Import this in ANY project to get
   the Dinamic5 visual identity.

   Usage:
     @import url('/theme/dinamic5-tokens.css');
     — or —
     <link rel="stylesheet" href="/theme/dinamic5-tokens.css">
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --d5-orange: #FF6B35;
  --d5-orange-light: #FF8C42;
  --d5-orange-dark: #E85A25;
  --d5-orange-glow: rgba(255, 107, 53, .1);
  --d5-orange-soft: #FFF0E8;

  --d5-navy: #1B2A4A;
  --d5-navy-light: #2D3F5E;
  --d5-navy-dark: #152240;

  --d5-teal: #00B4D8;
  --d5-teal-soft: #E6F9FE;

  --d5-green: #06D6A0;
  --d5-green-soft: #E6FBF4;

  /* ── Semantic Colors ── */
  --d5-primary: var(--d5-orange);
  --d5-primary-hover: var(--d5-orange-light);
  --d5-primary-glow: var(--d5-orange-glow);
  --d5-secondary: var(--d5-navy);
  --d5-accent: var(--d5-teal);
  --d5-success: var(--d5-green);
  --d5-warning: #F59E0B;
  --d5-danger: #E11D48;
  --d5-info: var(--d5-teal);

  /* ── Status Colors ── */
  --d5-status-active: var(--d5-green);
  --d5-status-pending: #F59E0B;
  --d5-status-closed: var(--d5-navy);
  --d5-status-error: #E11D48;

  /* ── Backgrounds ── */
  --d5-bg: #FFFFFF;
  --d5-bg-alt: #F8F9FC;
  --d5-bg-warm: #FFF8F3;
  --d5-bg-blue: #EEF4FF;
  --d5-bg-orange: #FFF3EB;
  --d5-bg-green: #EEFBF5;
  --d5-bg-gray: #F5F7FA;
  --d5-bg-input: #F8F9FC;
  --d5-bg-sidebar: var(--d5-navy);
  --d5-bg-sidebar-hover: var(--d5-navy-light);

  /* ── Text ── */
  --d5-text: #1B2A4A;
  --d5-text-muted: #5A6B87;
  --d5-text-light: #94A3B8;
  --d5-text-on-primary: #FFFFFF;
  --d5-text-on-dark: rgba(255, 255, 255, .9);
  --d5-text-on-dark-muted: rgba(255, 255, 255, .5);

  /* ── Borders ── */
  --d5-border: rgba(27, 42, 74, .06);
  --d5-border-medium: rgba(27, 42, 74, .12);
  --d5-border-strong: rgba(27, 42, 74, .2);
  --d5-border-focus: var(--d5-orange);
  --d5-border-input: rgba(27, 42, 74, .08);

  /* ── Typography ── */
  --d5-font-he: 'Heebo', sans-serif;
  --d5-font-en: 'Plus Jakarta Sans', sans-serif;
  --d5-font-mono: 'JetBrains Mono', monospace;

  --d5-text-xs: .75rem;
  --d5-text-sm: .85rem;
  --d5-text-base: .95rem;
  --d5-text-md: 1rem;
  --d5-text-lg: 1.15rem;
  --d5-text-xl: 1.35rem;
  --d5-text-2xl: 1.6rem;
  --d5-text-3xl: 2rem;

  --d5-weight-normal: 400;
  --d5-weight-medium: 500;
  --d5-weight-semibold: 600;
  --d5-weight-bold: 700;
  --d5-weight-extrabold: 800;
  --d5-weight-black: 900;

  /* ── Spacing ── */
  --d5-space-1: 4px;
  --d5-space-2: 8px;
  --d5-space-3: 12px;
  --d5-space-4: 16px;
  --d5-space-5: 20px;
  --d5-space-6: 24px;
  --d5-space-8: 32px;
  --d5-space-10: 40px;
  --d5-space-12: 48px;
  --d5-space-16: 64px;

  /* ── Border Radius ── */
  --d5-radius-sm: 8px;
  --d5-radius: 14px;
  --d5-radius-lg: 22px;
  --d5-radius-pill: 50px;
  --d5-radius-full: 9999px;

  /* ── Shadows ── */
  --d5-shadow-sm: 0 1px 4px rgba(27, 42, 74, .05);
  --d5-shadow-md: 0 4px 24px rgba(27, 42, 74, .06);
  --d5-shadow-lg: 0 12px 48px rgba(27, 42, 74, .08);
  --d5-shadow-xl: 0 24px 64px rgba(27, 42, 74, .1);
  --d5-shadow-warm: 0 8px 40px rgba(255, 107, 53, .12);
  --d5-shadow-focus: 0 0 0 4px rgba(255, 107, 53, .1);

  /* ── Transitions ── */
  --d5-ease: cubic-bezier(.4, 0, .2, 1);
  --d5-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d5-duration-fast: 150ms;
  --d5-duration: 300ms;
  --d5-duration-slow: 500ms;

  /* ── Z-Index Scale ── */
  --d5-z-dropdown: 100;
  --d5-z-sticky: 200;
  --d5-z-modal-backdrop: 900;
  --d5-z-modal: 1000;
  --d5-z-toast: 1100;
}