/* ==========================================================================
   MAGGMALIGHT — design tokens: the one place where colours, type, spacing,
   corners, shadows and control sizes are decided. Every other stylesheet
   uses these names; change a value here and the whole site follows.
   Reference page with every token and component: /design-system/ (not indexed).

   Cascade: everything written before the design system lives in the layer
   « legacy » (styles.css, site.css, light-preview.css, page styles). The
   shared components (components.css) are outside any layer, so they always
   win over the old rules, whatever their specificity, while page layouts
   (grids, spacing between blocks) keep working as before.
   ========================================================================== */
@layer legacy;

:root {
  /* ---- Brand colours ---- */
  --color-amber: #F2AD64;          /* main action, highlights, light */
  --color-amber-hover: #E59A4E;    /* main action hovered (ink text stays 7.3:1) */
  --color-amber-soft: #FBEBD8;     /* soft amber background (badges, notes) */
  --color-amber-tint: rgba(242, 173, 100, .14);
  --color-bronze: #9A5A12;         /* amber-family text on light backgrounds (5.5:1 on white) */
  --color-ink: #1D1D1B;            /* text, dark sections, secondary buttons */
  --color-ink-2: #4A4846;          /* secondary text (9.2:1) */
  --color-muted: #6B6862;          /* captions, hints (5.5:1 on white, 5.2:1 on cream) */

  /* ---- Surfaces and lines ---- */
  --color-paper: #FFFFFF;
  --color-cream: #F8F7F4;          /* alternate sections */
  --color-sand: #F2F0EB;           /* image backgrounds, quiet fills */
  --color-line: #E8E6E0;           /* card borders, separators */
  --color-line-strong: #D4D0C8;    /* hovered borders, chips */
  --color-field-border: #8A857B;   /* form fields: 3.7:1 on white (WCAG 1.4.11) */
  --color-dark: #111111;           /* footer */
  --color-dark-2: #252422;         /* dark cards */
  --color-on-dark: #F8F7F4;
  --color-on-dark-muted: #CFCAC1;

  /* ---- Status ---- */
  --color-success: #1E7A46;
  --color-success-soft: #E8F5EC;
  --color-error: #B42318;
  --color-error-soft: #FDECEA;
  --color-whatsapp: #25D366;       /* WhatsApp's own green, with ink text (8.5:1) */

  /* ---- Type ---- */
  --font-serif: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
  --font-sans: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
  --text-xs: .75rem;      /* 12 px: badges, legal lines */
  --text-sm: .875rem;     /* 14 px: captions, card names, labels */
  --text-md: 1rem;        /* 16 px: body, fields (no zoom on iPhone) */
  --text-lg: 1.125rem;    /* 18 px: lead text */
  --text-xl: 1.375rem;    /* 22 px: small titles */
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);   /* section titles */
  --text-3xl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);      /* page titles */
  --text-4xl: clamp(2.3rem, 1.6rem + 3.2vw, 3.75rem);    /* hero */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-caps: .12em;          /* small capitals labels (eyebrows) */

  /* ---- Spacing: 4 px steps ---- */
  --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;
  --section-y: clamp(56px, 4rem + 3vw, 96px);   /* vertical padding of a page section */
  --gutter: clamp(16px, 4vw, 28px);              /* side padding of the page */
  --container: 1300px;

  /* ---- Corners ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-field: 10px;
  --radius-md: 12px;     /* cards */
  --radius-lg: 16px;     /* large panels, dialogs */
  --radius-pill: 999px;  /* buttons, badges, chips */

  /* ---- Shadows ---- */
  --shadow-1: 0 1px 2px rgba(29, 29, 27, .06), 0 2px 8px rgba(29, 29, 27, .05);
  --shadow-2: 0 4px 12px rgba(29, 29, 27, .07), 0 12px 32px rgba(29, 29, 27, .08);
  --shadow-3: 0 12px 40px rgba(29, 29, 27, .16);
  --ring: 0 0 0 3px rgba(242, 173, 100, .35);   /* focus glow of fields (the keyboard ring is in site.css) */

  /* ---- Controls ---- */
  --control-sm: 40px;
  --control-md: 48px;    /* default height of buttons and fields (touch target) */
  --control-lg: 56px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration: 250ms;

  /* ---- Layers ---- */
  --z-header: 999;
  --z-drawer: 9000;
  --z-dialog: 9500;
  --z-toast: 10001;

  /* ---- Names used by the stylesheets written before the design system ---- */
  --orange: var(--color-amber);
  --orange-light: #F7C48A;
  --orange-dark: var(--color-amber-hover);
  --black: var(--color-ink);
  --bg: var(--color-paper);
  --bg-alt: var(--color-cream);
  --bg-alt2: var(--color-sand);
  --card: var(--color-paper);
  --border: var(--color-line);
  --border-2: var(--color-line-strong);
  --text: var(--color-ink);
  --text-2: var(--color-ink-2);
  --text-3: var(--color-muted);
  --bronze: var(--color-bronze);
  --footer-bg: var(--color-dark);
  --footer-text: #C0C0C0;
  --footer-border: #2A2A2A;
  --r: var(--radius-sm);
  --r-lg: var(--radius-md);
  --shadow-sm: var(--shadow-1);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-orange: 0 4px 20px rgba(242, 173, 100, .3);
  --tr: all var(--duration) var(--ease);
}