/* ==========================================================================
   Molde · Design tokens
   Generated 1:1 from the Figma variables (file ciVQ4Dgvdd1IO8x5A3aOXA).
   Layers: Primitives → Brand → System → Scale → Breakpoint.
   Components only use System, Scale and Breakpoint tokens, never Primitives.

   Usage: wrap the store in .molde:
     <div class="molde">…</div>
   Default = the MadeOf brand mode. A client brand overrides the --brand-*
   variables inline (data-brand="custom").
   ========================================================================== */

/* ---------- Primitives ---------- */
.molde {
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f1f2f4;
  --neutral-200: #e0e2e6;
  --neutral-300: #d2d5da;
  --neutral-500: #7e8695;
  --neutral-600: #636a79;
  --neutral-800: #32363e;
  --neutral-900: #1a1d21;
  --red-600: #d92d20;
  --red-100: #fdecea;
  --green-600: #16803c;
  --green-100: #e3f7e9;
  --amber-600: #b45309;
  --amber-100: #fef3c7;
  --blue-600: #1d5bd6;
  --blue-100: #e5edfc;
  --magenta-600: #d0215f;
  --magenta-100: #fde7ef;
}

/* ---------- Brand · Default (MadeOf mode in Figma) ---------- */
.molde {
  --brand-primary: #424f12;
  --brand-on-primary: #fafafa;
  --brand-accent: #f4ffa8;
  --brand-on-accent: #32363e;
  /* accent strong enough to read on white (>= 3:1); when the accent is too light it falls back to the primary */
  --brand-accent-strong: #424f12;
  --brand-font-body: "Inter";
  --brand-font-heading: "Inter";
  --brand-font-heading-weight: 600;
  --brand-font-label-weight: 500;
  --brand-radius-button: 9999px;
  --brand-radius-card: 12px;
  --brand-radius-field: 12px;
}
/* ---------- System ---------- */
.molde {
  --bg-page: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-subtle: var(--neutral-100);
  --bg-brand: var(--brand-primary);
  --bg-accent: var(--brand-accent);
  --bg-inverse: var(--neutral-900);

  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-disabled: var(--neutral-500);
  --text-brand: var(--brand-primary);
  --text-on-brand: var(--brand-on-primary);
  --text-on-accent: var(--brand-on-accent);
  --text-inverse: var(--neutral-0);

  --icon-default: var(--neutral-800);
  --icon-secondary: var(--neutral-600);
  --icon-brand: var(--brand-primary);
  --icon-on-brand: var(--brand-on-primary);
  --icon-accent: var(--brand-accent-strong);   /* section-title icons */

  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--brand-primary);

  --action-primary: var(--brand-primary);
  --action-on-primary: var(--brand-on-primary);
  --action-disabled: var(--neutral-200);
  --action-on-disabled: var(--neutral-500);

  --feedback-success: var(--green-600);
  --feedback-success-subtle: var(--green-100);
  --feedback-error: var(--red-600);
  --feedback-error-subtle: var(--red-100);
  --feedback-warning: var(--amber-600);
  --feedback-warning-subtle: var(--amber-100);
  --feedback-info: var(--blue-600);
  --feedback-info-subtle: var(--blue-100);

  --commerce-price: var(--neutral-800);
  --commerce-price-old: var(--neutral-500);
  --commerce-discount: var(--magenta-600);
  --commerce-discount-subtle: var(--magenta-100);
  --commerce-installments: var(--green-600);
  --commerce-free-shipping: var(--green-600);

  --radius-button: var(--brand-radius-button);
  --radius-card: var(--brand-radius-card);
  --radius-field: var(--brand-radius-field);

  --font-body: var(--brand-font-body), system-ui, sans-serif;
  --font-heading: var(--brand-font-heading), system-ui, sans-serif;
  --font-heading-weight: var(--brand-font-heading-weight);
  --font-label-weight: var(--brand-font-label-weight);

  --shadow-soft: #0f121714;
  --shadow-default: #0f12171f;
  --shadow-strong: #0f12172e;

  /* Effect styles */
  --elevation-1: 0 1px 3px var(--shadow-default);
  --elevation-2: 0 2px 8px var(--shadow-default);
  --elevation-3: 0 4px 12px var(--shadow-default);
  --elevation-4: 0 8px 24px var(--shadow-default);
  --elevation-5: 0 12px 40px var(--shadow-strong);
  --elevation-up-2: 0 -2px 8px var(--shadow-soft);
  --elevation-up-4: 0 -4px 16px var(--shadow-soft);
  --elevation-up-5: 0 -8px 32px var(--shadow-strong);
  --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--border-brand);
}

/* ---------- Scale ---------- */
.molde {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;
  --border-width-sm: 1px;
  --border-width-md: 2px;
}

/* ---------- Motion (code-first, to be added to Figma as a "Motion" collection) ----------
   One mode per store style, like the components: the data-style of the nearest component
   sets the feel for everything inside it.
     Esencial    · calm and neutral (default)
     Editorial   · slower, soft deceleration, minimal movement
     Marketplace · fast and snappy, more physical feedback
   motion/fast  → hover color on buttons, links, icons, chips
   motion/base  → card hover, switches, checks, accordions, chevrons
   motion/slow  → popovers, menus, modals, drawers, toasts entering
   motion/press → scale while a control is pressed
   motion/lift  → card hover elevation (translateY)                                      */
.molde, .molde [data-style="a"] {
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --motion-press: .97;
  --motion-lift: -2px;
}
.molde [data-style="b"] {
  --motion-fast: 180ms;
  --motion-base: 300ms;
  --motion-slow: 460ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion-press: .985;
  --motion-lift: 0px;
}
.molde [data-style="c"] {
  --motion-fast: 90ms;
  --motion-base: 150ms;
  --motion-slow: 240ms;
  --ease-out: cubic-bezier(.3, .9, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --motion-press: .96;
  --motion-lift: -4px;
}
/* Reduced motion: keep the fades, drop movement and scale */
@media (prefers-reduced-motion: reduce) {
  .molde, .molde [data-style] { --motion-press: 1; --motion-lift: 0px; --motion-slow: 160ms; }
}
@keyframes mo-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes mo-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @keyframes mo-pop { from { opacity: 0; } } }

/* ---------- Breakpoint · Desktop (default) ---------- */
.molde {
  --type-display: 56px;
  --type-heading-xl: 32px;
  --type-heading-lg: 24px;
  --type-heading-md: 20px;
  --type-heading-sm: 16px;
  --type-price-lg: 24px;
  --type-price-md: 16px;
  --type-body-lg: 16px;
  --type-body-md: 14px;
  --type-body-sm: 12px;
  --type-label-lg: 16px;
  --type-label-md: 14px;
  --type-label-sm: 12px;
  --layout-section-gap: 64px;
  --layout-page-margin: 80px;
  --layout-gutter: 24px;
}
/* ---------- Breakpoint · Mobile ---------- */
@media (max-width: 767px) {
  .molde {
    --type-display: 36px;
    --type-heading-xl: 24px;
    --type-heading-lg: 20px;
    --type-heading-md: 18px;
    --type-price-lg: 20px;
    --layout-section-gap: 40px;
    --layout-page-margin: 16px;
    --layout-gutter: 16px;
  }
}
/* Force a mode regardless of viewport (used by previews): data-device="mobile" */
.molde[data-device="mobile"] {
  --type-display: 36px;
  --type-heading-xl: 24px;
  --type-heading-lg: 20px;
  --type-heading-md: 18px;
  --type-price-lg: 20px;
  --layout-section-gap: 40px;
  --layout-page-margin: 16px;
  --layout-gutter: 16px;
}
/* ---------- Breakpoint · Large (accessibility text size) ---------- */
.molde[data-size="large"] {
  --type-display: 64px;
  --type-heading-xl: 36px;
  --type-heading-lg: 28px;
  --type-heading-md: 22px;
  --type-heading-sm: 18px;
  --type-price-lg: 28px;
  --type-price-md: 18px;
  --type-body-lg: 18px;
  --type-body-md: 16px;
  --type-body-sm: 14px;
  --type-label-lg: 18px;
  --type-label-md: 16px;
  --type-label-sm: 14px;
}
.molde[data-size="large"][data-device="mobile"] {
  --type-display: 40px;
  --type-heading-xl: 28px;
  --type-heading-lg: 22px;
  --type-heading-md: 20px;
}

/* ---------- Text styles ---------- */
.molde .t-display    { font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; }
.molde .t-heading-xl { font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; }
.molde .t-heading-lg { font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; }
.molde .t-heading-md { font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); letter-spacing: -0.01em; }
.molde .t-heading-sm { font: var(--font-heading-weight) var(--type-heading-sm)/1.3 var(--font-heading); letter-spacing: -0.01em; }
.molde .t-body-lg    { font: 400 var(--type-body-lg)/1.5 var(--font-body); }
.molde .t-body-md    { font: 400 var(--type-body-md)/1.45 var(--font-body); }
.molde .t-body-sm    { font: 400 var(--type-body-sm)/1.4 var(--font-body); }
.molde .t-label-lg   { font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); }
.molde .t-label-md   { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .t-label-sm   { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); }
.molde .t-price-lg   { font: var(--font-heading-weight) var(--type-price-lg)/1.2 var(--font-heading); }
.molde .t-price-md   { font: var(--font-label-weight) var(--type-price-md)/1.25 var(--font-body); }

.molde { font-family: var(--font-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
.molde *, .molde *::before, .molde *::after { box-sizing: border-box; }