/* =========================================================
   MIRACLE LIQUORS – DESIGN TOKENS v2.0
   Migration-safe foundation layer
   =========================================================

   DOEL
   ---------------------------------------------------------
   Dit bestand is de centrale bron van ontwerpwaarden voor
   Miracle Liquors.

   TOKENLAGEN
   1. Primitive tokens  = feitelijke waarden
   2. Semantic tokens   = betekenis / toepassing
   3. Legacy aliases    = tijdelijke compatibiliteit

   BELANGRIJKE REGEL
   Nieuwe CSS gebruikt bij voorkeur semantic tokens.
   Legacy aliases blijven tijdelijk bestaan zodat huidige
   pagina's en componenten niet breken tijdens de migratie.
   ========================================================= */

:root {

  /* =====================================================
     01. COLOR — PRIMITIVES
     ===================================================== */

  /* Green */
  --ml-green-950: #1f3a32;
  --ml-green-900: #29483e;
  --ml-green-850: #305247;
  --ml-green-800: #375248;
  --ml-green-700: #477063;
  --ml-green-650: #355b4e;
  --ml-green-600: #5c776e;
  --ml-green-200: #dbe6e0;
  --ml-green-100: #edf2ef;
  --ml-green-050: #f5f8f6;

  /* Gold */
  --ml-gold-700: #b99745;
  --ml-gold-600: #d9bb6f;
  --ml-gold-500: #ffc857;
  --ml-gold-300: #ead79e;
  --ml-gold-200: #f2e7c8;
  --ml-gold-100: #f5ecd1;

  /* Supporting accent */
  --ml-aqua-500: #80cda7;

  /* Cream */
  --ml-cream-300: #eee8de;
  --ml-cream-200: #f0eee7;
  --ml-cream-100: #f8f5f0;
  --ml-cream-050: #fcfbf8;

  /* Neutral */
  --ml-neutral-700: #44504a;
  --ml-neutral-600: #646a66;
  --ml-neutral-500: #6d7772;
  --ml-neutral-400: #a5aaa6;
  --ml-neutral-300: #cdd3cf;
  --ml-neutral-250: #e1e2dd;
  --ml-neutral-200: #e2e5e2;
  --ml-neutral-150: #f3f3f0;
  --ml-neutral-100: #f3f3f1;

  /* Absolute */
  --ml-white: #ffffff;
  --ml-black: #1d2421;


  /* =====================================================
     02. COLOR — SEMANTIC
     Nieuwe componenten gebruiken bij voorkeur deze tokens.
     ===================================================== */

  /* Brand */
  --ml-color-primary: var(--ml-green-800);
  --ml-color-primary-hover: var(--ml-green-900);
  --ml-color-primary-active: var(--ml-green-950);

  --ml-color-accent: var(--ml-gold-600);
  --ml-color-accent-strong: var(--ml-gold-500);
  --ml-color-accent-soft: var(--ml-gold-100);

  --ml-color-support: var(--ml-aqua-500);

  /* Text */
  --ml-color-heading: var(--ml-green-900);
  --ml-color-text: #32483f;
  --ml-color-text-strong: #303632;
  --ml-color-text-muted: #607069;
  --ml-color-text-subtle: #555d58;

  --ml-color-text-inverse: var(--ml-white);
  --ml-color-text-inverse-muted: rgba(255, 255, 255, 0.78);
  --ml-color-text-inverse-subtle: rgba(255, 255, 255, 0.66);

  /* Surfaces */
  --ml-color-canvas: var(--ml-white);
  --ml-color-surface: var(--ml-white);
  --ml-color-surface-soft: var(--ml-cream-100);
  --ml-color-surface-muted: var(--ml-neutral-100);
  --ml-color-surface-tinted: var(--ml-green-050);
  --ml-color-surface-brand: var(--ml-green-900);
  --ml-color-surface-brand-strong: var(--ml-green-950);

  /* Borders */
  --ml-color-border-subtle: rgba(41, 72, 62, 0.08);
  --ml-color-border: rgba(41, 72, 62, 0.14);
  --ml-color-border-strong: rgba(41, 72, 62, 0.28);
  --ml-color-border-inverse: rgba(255, 255, 255, 0.18);

  /*
   * Statuskleuren worden bewust nog niet als Core-token
   * vastgelegd. Deze worden bij de form-/message-componenten
   * gekozen en op WCAG-contrast gecontroleerd.
   */


  /* =====================================================
     03. TYPOGRAPHY — PRIMITIVES
     ===================================================== */

  /* Font families */
  --ml-font-display: "Cinzel Decorative", Georgia, serif;
  --ml-font-body: "Fauna One", Georgia, serif;
  --ml-font-ui: "Inter", Arial, sans-serif;

  /* Font weights */
  --ml-font-weight-regular: 400;
  --ml-font-weight-medium: 500;
  --ml-font-weight-semibold: 600;
  --ml-font-weight-bold: 700;

  /* Display scale */
  --ml-text-display-xl: clamp(3rem, 6vw, 5.5rem);
  --ml-text-display-lg: clamp(2.6rem, 5vw, 4.4rem);
  --ml-text-display-md: clamp(2.2rem, 4vw, 3.5rem);

  /* Heading scale */
  --ml-text-h1: clamp(2.25rem, 4vw, 3.5rem);
  --ml-text-h2: clamp(1.9rem, 3vw, 2.75rem);
  --ml-text-h3: clamp(1.45rem, 2vw, 2rem);
  --ml-text-h4: clamp(1.2rem, 1.5vw, 1.5rem);

  /* Body / UI scale */
  --ml-text-lead: clamp(1.08rem, 1vw + 0.8rem, 1.25rem);
  --ml-text-body-lg: 1.0625rem;
  --ml-text-body: 1rem;
  --ml-text-body-sm: 0.875rem;
  --ml-text-ui: 0.875rem;
  --ml-text-caption: 0.8125rem;
  --ml-text-eyebrow: 0.75rem;

  /* Line height */
  --ml-leading-display: 1.06;
  --ml-leading-heading: 1.18;
  --ml-leading-heading-small: 1.3;
  --ml-leading-body: 1.7;
  --ml-leading-body-relaxed: 1.8;
  --ml-leading-ui: 1.35;

  /* Letter spacing */
  --ml-tracking-display: -0.025em;
  --ml-tracking-heading: -0.015em;
  --ml-tracking-body: 0;
  --ml-tracking-ui: 0.04em;
  --ml-tracking-eyebrow: 0.16em;


  /* =====================================================
     04. SPACING — CANONICAL PRIMITIVES
     Namen verwijzen naar de pixelwaarde, zodat de schaal
     later kan groeien zonder bestaande nummers te verschuiven.
     ===================================================== */

  --ml-space-000: 0;
  --ml-space-004: 4px;
  --ml-space-008: 8px;
  --ml-space-012: 12px;
  --ml-space-016: 16px;
  --ml-space-020: 20px;
  --ml-space-024: 24px;
  --ml-space-032: 32px;
  --ml-space-040: 40px;
  --ml-space-048: 48px;
  --ml-space-064: 64px;
  --ml-space-080: 80px;
  --ml-space-096: 96px;
  --ml-space-128: 128px;
  --ml-space-160: 160px;

  /* Semantic inline spacing */
  --ml-space-inline-xs: var(--ml-space-008);
  --ml-space-inline-sm: var(--ml-space-012);
  --ml-space-inline-md: var(--ml-space-016);
  --ml-space-inline-lg: var(--ml-space-024);

  /* Semantic vertical stacks */
  --ml-space-stack-xs: var(--ml-space-008);
  --ml-space-stack-sm: var(--ml-space-012);
  --ml-space-stack-md: var(--ml-space-020);
  --ml-space-stack-lg: var(--ml-space-032);
  --ml-space-stack-xl: var(--ml-space-048);

  /* Semantic grids */
  --ml-space-grid-sm: var(--ml-space-016);
  --ml-space-grid-md: var(--ml-space-024);
  --ml-space-grid-lg: var(--ml-space-048);
  --ml-space-grid-xl: var(--ml-space-080);

  /* Component density */
  --ml-space-component-compact: var(--ml-space-016);
  --ml-space-component-comfortable: var(--ml-space-024);
  --ml-space-component-spacious: var(--ml-space-040);

  /* Section rhythm */
  --ml-space-section-compact: clamp(46px, 5vw, 76px);
  --ml-space-section: clamp(58px, 7vw, 104px);
  --ml-space-section-spacious: clamp(72px, 9vw, 128px);


  /* =====================================================
     05. SIZING & LAYOUT
     ===================================================== */

  /* Containers */
  --ml-container-wide: 1280px;
  --ml-container-default: 1180px;
  --ml-container-narrow: 850px;
  --ml-container-text: 720px;

  /* Gutters */
  --ml-gutter-desktop: 24px;
  --ml-gutter-tablet: 20px;
  --ml-gutter-mobile: 15px;
  --ml-gutter-mobile-sm: 12px;

  /* Controls */
  --ml-control-height-sm: 40px;
  --ml-control-height-md: 48px;
  --ml-control-height-lg: 56px;
  --ml-touch-target-min: 44px;

  /* Icons */
  --ml-icon-sm: 16px;
  --ml-icon-md: 20px;
  --ml-icon-lg: 24px;
  --ml-icon-xl: 32px;
  --ml-icon-2xl: 40px;

  /* Grid */
  --ml-grid-gap-sm: var(--ml-space-016);
  --ml-grid-gap-md: var(--ml-space-024);
  --ml-grid-gap-lg: var(--ml-space-048);
  --ml-grid-gap-xl: var(--ml-space-080);
  --ml-grid-gap-split: clamp(44px, 7vw, 90px);


  /* =====================================================
     06. RADIUS
     ===================================================== */

  --ml-radius-0: 0;
  --ml-radius-1: 4px;
  --ml-radius-2: 8px;
  --ml-radius-3: 14px;
  --ml-radius-4: 24px;
  --ml-radius-full: 999px;

  /* Semantic radius */
  --ml-radius-subtle: var(--ml-radius-1);
  --ml-radius-control: var(--ml-radius-2);
  --ml-radius-card: var(--ml-radius-3);
  --ml-radius-media: var(--ml-radius-3);
  --ml-radius-panel: var(--ml-radius-4);
  --ml-radius-pill: var(--ml-radius-full);


  /* =====================================================
     07. BORDERS
     ===================================================== */

  --ml-border-width-thin: 1px;
  --ml-border-width-medium: 2px;
  --ml-border-style: solid;


  /* =====================================================
     08. SHADOW
     ===================================================== */

  --ml-shadow-xs: 0 3px 12px rgba(25, 50, 41, 0.06);
  --ml-shadow-sm: 0 8px 24px rgba(25, 50, 41, 0.09);
  --ml-shadow-md: 0 18px 48px rgba(25, 50, 41, 0.14);
  --ml-shadow-lg: 0 28px 70px rgba(20, 43, 35, 0.18);

  /* Semantic shadow */
  --ml-shadow-card: var(--ml-shadow-xs);
  --ml-shadow-card-hover: var(--ml-shadow-sm);
  --ml-shadow-floating: var(--ml-shadow-md);
  --ml-shadow-overlay: var(--ml-shadow-lg);


  /* =====================================================
     09. MOTION
     ===================================================== */

  /* Duration */
  --ml-duration-instant: 100ms;
  --ml-duration-fast: 160ms;
  --ml-duration-normal: 240ms;
  --ml-duration-slow: 420ms;

  /* Easing */
  --ml-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ml-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ml-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Semantic transitions */
  --ml-transition-interactive:
    var(--ml-duration-fast) var(--ml-ease-standard);

  --ml-transition-content:
    var(--ml-duration-normal) var(--ml-ease-standard);


  /* =====================================================
     10. LAYERING
     ===================================================== */

  --ml-z-base: 0;
  --ml-z-raised: 10;
  --ml-z-dropdown: 100;
  --ml-z-sticky: 200;
  --ml-z-overlay: 500;
  --ml-z-modal: 600;
  --ml-z-toast: 700;


  /* =====================================================
     11. OPACITY
     ===================================================== */

  --ml-opacity-disabled: 0.48;
  --ml-opacity-muted: 0.72;
  --ml-opacity-overlay: 0.55;


  /* =====================================================
     12. MEDIA
     ===================================================== */

  --ml-ratio-square: 1 / 1;
  --ml-ratio-portrait: 4 / 5;
  --ml-ratio-landscape: 4 / 3;
  --ml-ratio-wide: 16 / 9;
  --ml-ratio-cinematic: 21 / 9;


  /* =====================================================
     13. BREAKPOINTS — DOCUMENTATION ONLY

     CSS custom properties kunnen niet rechtstreeks worden
     gebruikt als media-query condition.

     Small mobile : 380px
     Mobile       : 680px
     Tablet       : 980px
     Wide tablet  : 1100px
     ===================================================== */


  /* =====================================================
     14. LEGACY ALIASES — DEPRECATED

     Tijdelijke compatibiliteitslaag.
     Gebruik onderstaande namen NIET in nieuwe CSS.
     Verwijderen pas nadat alle bestaande bestanden zijn
     gemigreerd naar canonical / semantic tokens.
     ===================================================== */

  /* Legacy colors */
  --ml-color-green-950: var(--ml-green-950);
  --ml-color-green-900: var(--ml-green-900);
  --ml-color-green-850: var(--ml-green-850);
  --ml-color-green-800: var(--ml-green-800);

  /*
   * Historisch was green-750 donkerder dan green-950.
   * De alias blijft bewust exact visueel gelijk om regressies
   * tijdens de migratie te voorkomen.
   */
  --ml-color-green-750: #1f3a32;

  --ml-color-green-700: var(--ml-green-700);
  --ml-color-green-650: var(--ml-green-650);
  --ml-color-green-600: var(--ml-green-600);
  --ml-color-green-200: var(--ml-green-200);
  --ml-color-green-100: var(--ml-green-100);
  --ml-color-green-050: var(--ml-green-050);

  --ml-color-gold: var(--ml-gold-600);
  --ml-color-gold-dark: var(--ml-gold-700);
  --ml-color-gold-bright: var(--ml-gold-500);

  /*
   * In variables.css v1 stond --ml-color-gold-light twee keer.
   * CSS gebruikte daardoor feitelijk de laatste waarde #f3dfab.
   * Deze alias behoudt die actuele live-uitkomst.
   */
  --ml-color-gold-light: #f3dfab;

  --ml-color-gold-pale: var(--ml-gold-100);
  --ml-color-gold-soft: var(--ml-gold-200);

  --ml-color-aqua: var(--ml-aqua-500);

  --ml-color-white: var(--ml-white);
  --ml-color-cream: var(--ml-cream-100);
  --ml-color-cream-light: var(--ml-cream-050);
  --ml-color-cream-medium: var(--ml-cream-200);
  --ml-color-cream-dark: var(--ml-cream-300);

  --ml-color-grey-100: var(--ml-neutral-100);
  --ml-color-grey-150: var(--ml-neutral-150);
  --ml-color-grey-200: var(--ml-neutral-200);
  --ml-color-grey-250: var(--ml-neutral-250);
  --ml-color-grey-300: var(--ml-neutral-300);
  --ml-color-grey-400: var(--ml-neutral-400);
  --ml-color-grey-500: var(--ml-neutral-500);
  --ml-color-grey-600: var(--ml-neutral-600);
  --ml-color-grey-700: var(--ml-neutral-700);

  --ml-color-text-dark: var(--ml-color-text-strong);
  --ml-color-text-light: var(--ml-color-text-muted);
  --ml-color-text-soft: var(--ml-color-text-subtle);
  --ml-color-text-on-dark: rgba(255, 255, 255, 0.88);
  --ml-color-text-muted-on-dark: rgba(255, 255, 255, 0.66);
  --ml-color-border-light: rgba(255, 255, 255, 0.16);

  /* Legacy typography */
  --ml-font-heading: var(--ml-font-display);
  --ml-heading-font: var(--ml-font-display);

  /* Legacy container */
  --ml-container: var(--ml-container-default);

  /* Legacy radius */
  --ml-radius-xs: var(--ml-radius-1);
  --ml-radius-sm: var(--ml-radius-2);
  --ml-radius-md: var(--ml-radius-3);
  --ml-radius-lg: var(--ml-radius-4);

  /*
   * Alleen compatibiliteit voor huidige button-CSS.
   * Nieuwe code gebruikt --ml-radius-control of --ml-radius-pill.
   */
  --ml-radius-round: 50px;

  /* Legacy shadow */
  --ml-shadow-dark: 0 18px 45px rgba(0, 0, 0, 0.20);

  /* Legacy motion */
  --ml-transition-fast: 160ms ease;
  --ml-transition: 220ms ease;
  --ml-transition-slow: 550ms ease;

  /*
   * Legacy spacing.
   * spacing.css v1 definieert deze nu nog opnieuw.
   * In de volgende migratiestap verwijderen we de :root uit
   * spacing.css. Tot dat moment blijven de live waarden gelijk.
   */
  --ml-space-1: 4px;
  --ml-space-2: 8px;
  --ml-space-3: 12px;
  --ml-space-4: 16px;
  --ml-space-5: 20px;
  --ml-space-6: 24px;
  --ml-space-7: 32px;
  --ml-space-8: 40px;
  --ml-space-9: 48px;
  --ml-space-10: 64px;
  --ml-space-11: 80px;
  --ml-space-12: 104px;
}