/* ============================================================
   DIGDIN — DESIGN TOKENS
   Brand: DigDin | Domain: digdin.net
   ============================================================ */

:root {

  /* ── PALETTE ─────────────────────────────────────────────
     Primary: Deep Navy (infraestrutura, confiança)
     Accent:  Electric Teal (inovação, conexão)
     Surface: Near-white, ultra-light grey
     Alert:   Soft green (sucesso), warm amber (aviso)
  ─────────────────────────────────────────────────────────── */

  /* Neutrals */
  --color-white:        #FFFFFF;
  --color-grey-50:      #F7F8FA;
  --color-grey-100:     #EFF1F5;
  --color-grey-200:     #DDE1EB;
  --color-grey-300:     #C4CAD8;
  --color-grey-400:     #9AA3B8;
  --color-grey-500:     #6B7591;
  --color-grey-600:     #4A5168;
  --color-grey-700:     #323849;
  --color-grey-800:     #1F2333;
  --color-grey-900:     #111623;
  --color-black:        #080B13;

  /* Brand Navy */
  --color-navy-50:      #EEF1FF;
  --color-navy-100:     #D5DAFF;
  --color-navy-200:     #A8B2FF;
  --color-navy-300:     #6E80FF;
  --color-navy-400:     #3D55F5;
  --color-navy-500:     #1A33E8;
  --color-navy-600:     #1228C4;
  --color-navy-700:     #0E1F9A;
  --color-navy-800:     #0B1870;
  --color-navy-900:     #07104A;

  /* Brand Teal (Accent) */
  --color-teal-50:      #E5FDF8;
  --color-teal-100:     #C0FAF0;
  --color-teal-200:     #7FF5E2;
  --color-teal-300:     #2EE8CC;
  --color-teal-400:     #00D4B4;
  --color-teal-500:     #00B89B;
  --color-teal-600:     #008F78;
  --color-teal-700:     #006B5A;
  --color-teal-800:     #004A3F;
  --color-teal-900:     #002A24;

  /* Semantic */
  --color-success:      #10B981;
  --color-success-bg:   #D1FAE5;
  --color-warning:      #F59E0B;
  --color-warning-bg:   #FEF3C7;
  --color-error:        #EF4444;
  --color-error-bg:     #FEE2E2;
  --color-info:         #3B82F6;
  --color-info-bg:      #DBEAFE;

  /* ── BRAND SEMANTIC ALIASES ──────────────────────────────── */
  --brand-primary:      var(--color-navy-800);
  --brand-primary-dark: var(--color-navy-900);
  --brand-accent:       var(--color-teal-400);
  --brand-accent-dark:  var(--color-teal-600);
  --brand-accent-light: var(--color-teal-200);
  --brand-surface:      var(--color-grey-50);
  --brand-surface-alt:  var(--color-white);
  --brand-text-primary: var(--color-grey-900);
  --brand-text-secondary: var(--color-grey-600);
  --brand-text-muted:   var(--color-grey-400);
  --brand-text-on-dark: var(--color-white);
  --brand-border:       var(--color-grey-200);
  --brand-border-dark:  var(--color-grey-300);

  /* Gradient helpers */
  --gradient-primary:   linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-700) 100%);
  --gradient-accent:    linear-gradient(135deg, var(--color-teal-400) 0%, var(--color-navy-400) 100%);
  --gradient-hero:      linear-gradient(155deg, #07104A 0%, #0B1870 45%, #0E1F9A 100%);
  --gradient-card:      linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-display:       'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body:          'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;

  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;
  --font-extrabold:800;

  /* ── SPACING ─────────────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-pad:  clamp(1rem, 5vw, 2.5rem);

  /* ── RADIUS ──────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full:9999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(7,16,74,0.06);
  --shadow-sm:  0 2px 8px rgba(7,16,74,0.08);
  --shadow-md:  0 4px 16px rgba(7,16,74,0.10);
  --shadow-lg:  0 8px 32px rgba(7,16,74,0.14);
  --shadow-xl:  0 16px 48px rgba(7,16,74,0.18);
  --shadow-glow:0 0 32px rgba(0, 212, 180, 0.25);
  --shadow-card-hover: 0 8px 40px rgba(7,16,74,0.18);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --transition-base:  all var(--duration-normal) var(--ease-in-out);
  --transition-fast:  all var(--duration-fast) var(--ease-in-out);
  --transition-slow:  all var(--duration-slow) var(--ease-out-expo);

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── BORDERS ─────────────────────────────────────────────── */
  --border-width:  1px;
  --border-style:  solid;
  --border-color:  var(--brand-border);
  --border:        var(--border-width) var(--border-style) var(--border-color);
  --border-subtle: 1px solid rgba(255,255,255,0.08);
  --border-glass:  1px solid rgba(255,255,255,0.12);
}

/* Dark-mode ready (structural only — page uses dark nav + light content) */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-surface:      var(--color-grey-900);
    --brand-surface-alt:  var(--color-grey-800);
    --brand-text-primary: var(--color-grey-50);
    --brand-text-secondary: var(--color-grey-300);
    --brand-border:       var(--color-grey-700);
  }
}