/* ==========================================================================
   Edumoción design system — design tokens
   Mirrored from the Claude Design project:
   _ds/edumoci-n-design-system-7505b23d-540f-447c-bb31-956fac2c7691/tokens/
   Keep this file in sync with the design system rather than editing values here.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------
   Edumoción uses Montserrat across the whole system (per brand direction).
   No font binaries were supplied, so the family is loaded from Google Fonts.
   If licensed webfont files exist, drop them in assets/fonts/ and replace this
   @import with local @font-face rules. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");

:root {
  /* --- base: cream (the page itself) --- */
  --cream-050: #FDFAEE; --cream-100: #FAF3D9; --cream-200: #F5EBC9; --cream-300: #EDE0B4;
  /* --- base: warm ink --- */
  --ink-900: #16100D; --ink-800: #241C17; --ink-700: #3A312B; --ink-500: #6B5F56; --ink-300: #A79A8D; --ink-100: #DCD3C7;
  /* --- base: amber (primary action) --- */
  --amber-300: #F0E28F; --amber-400: #ECDC74; --amber-500: #E6D45D; --amber-600: #D9C441; --amber-700: #B9A62F;
  /* --- base: crimson (emphasis / active nav) --- */
  --crimson-100: #F7DCE3; --crimson-500: #C4204A; --crimson-600: #AE1337; --crimson-700: #8B0E2B;
  /* --- base: Flori green (the WhatsApp surface Flori lives on) --- */
  --green-100: #DCEDE9; --green-500: #0E8574; --green-600: #0A6D5F; --green-700: #075E54; --green-800: #054C44;
  /* --- base: neutrals / chat --- */
  --white: #FFFFFF; --chat-canvas: #E7E0D6; --chat-bubble: #FFFFFF; --chat-daypill: #D9EDF4;
  --chat-bubble-mine: #DCF8C6; --chat-composer: #F0F0F0;

  /* --- semantic: surfaces --- */
  --bg-page: var(--cream-100);
  --bg-page-alt: var(--cream-050);
  --surface-card: var(--white);
  --surface-card-warm: var(--cream-100);
  --surface-card-amber: var(--amber-500);
  --surface-inverse: var(--ink-900);
  --surface-flori: var(--green-700);
  --surface-chat: var(--chat-canvas);

  /* --- semantic: text --- */
  --text-body: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, .78);
  --text-eyebrow: var(--amber-300);
  --text-accent: var(--crimson-600);
  --text-link: var(--crimson-600);
  --text-link-hover: var(--crimson-700);

  /* --- semantic: actions --- */
  --action-primary-bg: var(--amber-500);
  --action-primary-bg-hover: var(--amber-600);
  --action-primary-fg: var(--ink-900);
  --action-secondary-bg: transparent;
  --action-secondary-border: var(--ink-900);
  --action-secondary-fg: var(--ink-900);
  --action-onphoto-bg: var(--white);
  --action-onphoto-fg: var(--ink-900);
  --action-flori-bg: var(--green-700);
  --action-flori-fg: var(--white);

  /* --- semantic: lines --- */
  --border-hairline: rgba(22, 16, 13, .12);
  --border-strong: var(--ink-900);
  --border-on-dark: rgba(255, 255, 255, .28);

  /* --- semantic: photo protection --- */
  --scrim-photo: linear-gradient(90deg, rgba(16, 12, 9, .86) 0%, rgba(16, 12, 9, .62) 42%, rgba(16, 12, 9, 0) 78%);
  --scrim-photo-bottom: linear-gradient(180deg, rgba(16, 12, 9, 0) 40%, rgba(16, 12, 9, .55) 100%);

  /* --- typography --- */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  /* weights: Montserrat only, hierarchy comes from weight + size */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  /* sizes */
  --fs-display-xl: 64px; --fs-display: 48px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-eyebrow: 14px;
  /* line heights */
  --lh-display: 1.06; --lh-heading: 1.18; --lh-body: 1.6; --lh-tight: 1.35;
  /* tracking */
  --ls-display: -0.02em; --ls-heading: -0.01em; --ls-body: 0; --ls-eyebrow: 0.06em;
  /* composed roles */
  --type-display-xl: var(--fw-extrabold) var(--fs-display-xl)/var(--lh-display) var(--font-display);
  --type-display: var(--fw-extrabold) var(--fs-display)/var(--lh-display) var(--font-display);
  --type-h1: var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);
  --type-h2: var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display);
  --type-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-tight) var(--font-sans);
  --type-body-lg: var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-sans);
  --type-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --type-small: var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-sans);
  --type-nav: var(--fw-semibold) var(--fs-body)/1.2 var(--font-sans);
  --type-button: var(--fw-bold) var(--fs-body)/1 var(--font-sans);
  --type-eyebrow: var(--fw-semibold) var(--fs-eyebrow)/1.2 var(--font-sans);

  /* --- spacing --- */
  --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; --space-32: 128px;
  /* layout */
  --page-max: 1280px;
  --page-gutter: 40px;
  --page-gutter-mobile: 20px;
  --section-y: 96px;
  --section-y-tight: 64px;
  --grid-gap: 24px;
  --stack-gap: 16px;
  --nav-height: 96px;

  /* --- radius --- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 24px;   /* content cards */
  --radius-lg: 32px;   /* hero / full-bleed photo blocks */
  --radius-xl: 40px;
  --radius-pill: 999px; /* every button and chip */
  --radius-circle: 50%;

  /* --- elevation: warm, low-contrast shadows — never neutral grey --- */
  --shadow-xs: 0 1px 2px rgba(22, 16, 13, .06);
  --shadow-sm: 0 2px 8px rgba(22, 16, 13, .06);
  --shadow-md: 0 8px 24px rgba(22, 16, 13, .08);
  --shadow-lg: 0 24px 60px rgba(22, 16, 13, .12);
  --shadow-bubble: 0 1px 1px rgba(11, 20, 26, .13);
  --shadow-lift-hover: 0 12px 28px rgba(22, 16, 13, .12);
  --ring-focus: 0 0 0 3px rgba(174, 19, 55, .28);

  /* --- motion --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --motion-hover: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  --press-scale: .98;
  --lift-hover: -2px;
}