/* ============================================
   DOSSO AI — Design Tokens
   Dark-first luxury AI agency aesthetic
   ============================================ */

:root {
  /* ── Type Scale (fluid) ── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(1.875rem, 1rem    + 2.5vw,  3rem);
  --text-hero: clamp(2.25rem,  0.5rem  + 3.5vw,  4rem);

  /* ── Spacing (4px base) ── */
  --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;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.25rem;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:  150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Content widths ── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* ── Fonts ── */
  --font-display: 'Clash Display', 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:    'Satoshi', 'Inter', system-ui, sans-serif;
}

/* ── DARK MODE (primary — default) ── */
:root,
[data-theme='dark'] {
  /* Surfaces — deep obsidian */
  --color-bg:              #080A0F;
  --color-surface:         #0D1018;
  --color-surface-2:       #111520;
  --color-surface-offset:  #161B28;
  --color-surface-offset-2:#1C2233;
  --color-surface-dynamic: #222A3D;
  --color-divider:         #1E2535;
  --color-border:          #252D42;

  /* Text */
  --color-text:         #E8EAF0;
  --color-text-muted:   #7D8BA3;
  --color-text-faint:   #3D4A60;
  --color-text-inverse: #080A0F;

  /* Primary accent — electric violet */
  --color-primary:           #7C5CFC;
  --color-primary-hover:     #9575FD;
  --color-primary-active:    #6244E8;
  --color-primary-highlight: #1A1535;

  /* Secondary accent — cyan */
  --color-secondary:         #22D3EE;
  --color-secondary-hover:   #38E8FF;
  --color-secondary-active:  #0CB8D4;
  --color-secondary-highlight: #0C1F28;

  /* Success */
  --color-success:    #22C55E;
  --color-error:      #F43F5E;
  --color-warning:    #F59E0B;

  /* Shadows */
  --shadow-sm:  0 1px 3px oklch(0 0 0 / 0.4);
  --shadow-md:  0 4px 16px oklch(0 0 0 / 0.5);
  --shadow-lg:  0 16px 48px oklch(0 0 0 / 0.6);
  --shadow-glow: 0 0 40px oklch(0.55 0.2 280 / 0.25);
  --shadow-glow-cyan: 0 0 30px oklch(0.75 0.15 195 / 0.2);
}

/* ── LIGHT MODE ── */
[data-theme='light'] {
  --color-bg:              #F8F9FC;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F2F4F8;
  --color-surface-offset:  #EAECF3;
  --color-surface-offset-2:#E2E5EE;
  --color-surface-dynamic: #D8DCE8;
  --color-divider:         #DDE0EA;
  --color-border:          #D0D4E2;

  --color-text:         #0E1220;
  --color-text-muted:   #5A6480;
  --color-text-faint:   #A8B0C8;
  --color-text-inverse: #F8F9FC;

  --color-primary:           #5B3FD8;
  --color-primary-hover:     #7054E8;
  --color-primary-active:    #4530BC;
  --color-primary-highlight: #EDE8FF;

  --color-secondary:         #0891B2;
  --color-secondary-hover:   #0BA5CC;
  --color-secondary-active:  #067A96;
  --color-secondary-highlight: #E0F7FD;

  --color-success:    #16A34A;
  --color-error:      #E11D48;
  --color-warning:    #D97706;

  --shadow-sm:  0 1px 3px oklch(0.1 0.02 260 / 0.08);
  --shadow-md:  0 4px 16px oklch(0.1 0.02 260 / 0.1);
  --shadow-lg:  0 16px 48px oklch(0.1 0.02 260 / 0.14);
  --shadow-glow: 0 0 40px oklch(0.5 0.2 280 / 0.15);
  --shadow-glow-cyan: 0 0 30px oklch(0.6 0.15 195 / 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:              #F8F9FC;
    --color-surface:         #FFFFFF;
    --color-surface-2:       #F2F4F8;
    --color-surface-offset:  #EAECF3;
    --color-surface-offset-2:#E2E5EE;
    --color-surface-dynamic: #D8DCE8;
    --color-divider:         #DDE0EA;
    --color-border:          #D0D4E2;
    --color-text:         #0E1220;
    --color-text-muted:   #5A6480;
    --color-text-faint:   #A8B0C8;
    --color-text-inverse: #F8F9FC;
    --color-primary:           #5B3FD8;
    --color-primary-hover:     #7054E8;
    --color-primary-active:    #4530BC;
    --color-primary-highlight: #EDE8FF;
    --color-secondary:         #0891B2;
    --color-secondary-hover:   #0BA5CC;
    --color-secondary-active:  #067A96;
    --color-secondary-highlight: #E0F7FD;
    --shadow-sm:  0 1px 3px oklch(0.1 0.02 260 / 0.08);
    --shadow-md:  0 4px 16px oklch(0.1 0.02 260 / 0.1);
    --shadow-lg:  0 16px 48px oklch(0.1 0.02 260 / 0.14);
    --shadow-glow: 0 0 40px oklch(0.5 0.2 280 / 0.15);
    --shadow-glow-cyan: 0 0 30px oklch(0.6 0.15 195 / 0.12);
  }
}