/*
  Les primitives de marque de sutempo : les seules valeurs brutes du produit.

  Ce fichier ne pose aucune remise a zero et ne style aucun element. Il ne
  declare que des variables, pour pouvoir etre charge aussi bien par les pages
  publiques (qui ont leur propre feuille) que par /assets/tokens.css (qui sert
  le widget, le portail, la page de commerce, la console et le paiement).

  Les valeurs sont celles de la charte (docs/design-system/tokens.json) : le
  soleil (peche) et la mer (bleu), sur un fond creme le jour et bleu nuit la
  nuit. Deux familles de noms :
  - --st-* : les jetons de la charte sous leur nom exact (surface, ink,
    sun-500...), identiques a ceux de apps/merchant-admin/styles/tokens.css et
    de la section 1 de surfaces/site/site.css ;
  - --brand-* : les anciens noms, que lisent encore tokens.css, landing.css et
    marketing.css, desormais branches sur les jetons de la charte.
  Un test unitaire (charte-tokens.test.ts) verifie l'alignement sur
  tokens.json et l'absence des anciennes valeurs.
*/
:root {
  /* --- Jetons de la charte, theme Jour ---------------------------------- */
  --st-surface: #f7f2eb;
  --st-surface-raised: #fbf8f4;
  --st-surface-sunken: #efe8de;
  --st-line: #1c1f2e1f;
  --st-line-strong: #1c1f2e5c;
  --st-ink: #1c1f2e;
  --st-ink-muted: #5a5d6e;
  --st-sun-100: #ffe3c2;
  --st-sun-300: #f5b08e;
  --st-sun-500: #d0714a;
  --st-sun-700: #a14e2c;
  --st-sea-100: #a9d4f5;
  --st-sea-300: #5b8fd6;
  --st-sea-700: #23346e;
  --st-night: #16182c;
  --st-band-1: #8fbde8;
  --st-band-2: #6a93cf;
  --st-band-3: #4768ad;
  --st-band-4: #2b3f86;
  --st-action: #23346e;
  --st-action-hover: #1a2757;
  --st-on-action: #ffffff;
  --st-focus-ring: #2e5aa8;
  --st-success: #2f7a5b;
  --st-warning: #9a6212;
  --st-danger: #a8392a;
  --st-shadow-soft: 0 0 0 1px rgba(28, 31, 46, .08), 0 2px 6px rgba(35, 52, 110, .05);
  --st-shadow-card: 0 1px 2px rgba(28, 31, 46, .06), 0 12px 32px -18px rgba(35, 52, 110, .28);
  --st-shadow-float: 0 2px 4px rgba(28, 31, 46, .06), 0 30px 60px -30px rgba(35, 52, 110, .45);
  /* Fonds doux derives, pour les pastilles et les notes : jamais pour du texte. */
  --st-sun-wash: #fcebdc;
  --st-sea-wash: #e3eef8;
  --st-success-wash: #e1efe7;
  --st-warning-wash: #f6ead3;
  --st-danger-wash: #f6e0dc;

  --st-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --st-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --st-ease: cubic-bezier(.16, 1, .3, 1);
  --st-radius-sm: 10px;
  --st-radius-md: 14px;
  --st-radius-lg: 22px;
  --st-radius-xl: 32px;
  --st-radius-pill: 999px;
  --st-space-1: 4px;
  --st-space-2: 8px;
  --st-space-3: 12px;
  --st-space-4: 16px;
  --st-space-5: 24px;
  --st-space-6: 32px;
  --st-space-7: 48px;
  --st-space-8: 96px;

  /* --- Anciens noms, branches sur la charte ------------------------------ */
  --brand-ink: var(--st-ink);
  --brand-ink-2: var(--st-ink);
  --brand-ink-3: var(--st-ink-muted);
  --brand-paper: var(--st-surface-raised);
  --brand-paper-2: var(--st-surface);
  --brand-paper-3: var(--st-surface-sunken);
  --brand-line: var(--st-line);
  --brand-line-strong: var(--st-line-strong);
  /* Le texte pose sur un aplat de nuit (bloc developpeurs, pied de page). */
  --brand-on-ink: #f7f2eb;
  --brand-on-ink-muted: #a9acbd;

  /* L'accent de la plateforme est l'action de la charte : le bleu profond de la
     derniere bande (11,7:1 en blanc dessus). Une page de commerce le remplace
     par la couleur d'accent du commerce. */
  --brand-accent: var(--st-action);
  --brand-accent-strong: var(--st-action-hover);
  --brand-accent-ink: var(--st-on-action);
  --brand-accent-soft: var(--st-sea-wash);
  --brand-accent-line: var(--st-sea-100);
  /* L'accent pose sur un aplat de nuit : la peche du soleil (10:1). */
  --brand-accent-on-ink: var(--st-sun-300);
  /* L'accent chaud en petite taille : liens dans un texte, surtitres (5,2:1). */
  --brand-warm: var(--st-sun-700);
  --brand-warm-soft: var(--st-sun-wash);

  --brand-success: var(--st-success);
  --brand-success-soft: var(--st-success-wash);
  --brand-danger: var(--st-danger);
  --brand-danger-soft: var(--st-danger-wash);
  --brand-warn: var(--st-warning);
  --brand-warn-soft: var(--st-warning-wash);
  --brand-focus: var(--st-focus-ring);

  /* Rayons genereux, comme le logo : jamais d'angle vif. */
  --brand-radius-xs: var(--st-radius-sm);
  --brand-radius-s: var(--st-radius-md);
  --brand-radius-m: 18px;
  --brand-radius-l: var(--st-radius-lg);
  --brand-radius-xl: var(--st-radius-xl);
  --brand-radius-pill: var(--st-radius-pill);

  /* Ombres teintees de bleu, jamais grises. */
  --brand-shadow-1: var(--st-shadow-soft);
  --brand-shadow-2: var(--st-shadow-card);
  --brand-shadow-3: var(--st-shadow-float);

  /* Fraunces douce pour les grands titres, Manrope pour tout le reste. */
  --brand-font: var(--st-font-sans);
  --brand-font-display: var(--st-font-display);
  --brand-font-accent: var(--st-font-display);
  --brand-font-mono: var(--st-font-mono);
  --brand-tracking-display: -0.02em;
  --brand-tracking-eyebrow: 0.12em;

  --brand-space-1: var(--st-space-1);
  --brand-space-2: var(--st-space-2);
  --brand-space-3: var(--st-space-3);
  --brand-space-4: var(--st-space-4);
  --brand-space-5: var(--st-space-5);
  --brand-space-6: var(--st-space-6);
  --brand-space-7: var(--st-space-7);
  --brand-space-8: 72px;
  --brand-space-9: var(--st-space-8);

  --brand-motion: 220ms var(--st-ease);
}

/*
  Theme Nuit : fonds bleu nuit, texte creme, action bleu ciel. Il suit la
  preference du systeme et cede a data-theme="light" ; data-theme="dark" le
  force. Les bandes et le soleil ne changent pas.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --st-surface: #12141f;
    --st-surface-raised: #1b1e2d;
    --st-surface-sunken: #0d0f18;
    --st-line: #f3eee624;
    --st-line-strong: #f3eee666;
    --st-ink: #f3eee6;
    --st-ink-muted: #a9acbd;
    --st-sun-500: #f0a07a;
    --st-sun-700: #f5b08e;
    --st-sea-300: #8fb8f0;
    --st-action: #a9d4f5;
    --st-action-hover: #c4e2f8;
    --st-on-action: #12141f;
    --st-focus-ring: #8fb8f0;
    --st-success: #6fc2a0;
    --st-warning: #e6b35c;
    --st-danger: #f08a78;
    --st-shadow-soft: 0 0 0 1px rgba(243, 238, 230, .1), 0 2px 6px rgba(0, 0, 0, .4);
    --st-shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px -18px rgba(0, 0, 0, .7);
    --st-shadow-float: 0 2px 4px rgba(0, 0, 0, .5), 0 30px 60px -28px rgba(0, 0, 0, .8);
    --st-sun-wash: #33241f;
    --st-sea-wash: #1c2a44;
    --st-success-wash: #16302a;
    --st-warning-wash: #332a17;
    --st-danger-wash: #3a1f1d;
    --brand-on-ink: #f3eee6;
  }
}
:root[data-theme="dark"] {
  --st-surface: #12141f;
  --st-surface-raised: #1b1e2d;
  --st-surface-sunken: #0d0f18;
  --st-line: #f3eee624;
  --st-line-strong: #f3eee666;
  --st-ink: #f3eee6;
  --st-ink-muted: #a9acbd;
  --st-sun-500: #f0a07a;
  --st-sun-700: #f5b08e;
  --st-sea-300: #8fb8f0;
  --st-action: #a9d4f5;
  --st-action-hover: #c4e2f8;
  --st-on-action: #12141f;
  --st-focus-ring: #8fb8f0;
  --st-success: #6fc2a0;
  --st-warning: #e6b35c;
  --st-danger: #f08a78;
  --st-shadow-soft: 0 0 0 1px rgba(243, 238, 230, .1), 0 2px 6px rgba(0, 0, 0, .4);
  --st-shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px -18px rgba(0, 0, 0, .7);
  --st-shadow-float: 0 2px 4px rgba(0, 0, 0, .5), 0 30px 60px -28px rgba(0, 0, 0, .8);
  --st-sun-wash: #33241f;
  --st-sea-wash: #1c2a44;
  --st-success-wash: #16302a;
  --st-warning-wash: #332a17;
  --st-danger-wash: #3a1f1d;
  --brand-on-ink: #f3eee6;
}