/*
 * Plié — design tokens for the marketing site.
 *
 * Direct port of the app design system. Every value below mirrors a Kotlin token:
 *   --plie-*        →  core/design-system/.../theme/PliePrimitives.kt
 *   --color-*       →  core/design-system/.../theme/PlieColors.kt (PlieColorScheme)
 *   --space-*       →  core/design-system/.../theme/Dimens.kt (Spacing)
 *   --radius-*      →  core/design-system/.../theme/PlieShapes.kt
 *   --btn-h-*       →  core/design-system/.../theme/PlieComponentSpec.kt
 *
 * Rule (mirrors DESIGN.md §8): site CSS never hard-codes a hex value — it consumes
 * the semantic `--color-*` layer. Primitives are declared here only so the semantic
 * layer can point at them, exactly like the Kotlin scheme does.
 */

/* ── Typeface (DM Sans, SIL OFL — see assets/fonts/DM_SANS_OFL.txt) ───────────── */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm_sans_regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm_sans_medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm_sans_semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm_sans_bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Primitives — neutrals ──────────────────────────────────────────────── */
  --plie-black: #000000;
  --plie-white: #ffffff;
  --plie-gray-50: #f7f7f7;
  --plie-gray-100: #ebebeb;
  --plie-gray-200: #d8d8d8;
  --plie-gray-300: #c4c4c4;
  --plie-gray-400: #ababab;
  --plie-gray-500: #8f8f8f;
  --plie-gray-600: #717171;
  --plie-gray-700: #535353;
  --plie-gray-800: #363636;
  --plie-gray-900: #1a1a1a;

  /* ── Primitives — brand (pinks & berry) ─────────────────────────────────── */
  --plie-wine: #a13d63;
  --plie-wine-dark: #411626;
  --plie-deep-wine: #57000e;
  --plie-wine-light: #fbe0ec;
  --plie-rosee: #e8b9d1;
  --plie-rose-pale: #f4dbe3;
  --plie-rose-very-light: #fee5ed;
  --plie-rose-medium: #d98db2;
  --plie-powder-pink: #ffc6d9;

  /* ── Primitives — texte & neutres ───────────────────────────────────────── */
  --plie-ink: #140f0d;
  --plie-warm-gray-dark: #363231;
  --plie-brown-dark: #3d2b1f;
  --plie-gray-dark: #464646;
  --plie-gray-medium: #5a5957;
  --plie-warm-gray: #716b64;
  --plie-gray-light: #a0a0a0;
  --plie-taupe: #c8c2bb;

  /* ── Primitives — surfaces & fonds ──────────────────────────────────────── */
  --plie-cream: #F5F3EF;
  --plie-creme-light: #f5f3ef;
  --plie-warm-white: #fff7f0;
  --plie-ivory: #faf6ef;
  --plie-limestone: #f1efeb;
  --plie-gray-very-light: #f6f6f6;

  /* ── Primitives — accents chauds ────────────────────────────────────────── */
  --plie-orange: #e86a33;
  --plie-coral: #fa8b75;
  --plie-brick: #b3371b;
  --plie-amber: #ffb720;
  --plie-gold: #feb202;
  --plie-yellow-pale: #ffe288;
  --plie-gold-pale: #fef1c7;

  /* ── Primitives — nature & fraîcheur ────────────────────────────────────── */
  --plie-green-dark: #6b8517;
  --plie-green-vivid: #a9d035;
  --plie-apple: #a8c256;
  --plie-sage: #dbe7af;
  --plie-green-very-light: #e6f5d2;

  /* ── Primitives — fidélité & UI ─────────────────────────────────────────── */
  --plie-blue-dark: #353f9b;
  --plie-blue-royal: #0032a0;
  --plie-lilac-medium: #99a3ff;
  --plie-periwinkle: #8f99f5;
  --plie-lilac-light: #d6daff;
  --plie-blue-very-light: #edf4ff;

  /* ── Semantic tokens (PlieColorScheme) ──────────────────────────────────── */
  --color-background-primary: var(--plie-cream);
  --color-background-secondary: var(--plie-gray-50);
  --color-background-tertiary: var(--plie-gray-100);
  --color-surface-card: var(--plie-white);
  --color-background-inverse: var(--plie-gray-900);

  --color-content-primary: var(--plie-ink);
  --color-content-secondary: var(--plie-gray-700);
  --color-content-secondary-warm: var(--plie-warm-gray-dark);
  --color-content-tertiary: var(--plie-gray-500);
  --color-content-disabled: var(--plie-gray-300);
  --color-content-on-inverse: var(--plie-white);

  --color-border-subtle: var(--plie-gray-100);
  --color-border-default: var(--plie-gray-200);
  --color-border-strong: var(--plie-gray-400);

  --color-interactive-primary: var(--plie-wine);
  --color-interactive-primary-hover: var(--plie-gray-900);
  --color-interactive-primary-content: var(--plie-white);
  --color-interactive-secondary-border: var(--plie-black);
  --color-interactive-focus-ring: var(--plie-black);

  --color-feedback-positive: #00a86b;
  --color-feedback-positive-surface: #d6f5ea;
  --color-feedback-negative: #d93025;
  --color-feedback-negative-surface: #fddedd;
  --color-feedback-warning: #f5a623;
  --color-feedback-warning-surface: #fef0d3;
  --color-feedback-info: #1a73e8;
  --color-feedback-info-surface: #d4e4fc;

  --color-brand: var(--plie-wine);
  --color-on-brand: var(--plie-white);
  --color-brand-container: var(--plie-wine-light);
  --color-on-brand-container: var(--plie-wine);

  --color-discount: var(--plie-sage);
  --color-on-discount: #101010;
  --color-offer-background: var(--plie-wine-light);
  --color-on-offer: var(--plie-deep-wine);

  --color-status-container-primary: var(--plie-rosee);
  --color-status-content-primary: var(--plie-wine);
  --color-status-container-secondary: var(--plie-apple);
  --color-status-content-secondary: #0d0f05;
  --color-status-container-tertiary: var(--plie-wine-dark);
  --color-status-content-tertiary: var(--plie-white);

  --color-surface-glass: rgb(254 222 216 / 47%);

  /* ── Semantic tokens propres au site ────────────────────────────────────
     PlieColorScheme est *light-only* : l'app n'a aucune surface sombre, donc
     aucun token pour en habiller une. Le site en a — le bandeau commerçants,
     les sections « ink », les lavis de hero, les pastilles d'icônes. Ces
     tokens comblent ce manque **dans la couche sémantique**, pour que
     `site.css` n'ait jamais à toucher une primitive (règle DESIGN.md §8).
     Chaque valeur reste dérivée d'une primitive du design system. */

  /* Surface sombre (bandeau pro, sections ink) et ses contenus. */
  --color-surface-ink: var(--plie-wine-dark);
  --color-on-ink: var(--plie-white);
  --color-on-ink-muted: var(--plie-rose-pale);
  --color-on-ink-subtle: var(--plie-rose-medium);
  --color-ink-surface: color-mix(in srgb, var(--plie-white) 6%, transparent);
  --color-ink-border: color-mix(in srgb, var(--plie-rose-medium) 26%, transparent);
  --color-ink-border-strong: color-mix(in srgb, var(--plie-rose-medium) 40%, transparent);
  --color-on-ink-faded: color-mix(in srgb, var(--plie-rose-pale) 58%, transparent);
  --color-on-ink-faint: color-mix(in srgb, var(--plie-rose-medium) 70%, transparent);

  /* Accent doré — CTA sur fond sombre, où le lie-de-vin disparaîtrait. */
  --color-interactive-gold: var(--plie-amber);
  --color-interactive-gold-hover: var(--plie-gold);
  --color-on-gold: var(--plie-ink);

  /* Fonds de section. */
  --color-surface-warm: var(--plie-warm-white);
  --color-surface-footer: var(--plie-limestone);

  /* Lavis diffus des heros — le motif « pli ». */
  --color-wash-rose: color-mix(in srgb, var(--plie-powder-pink) 62%, transparent);
  --color-wash-gold: color-mix(in srgb, var(--plie-yellow-pale) 52%, transparent);
  --color-wash-wine: color-mix(in srgb, var(--plie-wine) 58%, transparent);
  --color-wash-brick: color-mix(in srgb, var(--plie-brick) 40%, transparent);

  /* Pastilles d'icônes des cartes. */
  --color-icon-tile-sage: var(--plie-sage);
  --color-icon-tile-gold: var(--plie-gold-pale);
  --color-icon-tile-lilac: var(--plie-lilac-light);
  --color-icon-tile-blue: var(--plie-blue-very-light);
  --color-icon-tile-rose: var(--plie-rose-very-light);

  /* Contenu sur surface de feedback (le vert de Material manque de contraste
     sur son propre fond clair — on reprend le vert chaud de la palette). */
  --color-on-feedback-positive: var(--plie-green-dark);
  --color-tier-discovery: var(--plie-sage);
  --color-tier-regular: var(--plie-periwinkle);
  --color-tier-vip: var(--plie-amber);
  --color-inactive-indicator: var(--plie-taupe);
  --color-image-background: var(--plie-white);
  --color-bio-label: var(--plie-green-dark);

  /* ── Spacing (Dimens.kt — 4dp grid, 1dp ≙ 1px on the web) ───────────────── */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;
  --space-xxxxl: 48px;
  --space-hero: 56px;

  /* Web-only additions — the app has no page-scale rhythm to borrow from. */
  --space-section: clamp(64px, 9vw, 120px);
  --page-max: 1200px;
  --page-gutter: clamp(20px, 5vw, 48px);

  /* ── Radii (PlieShapes.kt) ──────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-modal: 24px;
  --radius-glass-nav: 28px;
  --radius-pill: 999px;

  /* ── Component specs (PlieComponentSpec.kt) ─────────────────────────────── */
  --btn-h-small: 32px;
  --btn-h-default: 42px;
  --btn-h-large: 56px;
  --btn-padding-x: 16px;
  --field-h: 48px;
  --field-radius: 8px;
  --card-radius: 12px;
  --card-padding: 16px;
  --chip-h: 24px;

  /* ── Elevation — the app keeps cards flat; the web needs a little lift ──── */
  --shadow-card: 0 1px 2px rgb(20 15 13 / 4%), 0 8px 24px -12px rgb(20 15 13 / 10%);
  --shadow-lifted: 0 2px 4px rgb(20 15 13 / 5%), 0 18px 40px -18px rgb(20 15 13 / 18%);
  --shadow-pill: 0 1px 2px rgb(20 15 13 / 6%), 0 4px 12px -6px rgb(20 15 13 / 14%);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;

  /* ── Typography scale (plieTypography() — sp ≙ px) ──────────────────────── */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, sans-serif;

  --type-display-l: clamp(38px, 6vw, 56px);
  --type-display-m: clamp(32px, 5vw, 45px);
  --type-display-s: clamp(28px, 4vw, 36px);
  --type-headline-l: clamp(26px, 3.2vw, 32px);
  --type-headline-m: clamp(23px, 2.6vw, 28px);
  --type-headline-s: 24px;
  --type-title-l: 22px;
  --type-title-m: 16px;
  --type-title-s: 14px;
  --type-body-l: 16px;
  --type-body-m: 14px;
  --type-body-s: 12px;
  --type-label-l: 14px;
  --type-label-m: 12px;
  --type-label-s: 11px;
}