/* Le Marbles Design Tokens - CSS Custom Properties */
/* Generated from tokens.json */

/* Fonts managed via WordPress Appearance → Fonts + Bricks → Settings → Typography */

:root {
  /* === Colors: Navy Palette === */
  --lm-navy: #00266B;
  --lm-navy-deep: #001A4E;
  --lm-navy-mid: #003591;
  --lm-navy-soft: #0040AA;
  --lm-navy-mist: #D6E0F5;
  --lm-navy-pale: #EEF2FC;

  /* === Colors: Neutrals === */
  --lm-white: #FFFFFF;
  --lm-off: #F7F7F5;
  --lm-silver: #E8E8E6;
  --lm-mid: #9B9EA3;
  --lm-dim: #4A4D54;

  /* === Colors: Dark === */
  --lm-dark: #0A0C10;
  --lm-dark-2: #10141C;
  --lm-dark-3: #181D28;

  /* === Colors: Text === */
  --lm-t1: #0A0C10;
  --lm-t2: #4A4D54;
  --lm-t3: #9B9EA3;
  --lm-ton: #FFFFFF;
  --lm-ton2: #9B9EA3;

  /* === Colors: Borders === */
  --lm-bl: #E0E0DE;
  --lm-bd: #1E2330;

  /* === Typography === */
  --lm-font-display: 'Montserrat', system-ui, sans-serif;
  --lm-font-body: 'Satoshi', system-ui, sans-serif;

  /* === Font Sizes === (rem-based: Bricks sets html{font-size:62.5%},
     so 1rem = 10px. Values match Figma typography tokens exactly.) */
  --lm-text-6xl: clamp(2.5rem, 6vw, 4.5rem);
  --lm-text-5xl: clamp(2rem, 5vw, 3.5rem);
  --lm-text-4xl: 2.8rem;   /* 44.8px */
  --lm-text-3xl: 1.8rem;   /* 28.8px */
  --lm-text-2xl: 2.24rem;  /* 35.84px */
  --lm-text-xl: 1.76rem;   /* 28.16px */
  --lm-text-base: 1.25rem;  /* 20px */
  --lm-text-sm: 0.9rem;    /* 14.4px */
  --lm-text-xs: 0.72rem;   /* 11.52px */

  /* === Spacing === */
  --lm-space-1: 4px;
  --lm-space-2: 8px;
  --lm-space-3: 12px;
  --lm-space-4: 16px;
  --lm-space-5: 20px;
  --lm-space-6: 24px;
  --lm-space-8: 32px;
  --lm-space-10: 40px;
  --lm-space-12: 48px;
  --lm-space-16: 64px;
  --lm-space-20: 80px;
  --lm-space-24: 96px;
  --lm-space-28: 112px;
  --lm-space-32: 128px;

  /* === Border Radius === */
  --lm-radius-none: 0px;

  /* === Easing === */
  --lm-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --lm-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
}