/**
 * NgideIn Design Tokens — Neubrutalism
 * =====================================
 * Bold borders, hard shadows, saturated colors, raw personality.
 * No gradients. WCAG AAA. Dark mode via toggle.
 */

:root {
  /* --------------------------------------------------------
     1. COLORS
     --------------------------------------------------------
     Saturated, punchy, unapologetic.
     -------------------------------------------------------- */

  /* --- Primary (Teal) --- */
  --color-primary-50:  #ccfbf1;
  --color-primary-100: #99f6e4;
  --color-primary-200: #5eead4;
  --color-primary-300: #2dd4bf;
  --color-primary-400: #14b8a6;
  --color-primary-500: #0d9488;
  --color-primary-600: #0f766e;
  --color-primary-700: #115e59;
  --color-primary-800: #134e4a;
  --color-primary-900: #042f2e;

  /* --- Accent (Coral/Rose) --- */
  --color-accent-50:  #ffe4e6;
  --color-accent-100: #fecdd3;
  --color-accent-200: #fda4af;
  --color-accent-300: #fb7185;
  --color-accent-400: #f43f5e;
  --color-accent-500: #e11d48;
  --color-accent-600: #be123c;
  --color-accent-700: #9f1239;
  --color-accent-800: #881337;
  --color-accent-900: #4c0519;

  /* --- Yellow (Neubrutalism staple) --- */
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;

  /* --- Neutral (Warm Stone) --- */
  --color-neutral-0:   #fffffe;
  --color-neutral-50:  #fafaf9;
  --color-neutral-100: #f5f5f4;
  --color-neutral-200: #e7e5e4;
  --color-neutral-300: #d6d3d1;
  --color-neutral-400: #a8a29e;
  --color-neutral-500: #78716c;
  --color-neutral-600: #57534e;
  --color-neutral-700: #44403c;
  --color-neutral-800: #292524;
  --color-neutral-900: #1c1917;
  --color-neutral-950: #0c0a09;

  /* --- Black (the star of Neubrutalism) --- */
  --color-black: #1c1917;

  /* --- Semantic --- */
  --color-success-50:  #dcfce7;
  --color-success-100: #bbf7d0;
  --color-success-500: #22c55e;
  --color-success-700: #15803d;
  --color-on-success:  #052e16;

  --color-warning-50:  #fef3c7;
  --color-warning-100: #fde68a;
  --color-warning-500: #f59e0b;
  --color-warning-700: #b45309;
  --color-on-warning:  #451a03;

  --color-danger-50:  #fee2e2;
  --color-danger-100: #fecaca;
  --color-danger-500: #ef4444;
  --color-danger-700: #b91c1c;
  --color-on-danger:  #450a0a;

  --color-info-50:  #dbeafe;
  --color-info-100: #bfdbfe;
  --color-info-500: #3b82f6;
  --color-info-700: #1d4ed8;
  --color-on-info:  #1e3a5f;

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

  /* Type scale — 1.333 ratio */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.333rem;
  --text-xl:   1.777rem;
  --text-2xl:  2.369rem;
  --text-3xl:  3.157rem;

  --leading-display: 1.1;
  --leading-heading: 1.15;
  --leading-snug:    1.3;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;

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

  --measure: 60ch;

  /* --------------------------------------------------------
     3. SPACING
     -------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* --------------------------------------------------------
     4. BORDERS & RADIUS
     --------------------------------------------------------
     Neubrutalism: thick borders, mix of sharp + slight round.
     -------------------------------------------------------- */
  --border-width: 2px;
  --border-thick: 3px;
  --border-color: var(--color-black);

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --------------------------------------------------------
     5. SHADOWS
     --------------------------------------------------------
     Hard offset shadows — the Neubrutalism signature.
     No blur. Solid black.
     -------------------------------------------------------- */
  --shadow-sm:  2px 2px 0 var(--color-black);
  --shadow-md:  4px 4px 0 var(--color-black);
  --shadow-lg:  6px 6px 0 var(--color-black);
  --shadow-xl:  8px 8px 0 var(--color-black);

  /* Hover state: shadow shifts further */
  --shadow-hover: 6px 6px 0 var(--color-black);
  /* Active state: shadow collapses */
  --shadow-active: 1px 1px 0 var(--color-black);

  /* --------------------------------------------------------
     6. TRANSITIONS
     -------------------------------------------------------- */
  --duration-fast:   80ms;
  --duration-normal: 120ms;
  --duration-slow:   200ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  /* --------------------------------------------------------
     7. LAYOUT
     -------------------------------------------------------- */
  --container-xs:  400px;
  --container-sm:  480px;
  --container-md:  640px;
  --container-lg:  768px;
  --container-xl:  1024px;
  --container-2xl: 1200px;

  --page-gutter: var(--space-5);

  /* --------------------------------------------------------
     8. FOCUS
     -------------------------------------------------------- */
  --focus-ring-color: var(--color-black);
  --focus-ring-offset: 2px;
  --focus-ring-width: 3px;
}

@media (min-width: 640px) {
  :root {
    --page-gutter: var(--space-8);
  }
}

/* --------------------------------------------------------
   9. DARK MODE
   -------------------------------------------------------- */
:root[data-theme="dark"] {
  /* Neutrals — inverted */
  --color-neutral-0:   #0c0a09;
  --color-neutral-50:  #1c1917;
  --color-neutral-100: #292524;
  --color-neutral-200: #44403c;
  --color-neutral-300: #57534e;
  --color-neutral-400: #78716c;
  --color-neutral-500: #a8a29e;
  --color-neutral-600: #d6d3d1;
  --color-neutral-700: #e7e5e4;
  --color-neutral-800: #f5f5f4;
  --color-neutral-900: #fafaf9;
  --color-neutral-950: #fffffe;

  /* Black becomes white — borders & shadows flip */
  --color-black: #fafaf9;
  --border-color: var(--color-black);

  /* Primary — keep saturated, dark bg variants */
  --color-primary-50:  #134e4a;
  --color-primary-100: #115e59;
  /* 400 stays #14b8a6 — hero/btn color, bold on dark */
  --color-primary-600: #2dd4bf;
  --color-primary-700: #5eead4;

  /* Accent — keep punchy */
  --color-accent-50:  #881337;
  --color-accent-100: #9f1239;
  /* 400 stays #f43f5e — btn color */
  --color-accent-500: #fb7185;

  /* Yellow — keep bright, it's the signature */
  /* 200/300/400 stay the same — yellow pops on dark bg */

  /* Semantic */
  --color-on-success: #dcfce7;
  --color-on-warning: #fef3c7;
  --color-on-danger:  #fee2e2;
  --color-on-info:    #dbeafe;

  --color-success-50:  #14532d;
  --color-success-100: #166534;
  --color-success-700: #86efac;
  --color-warning-50:  #78350f;
  --color-warning-100: #92400e;
  --color-warning-700: #fcd34d;
  --color-danger-50:   #7f1d1d;
  --color-danger-100:  #991b1b;
  --color-danger-700:  #fca5a5;
  --color-info-50:     #1e3a5f;
  --color-info-100:    #1e40af;
  --color-info-700:    #93c5fd;

  /* Shadows — white offset on dark */
  --shadow-sm:  2px 2px 0 var(--color-black);
  --shadow-md:  4px 4px 0 var(--color-black);
  --shadow-lg:  6px 6px 0 var(--color-black);
  --shadow-xl:  8px 8px 0 var(--color-black);
  --shadow-hover: 6px 6px 0 var(--color-black);
  --shadow-active: 1px 1px 0 var(--color-black);

  --focus-ring-color: var(--color-black);
}

/* Auto: mirrors data-theme="dark" when system prefers dark */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --color-neutral-0:   #0c0a09;
    --color-neutral-50:  #1c1917;
    --color-neutral-100: #292524;
    --color-neutral-200: #44403c;
    --color-neutral-300: #57534e;
    --color-neutral-400: #78716c;
    --color-neutral-500: #a8a29e;
    --color-neutral-600: #d6d3d1;
    --color-neutral-700: #e7e5e4;
    --color-neutral-800: #f5f5f4;
    --color-neutral-900: #fafaf9;
    --color-neutral-950: #fffffe;
    --color-black: #fafaf9;
    --border-color: var(--color-black);
    --color-primary-50:  #134e4a;
    --color-primary-100: #115e59;
    --color-primary-600: #2dd4bf;
    --color-primary-700: #5eead4;
    --color-accent-50:  #881337;
    --color-accent-100: #9f1239;
    --color-accent-500: #fb7185;
    --color-on-success: #dcfce7;
    --color-on-warning: #fef3c7;
    --color-on-danger:  #fee2e2;
    --color-on-info:    #dbeafe;
    --color-success-50:  #14532d;
    --color-success-100: #166534;
    --color-success-700: #86efac;
    --color-warning-50:  #78350f;
    --color-warning-100: #92400e;
    --color-warning-700: #fcd34d;
    --color-danger-50:   #7f1d1d;
    --color-danger-100:  #991b1b;
    --color-danger-700:  #fca5a5;
    --color-info-50:     #1e3a5f;
    --color-info-100:    #1e40af;
    --color-info-700:    #93c5fd;
    --shadow-sm:  2px 2px 0 var(--color-black);
    --shadow-md:  4px 4px 0 var(--color-black);
    --shadow-lg:  6px 6px 0 var(--color-black);
    --shadow-xl:  8px 8px 0 var(--color-black);
    --shadow-hover: 6px 6px 0 var(--color-black);
    --shadow-active: 1px 1px 0 var(--color-black);
    --focus-ring-color: var(--color-black);
  }
}

/* --------------------------------------------------------
   10. REDUCED MOTION
   -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}