/* ============================================================
   TOKENS — The Ai Toolz design system
   All CSS custom properties in one place.
   Dark overrides live in [data-theme="dark"].
   ============================================================ */

/* ── Light Theme (default) ── */
:root {
  /* Backgrounds */
  --color-bg:           #FFFFFF;
  --color-surface:      #F8FAFC;
  --color-surface-2:    #F1F5F9;

  /* Borders */
  --color-border:        #E2E8F0;
  --color-border-strong: #CBD5E1;

  /* Text */
  --color-text:         #0F172A;
  --color-text-muted:   #475569;
  --color-text-invert:  #FFFFFF;

  /* Brand palette */
  --color-primary:       #4F46E5;
  --color-primary-600:   #4338CA;
  --color-primary-hover: #4338CA;
  --color-primary-active:#3730A3;
  --color-primary-tint:  #EEF2FF;
  --color-secondary:     #7C3AED;
  --color-accent:        #F43F5E;

  /* Semantic status */
  --color-success:       #16A34A;
  --color-success-bg:    #F0FDF4;
  --color-success-border:#BBF7D0;
  --color-warning:       #D97706;
  --color-warning-bg:    #FFFBEB;
  --color-warning-border:#FDE68A;
  --color-danger:        #DC2626;
  --color-danger-bg:     #FEF2F2;
  --color-danger-border: #FECACA;
  --color-info:          #0284C7;
  --color-info-bg:       #F0F9FF;
  --color-info-border:   #BAE6FD;

  /* Brand gradient */
  --gradient-brand:       linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --gradient-brand-hover: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);

  /* ── Category accent colours ── */
  --cat-organize:         #2563EB; --cat-organize-bg:     #EFF6FF;
  --cat-optimize:         #16A34A; --cat-optimize-bg:     #F0FDF4;
  --cat-convert-to:       #F59E0B; --cat-convert-to-bg:   #FFFBEB;
  --cat-convert-from:     #EA580C; --cat-convert-from-bg: #FFF7ED;
  --cat-edit:             #7C3AED; --cat-edit-bg:         #F5F3FF;
  --cat-sign:             #DB2777; --cat-sign-bg:         #FDF2F8;
  --cat-security:         #0D9488; --cat-security-bg:     #F0FDFA;
  --cat-text:             #4F46E5; --cat-text-bg:         #EEF2FF;
  --cat-string:           #0891B2; --cat-string-bg:       #ECFEFF;
  --cat-list:             #65A30D; --cat-list-bg:         #F7FEE7;
  --cat-random:           #C026D3; --cat-random-bg:       #FDF4FF;
  --cat-number:           #0284C7; --cat-number-bg:       #F0F9FF;
  --cat-integer:          #7C3AED; --cat-integer-bg:      #F5F3FF;
  --cat-unicode:          #DC2626; --cat-unicode-bg:      #FEF2F2;
  --cat-utf8:             #B45309; --cat-utf8-bg:         #FFFBEB;
  --cat-ascii:            #475569; --cat-ascii-bg:        #F8FAFC;
  --cat-hex:              #0F766E; --cat-hex-bg:          #F0FDFA;
  --cat-binary:           #1D4ED8; --cat-binary-bg:       #EFF6FF;
  --cat-csv:              #15803D; --cat-csv-bg:          #F0FDF4;
  --cat-tsv:              #166534; --cat-tsv-bg:          #DCFCE7;
  --cat-json:             #CA8A04; --cat-json-bg:         #FEFCE8;
  --cat-yaml:             #9333EA; --cat-yaml-bg:         #FAF5FF;
  --cat-xml:              #BE123C; --cat-xml-bg:          #FFF1F2;
  --cat-time:             #0EA5E9; --cat-time-bg:         #F0F9FF;
  --cat-math:             #6D28D9; --cat-math-bg:         #EDE9FE;
  --cat-fractal:          #E11D48; --cat-fractal-bg:      #FFF1F2;
  --cat-png:              #2563EB; --cat-png-bg:          #EFF6FF;
  --cat-jpg:              #EA580C; --cat-jpg-bg:          #FFF7ED;
  --cat-webp:             #059669; --cat-webp-bg:         #ECFDF5;
  --cat-gif:              #D946EF; --cat-gif-bg:          #FDF4FF;
  --cat-bitmap:           #64748B; --cat-bitmap-bg:       #F8FAFC;
  --cat-image:            #0891B2; --cat-image-bg:        #ECFEFF;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --color-bg:            #0B1020;
  --color-surface:       #111832;
  --color-surface-2:     #18213F;
  --color-border:        #26304F;
  --color-border-strong: #374569;
  --color-text:          #E6EAF5;
  --color-text-muted:    #9AA6C4;
  --color-text-invert:   #0F172A;

  --color-primary:        #818CF8;
  --color-primary-600:    #6366F1;
  --color-primary-hover:  #A5B4FC;
  --color-primary-active: #C7D2FE;
  --color-primary-tint:   #1a1e45;
  --color-secondary:      #A78BFA;
  --color-accent:         #FB7185;

  --color-success:        #4ADE80;
  --color-success-bg:     #052E16;
  --color-success-border: #166534;
  --color-warning:        #FCD34D;
  --color-warning-bg:     #1C1400;
  --color-warning-border: #92400E;
  --color-danger:         #F87171;
  --color-danger-bg:      #2D0707;
  --color-danger-border:  #991B1B;
  --color-info:           #38BDF8;
  --color-info-bg:        #082032;
  --color-info-border:    #075985;

  --gradient-brand:        linear-gradient(135deg, #818CF8 0%, #A78BFA 100%);
  --gradient-brand-hover:  linear-gradient(135deg, #A5B4FC 0%, #C4B5FD 100%);

  --cat-organize-bg:      #0D1E3D;
  --cat-optimize-bg:      #052E16;
  --cat-convert-to-bg:    #1C1400;
  --cat-convert-from-bg:  #1A0E06;
  --cat-edit-bg:          #18103F;
  --cat-sign-bg:          #2D0A1D;
  --cat-security-bg:      #042B28;
  --cat-text-bg:          #0F0E3D;
  --cat-string-bg:        #052330;
  --cat-list-bg:          #0D1C02;
  --cat-random-bg:        #200A2D;
  --cat-number-bg:        #032232;
  --cat-integer-bg:       #18103F;
  --cat-unicode-bg:       #2D0707;
  --cat-utf8-bg:          #1C1000;
  --cat-ascii-bg:         #111832;
  --cat-hex-bg:           #042B28;
  --cat-binary-bg:        #0D1E3D;
  --cat-csv-bg:           #052E16;
  --cat-tsv-bg:           #052E16;
  --cat-json-bg:          #181200;
  --cat-yaml-bg:          #1A0D2E;
  --cat-xml-bg:           #2D0A18;
  --cat-time-bg:          #032232;
  --cat-math-bg:          #14073D;
  --cat-fractal-bg:       #2D070F;
  --cat-png-bg:           #0D1E3D;
  --cat-jpg-bg:           #1A0E06;
  --cat-webp-bg:          #022E1A;
  --cat-gif-bg:           #200A2D;
  --cat-bitmap-bg:        #111832;
  --cat-image-bg:         #052330;
}

/* ── Typography tokens ── */
:root {
  --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code',
               'Source Code Pro', Menlo, Consolas, 'Courier New', monospace;

  /* Fluid type: clamp(min, preferred, max) */
  --text-h1:   clamp(2.25rem, 4vw + 1rem,   3.75rem);
  --text-h2:   clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --text-h3:   clamp(1.25rem, 2vw + 0.25rem,1.5rem);
  --text-h4:   1.125rem;
  --text-h5:   1rem;
  --text-h6:   0.875rem;
  --text-body: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;

  --line-height-body:    1.65;
  --line-height-heading: 1.2;
  --line-height-tight:   1.1;
  --line-height-relaxed: 1.8;

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

  --max-prose-width:       70ch;
  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
}

/* ── Spacing ── */
:root {
  --space-px:  1px;
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
}

/* ── Border Radius ── */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;    /* inputs */
  --radius-btn:  12px;   /* buttons */
  --radius-card: 16px;   /* cards */
  --radius-lg:   20px;
  --radius-hero: 24px;   /* hero panels */
  --radius-full: 9999px; /* pills/badges */
}

/* ── Shadows ── */
:root {
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-2: 0 2px 8px 0 rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.05);
  --shadow-3: 0 4px 16px 0 rgba(0,0,0,0.08), 0 2px 6px 0 rgba(0,0,0,0.05);
  --shadow-4: 0 12px 40px 0 rgba(0,0,0,0.12), 0 4px 12px 0 rgba(0,0,0,0.06);
}

[data-theme="dark"] {
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.4),
              inset 0 0 0 1px var(--color-border);
  --shadow-2: 0 2px 8px 0 rgba(0,0,0,0.5),
              inset 0 0 0 1px var(--color-border);
  --shadow-3: 0 4px 16px 0 rgba(0,0,0,0.6),
              inset 0 0 0 1px var(--color-border);
  --shadow-4: 0 12px 40px 0 rgba(0,0,0,0.7),
              inset 0 0 0 1px var(--color-border);
}

/* ── Z-index scale ── */
:root {
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
}

/* ── Motion ── */
:root {
  --duration-fast:   150ms;
  --duration-normal: 220ms;
  --duration-slow:   320ms;
  --ease:            cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --trans-fast:   var(--duration-fast)   var(--ease);
  --trans-normal: var(--duration-normal) var(--ease);
  --trans-slow:   var(--duration-slow)   var(--ease);
}

/* ── Layout ── */
:root {
  --container-max:     1240px;
  --pad-mobile:        16px;
  --pad-tablet:        24px;
  --pad-desktop:       32px;
  --header-h:          72px;
  --header-h-mob:      60px;
}