/* ===================================================================
 * Froodl design tokens — §2 colors, §3 typography, §4 spacing,
 * §5 layout, §6 radius, §7 elevation, §8 motion, §9 icons.
 * Components reference SEMANTIC tokens only — never primitives,
 * never hex literals.
 * =================================================================== */

:root {
  /* §2.2 — primitive palette (never used in components directly) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F7F8;
  --neutral-100: #EFEFF1;
  --neutral-200: #E5E5E8;
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-900: #18181B;
  --neutral-950: #0A0A0B;

  --violet-50:   #F3F0FF;
  --violet-100:  #E9E2FF;
  --violet-200:  #D4C5FE;
  --violet-300:  #B8A2FB;
  --violet-400:  #A78BFA;
  --violet-500:  #8B5CF6;
  --violet-600:  #7C3AED;
  --violet-700:  #6D28D9;
  --violet-800:  #5B21B6;
  --violet-900:  #4C1D95;
  --violet-950:  #1A1530;

  --red-400:     #FB7185;
  --red-500:     #F4185D;
  --red-600:     #DC2626;
  --green-400:   #4ADE80;
  --green-500:   #10B981;
  --green-600:   #059669;
  --amber-400:   #FBBF24;
  --amber-500:   #F59E0B;
  --amber-600:   #D97706;
  --danger-400:  #F87171;
  --danger-500:  #EF4444;
  --danger-600:  #DC2626;
  --info-400:    #60A5FA;
  --info-500:    #3B82F6;
  --info-600:    #2563EB;

  /* §3.1 — font stacks */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Charter, Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

  /* §3.2 — type scale */
  --text-display:  32px;  --lh-display: 1.15;
  --text-h1:       28px;  --lh-h1:      1.2;
  --text-h2:       22px;  --lh-h2:      1.25;
  --text-h3:       18px;  --lh-h3:      1.3;
  --text-h4:       17px;  --lh-h4:      1.3;
  --text-body-lg:  17px;  --lh-body-lg: 1.5;
  --text-body:     15px;  --lh-body:    1.45;
  --text-body-sm:  14px;  --lh-body-sm: 1.4;
  --text-caption:  13px;  --lh-caption: 1.35;
  --text-micro:    12px;  --lh-micro:   1.3;
  --text-nano:     11px;  --lh-nano:    1.3;

  --text-reader-h1:    36px;  --lh-reader-h1:    1.15;
  --text-reader-h2:    26px;  --lh-reader-h2:    1.25;
  --text-reader-h3:    20px;  --lh-reader-h3:    1.3;
  --text-reader-body:  19px;  --lh-reader-body:  1.6;
  --text-reader-caption: 15px;  --lh-reader-caption: 1.5;

  /* §3.3 — weights (only three) */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;

  /* §3.4 — letter spacing */
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;

  /* §4.1 — spacing scale (4px base) */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;

  /* §5.4 — breakpoints (also used in JS) */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* §5.6 — z-index scale */
  --z-base:        0;
  --z-sticky:      10;
  --z-dropdown:    100;
  --z-modal-bg:    1000;
  --z-modal:       1010;
  --z-toast:       1100;
  --z-tooltip:     1200;

  /* §6 — radius */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;
  --radius-full:  50%;

  /* §8.1 — motion */
  --duration-instant: 0ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  /* §8.2 — easing */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* §9.2 — icon sizes */
  --icon-xs:  14px;
  --icon-sm:  16px;
  --icon-md:  20px;
  --icon-lg:  24px;
  --icon-xl:  32px;

  /* §10.3 — avatar sizes */
  --avatar-xs:  24px;
  --avatar-sm:  32px;
  --avatar-md:  40px;
  --avatar-lg:  48px;
  --avatar-xl:  80px;
  --avatar-2xl: 134px;
}

/* ===================================================================
 * §2.3 — semantic tokens, DARK (default)
 * =================================================================== */
:root,
[data-theme="dark"] {
  --bg-primary:    #0A0A0B;
  --bg-secondary:  #16161A;
  --bg-tertiary:   #1C1C22;
  --bg-hover:      #22222A;
  --bg-active:     #2A2A33;
  --bg-overlay:    rgba(0, 0, 0, 0.65);

  --text-primary:    #E8E8E8;
  --text-secondary:  #B4B4BC;
  --text-tertiary:   #71767B;
  --text-muted:      #5C5C66;
  --text-on-accent:  #FFFFFF;
  --text-on-light:   #0A0A0B;

  --border-default:  #2A2A30;
  --border-strong:   #3A3A44;
  --border-subtle:   #1F1F25;

  --accent:          #8B5CF6;
  --accent-hover:    #7C3AED;
  --accent-active:   #6D28D9;
  --accent-soft:     #1A1530;
  --accent-text:     #A78BFA;
  --accent-border:   #5B21B6;

  --like:            #F4185D;
  --like-soft:       #2A0A18;
  --bookmark:        #8B5CF6;
  --bookmark-soft:   #1A1530;
  --success:         #10B981;
  --success-soft:    #052E1F;
  --warning:         #F59E0B;
  --warning-soft:    #2D1F08;
  --danger:          #EF4444;
  --danger-soft:     #2D0F0F;
  --info:            #3B82F6;
  --info-soft:       #0F1F3D;

  --skeleton:        #1C1C22;
  --skeleton-shine:  #22222A;
  --focus-ring:      #8B5CF6;
  --selection-bg:    rgba(139, 92, 246, 0.3);

  /* Scoped layout tokens (§5.1) */
  --shell-col-left:    275px;
  --shell-col-feed:    600px;
  --shell-col-right:   350px;
}

/* ===================================================================
 * §2.4 — semantic tokens, LIGHT
 * =================================================================== */
[data-theme="light"] {
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F7F7F8;
  --bg-tertiary:   #EFEFF1;
  --bg-hover:      #F3F3F5;
  --bg-active:     #E9E9EC;
  --bg-overlay:    rgba(0, 0, 0, 0.4);

  --text-primary:    #0A0A0B;
  --text-secondary:  #4A4A52;
  --text-tertiary:   #71767B;
  --text-muted:      #A1A1AA;
  --text-on-accent:  #FFFFFF;
  --text-on-light:   #0A0A0B;

  --border-default:  #E5E5E8;
  --border-strong:   #D4D4D8;
  --border-subtle:   #EFEFF1;

  --accent:          #8B5CF6;
  --accent-hover:    #7C3AED;
  --accent-active:   #6D28D9;
  --accent-soft:     #F3F0FF;
  --accent-text:     #6D28D9;
  --accent-border:   #C4B5FD;

  --like:            #E11D48;
  --like-soft:       #FFE4E6;
  --bookmark:        #6D28D9;
  --bookmark-soft:   #F3F0FF;
  --success:         #059669;
  --success-soft:    #D1FAE5;
  --warning:         #D97706;
  --warning-soft:    #FEF3C7;
  --danger:          #DC2626;
  --danger-soft:     #FEE2E2;
  --info:            #2563EB;
  --info-soft:       #DBEAFE;

  --skeleton:        #EFEFF1;
  --skeleton-shine:  #F7F7F8;
  --focus-ring:      #8B5CF6;
  --selection-bg:    rgba(139, 92, 246, 0.2);
}