/* MOFT brand tokens v1.1 (October 2026)
   Source of truth for web and design work. Colors come from the logo files. */
:root {
  /* Grounds (backgrounds) */
  --moft-crema: #FFF4D9;          /* main light ground, Dulce de Leche + Pistacho logos sit here */
  --moft-whipped-cream: #FFF9F3;  /* lightest paper, cards on Crema */
  --moft-marshmallow: #FBF5EA;    /* alt paper, Tiramisu one-color logo sits here */
  --moft-cacao: #3A1700;          /* main dark ground, Salty Caramel logo sits here */
  --moft-tiramisu: #260D00;       /* deep dark ground, Strawberry Meringue logo sits here; default text color */
  --moft-carbon: #190800;         /* one-ink black only (stamps, receipts) */

  /* Chocolate family: brand primary */
  --moft-chocolate-light: #D6A380;
  --moft-chocolate: #702D00;
  --moft-chocolate-deep: #3A1700;

  /* Caramelo family: the pour, brand accent */
  --moft-caramelo-light: #FFDEB6;
  --moft-caramelo: #D66518;
  --moft-caramelo-deep: #A54300;

  /* Salty Caramel family: warm light accent for dark grounds */
  --moft-salty-caramel-light: #FFF4D9;
  --moft-salty-caramel: #FFC580;
  --moft-salty-caramel-deep: #996226;

  /* Strawberry Meringue family: DISCOUNTS AND OFFERS ONLY */
  --moft-strawberry-light: #FFE6E6;
  --moft-strawberry: #FFA6A6;
  --moft-strawberry-deep: #A04848;

  /* Pistacho family: DIETARY OPTIONS ONLY (sin gluten, vegano, sin lactosa) */
  --moft-pistacho-light: #FFFDC0;
  --moft-pistacho: #B2AD00;
  --moft-pistacho-deep: #685A05;

  /* Galleta family: warm sand from the glaze elements */
  --moft-galleta-light: #FAF5E7;
  --moft-galleta: #F3D1A6;
  --moft-galleta-deep: #A57F4E;

  /* Exact values inside the glaze element files. Use these for flat areas that touch an element
     (e.g. a footer under a wave) so the join is seamless. */
  --moft-element-caramelo: #D46518;
  --moft-element-chocolate: #6F2E0E;
  --moft-element-galleta: #F3D1A6;
  --moft-element-cacao-texture: #3F220D;
  --moft-element-crema-texture: #FFF3D9;

  /* Text pairs that pass WCAG AA (4.5:1) */
  --moft-text-on-light: var(--moft-tiramisu);        /* 16.8 on Crema */
  --moft-text-brand-on-light: var(--moft-chocolate); /* 9.3 on Crema */
  --moft-text-on-dark: var(--moft-crema);            /* 14.7 on Cacao */
  --moft-text-accent-on-dark: var(--moft-salty-caramel); /* 10.4 on Cacao */
  --moft-promo-text-on-light: var(--moft-strawberry-deep);  /* 5.5 on Crema */
  --moft-dietary-text-on-light: var(--moft-pistacho-deep);  /* 6.3 on Crema */
  --moft-accent-text-on-light: var(--moft-caramelo-deep);   /* 5.6 on Crema */

  /* Typography */
  --moft-font: "SN Pro", "Nunito", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --moft-font-display: "Fraunces", Georgia, serif;
  --moft-weight-body: 400;
  --moft-weight-medium: 600;
  --moft-weight-bold: 800;
  --moft-weight-black: 900;
  /* Web scale (px / line-height) */
  --moft-size-display: 3.5rem;   /* 56 / 1.0, weight 900, tracking -0.02em */
  --moft-size-h1: 2.5rem;        /* 40 / 1.05, weight 900 */
  --moft-size-h2: 1.75rem;       /* 28 / 1.15, weight 800 */
  --moft-size-h3: 1.25rem;       /* 20 / 1.25, weight 800 */
  --moft-size-body: 1.0625rem;   /* 17 / 1.6, weight 400 */
  --moft-size-small: 0.875rem;   /* 14 / 1.5, weight 600 */
  --moft-size-label: 0.75rem;    /* 12 / 1.2, weight 800, uppercase, tracking 0.1em */

  /* Shape */
  --moft-radius-pill: 999px;     /* buttons, tags */
  --moft-radius-card: 20px;
  --moft-radius-small: 10px;
  /* Glaze shadow: hard offset, no blur, same as the logo (dx 2, dy 4) */
  --moft-shadow-glaze: 2px 4px 0 var(--moft-chocolate-deep);
  --moft-shadow-glaze-promo: 2px 4px 0 var(--moft-strawberry-deep);
  --moft-shadow-glaze-dietary: 2px 4px 0 var(--moft-pistacho-deep);

  /* Glaze elements (fixed files, never redrawn): elements/moft_[kind]_[family].png
     drip_* and corners_* sit on the top edge; wave-gloss_* and wave-flat_* on the bottom edge. */
  --moft-texture-cacao: url("elements/moft_texture_cacao.png");
  --moft-texture-crema: url("elements/moft_texture_crema.png");

  /* Spacing (4px base) */
  --moft-space-1: 4px;  --moft-space-2: 8px;  --moft-space-3: 12px; --moft-space-4: 16px;
  --moft-space-5: 24px; --moft-space-6: 32px; --moft-space-7: 48px; --moft-space-8: 64px; --moft-space-9: 96px;
}

/* Motion: strong curves (the built-in ease-out is too weak for UI). Entering and exiting use --moft-ease-out,
   things that move across the screen use --moft-ease-in-out, sheets and drawers use --moft-ease-drawer. */
:root {
  --moft-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --moft-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --moft-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}