/* ============================================
   merglamunte.ro — Design Tokens
   cdn.merglamunte.ro/tokens.css
   ============================================ */

:root {

  /* --- Brand Colors --- */
  --clr-emerald-300: #6ee7b7;
  --clr-emerald-600: #059669;
  --clr-emerald-700: #047857;
  --clr-emerald-800: #065f46;

  --clr-sky-200:  #bae6fd;
  --clr-sky-600:  #0284c7;

  --clr-slate-400: #94a3b8;
  --clr-slate-900: #0f172a;

  --clr-orange-100: #ffedd5;
  --clr-orange-500: #f97316;

  --clr-zinc-100: #f4f4f5;
  --clr-zinc-200: #e4e4e7;
  --clr-zinc-400: #a1a1aa;
  --clr-zinc-500: #71717a;
  --clr-zinc-600: #52525b;
  --clr-zinc-900: #18181b;

  --clr-white: #ffffff;
  --clr-ink:   #0f172a;

  /* --- Semantic Tokens --- */
  --color-brand:        var(--clr-emerald-600);
  --color-brand-dark:   var(--clr-emerald-700);
  --color-brand-light:  var(--clr-emerald-300);

  --color-bg:           var(--clr-white);
  --color-surface:      var(--clr-zinc-100);
  --color-border:       var(--clr-zinc-200);
  --color-text:         var(--clr-ink);
  --color-text-muted:   var(--clr-zinc-500);

  /* --- Typography --- */
  --font-base: 'Outfit', sans-serif;

  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.875rem;    /* 14px */
  --text-md:   1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */

  --weight-normal:    400;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --tracking-tight:   -0.02em;
  --tracking-wide:    0.15em;
  --tracking-widest:  0.2em;

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* --- Radius --- */
  --radius-sm:   0.75rem;   /* 12px */
  --radius-md:   1rem;      /* 16px */
  --radius-lg:   1.5rem;    /* 24px */
  --radius-xl:   2rem;      /* 32px */
  --radius-2xl:  2.5rem;    /* 40px — bento card */
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 25px 50px -12px rgba(0,0,0,0.10);
  --shadow-brand: 0 8px 24px rgba(5, 150, 105, 0.25);

  /* --- Layout --- */
  --max-width: 72rem;       /* 1152px — max-w-6xl */
  --page-padding: 1.5rem;   /* p-6 mobile */
  --page-padding-md: 3rem;  /* p-12 desktop */

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-smooth: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  /* --- Z-index --- */
  --z-header:  100;
  --z-overlay: 200;
  --z-drawer:  300;
}