/* ===================================================================
   iCookMagic -- Design Tokens (v1)
   ===================================================================
   The single source of truth for the entire site.
   Load order: tokens.css -> base.css -> components -> page styles
   Location:   /assets/css/tokens.css
   =================================================================== */

:root {

  /* ---- 1. COLOR ---- */

  /* Brand */
  --color-magenta:        #FF3D7F;
  --color-magenta-dark:   #D9266A;
  --color-magenta-soft:   #FF8FB3;
  --color-magenta-tint:   #FFE5EE;

  --color-neon:           #39FF14;
  --color-neon-dark:      #2BD60D;

  --color-black:          #000000;
  --color-white:          #FFFFFF;

  /* Neutrals */
  --color-ink-900:        #0A0A0A;
  --color-ink-700:        #2A2A2A;
  --color-ink-500:        #6B6B6B;
  --color-ink-300:        #B8B8B8;
  --color-ink-100:        #EDEDED;
  --color-ink-50:         #F7F7F7;

  /* Alpha */
  --color-white-90:       rgba(255,255,255,.90);
  --color-white-70:       rgba(255,255,255,.70);
  --color-white-50:       rgba(255,255,255,.50);
  --color-white-15:       rgba(255,255,255,.15);
  --color-white-08:       rgba(255,255,255,.08);

  --color-black-90:       rgba(0,0,0,.90);
  --color-black-60:       rgba(0,0,0,.60);
  --color-black-30:       rgba(0,0,0,.30);
  --color-black-10:       rgba(0,0,0,.10);

  /* Semantic */
  --color-success:        #10B981;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-info:           #3B82F6;


  /* ---- 2. TYPOGRAPHY ---- */

  --font-display:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:      'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --text-xs:        12px;
  --text-sm:        14px;
  --text-base:      16px;
  --text-lg:        20px;
  --text-xl:        24px;
  --text-2xl:       32px;
  --text-3xl:       44px;
  --text-4xl:       60px;
  --text-5xl:       80px;

  --leading-tight:    1.05;
  --leading-snug:     1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;


  /* ---- 3. SPACING (4px grid) ---- */

  --space-0:    0;
  --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;


  /* ---- 4. RADIUS ---- */

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


  /* ---- 5. SHADOWS ---- */

  --shadow-sm:   0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md:   0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 12px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:   0 24px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08);

  --shadow-offset-sm:       4px 4px 0 var(--color-black);
  --shadow-offset-md:       8px 8px 0 var(--color-black);
  --shadow-offset-lg:       12px 12px 0 var(--color-black);
  --shadow-offset-magenta:  8px 8px 0 var(--color-magenta);
  --shadow-offset-neon:     8px 8px 0 var(--color-neon);

  --shadow-glow-magenta:  0 6px 18px rgba(255,61,127,.4);
  --shadow-glow-neon:     0 6px 18px rgba(57,255,20,.4);


  /* ---- 6. BORDERS ---- */

  --border-thin:    1px;
  --border-default: 2px;
  --border-thick:   3px;

  --border-color-default:  var(--color-black);
  --border-color-subtle:   var(--color-ink-100);
  --border-color-dark:     var(--color-white-15);


  /* ---- 7. MOTION ---- */

  --duration-instant:  100ms;
  --duration-fast:     180ms;
  --duration-base:     240ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ---- 8. LAYOUT ---- */

  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1280px;
  --container-2xl:   1440px;

  --container-pad:        28px;
  --container-pad-mobile: 18px;


  /* ---- 9. Z-INDEX ---- */

  --z-base:         1;
  --z-raised:       10;
  --z-sticky:       100;
  --z-header:       200;
  --z-drawer:       300;
  --z-modal:        1000;
  --z-toast:        2000;
  --z-tooltip:      3000;

}