/* ──────────────────────────────────────────────────────────────────
 * MaBaba — Design tokens (CSS variables) + @font-face + utilities
 *
 * Imported at the top of apps/web/src/styles.scss BEFORE Tailwind:
 *   @import './assets/css/tokens.css';
 *   @tailwind base;
 *   @tailwind components;
 *   @tailwind utilities;
 * ──────────────────────────────────────────────────────────────── */

/* ── 1. Primary font — TT Chocolates Trl ────────────────────────────
 * Drop the .woff2 files into ./fonts/ once licensed. Until then the
 * browser falls back to Inter (system) — no layout shift.
 * ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "TT Chocolates Trl";
  src: local("TT Chocolates Trl Regular"),
       url("./fonts/TTChocolatesTrl-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Chocolates Trl";
  src: local("TT Chocolates Trl Medium"),
       url("./fonts/TTChocolatesTrl-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Chocolates Trl";
  src: local("TT Chocolates Trl DemiBold"),
       url("./fonts/TTChocolatesTrl-DemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Chocolates Trl";
  src: local("TT Chocolates Trl Bold"),
       url("./fonts/TTChocolatesTrl-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Design system variables ───────────────────────────────── */
:root {
  /* Primary — Mababa blue */
  --color-primary:        #0A64E5;
  --color-primary-hover:  #0359A2;
  --color-primary-active: #035693;
  --color-primary-50:     #E8F1FD;
  --color-primary-100:    #D3E4FB;

  /* Surfaces */
  --color-bg-cream:       #F7F4EF;
  --color-bg-cream-soft:  #FDFBF8;
  --color-bg-white:       #FFFFFF;

  /* Inks */
  --color-ink:            #1F2933;
  --color-ink-dark:       #090814;
  --color-ink-muted:      #6B7280;
  --color-ink-light:      #959595;
  --color-ink-soft:       #BAB6B3;

  /* Borders */
  --color-border:         #E5E7EB;
  --color-border-strong:  #DFDFDF;

  /* Semantic */
  --color-success:        #009E60;
  --color-success-soft:   #D6F2E4;
  --color-warning:        #FCD116;
  --color-warning-soft:   #FFF4C2;
  --color-danger:         #FC0303;
  --color-danger-soft:    #FFB6B6;

  /* Accents */
  --color-accent-gold:    #D69F5F;
  --color-accent-purple:  #3F3D56;

  /* Typography */
  --font-sans:    "TT Chocolates Trl", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-grotesk: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* Radii */
  --radius-sm:  4px;
  --radius:     6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card:     0 1px 2px rgba(31,41,51,0.04), 0 2px 8px rgba(31,41,51,0.06);
  --shadow-card-hov: 0 4px 12px rgba(31,41,51,0.08), 0 8px 24px rgba(31,41,51,0.08);
  --shadow-pop:      0 8px 24px rgba(31,41,51,0.12);
}

/* ── 3. Helpers ──────────────────────────────────────────────────── */

/* Hero gradient used on the public home page.
 * Linear top-to-bottom from accent gold @ 70% alpha down to soft cream.
 * Reaches the cream around 72% so the next section (Vues récemment, etc.)
 * opens on a clean background. Matches the Figma template spec. */
.mb-hero-gradient {
  background: linear-gradient(
    180deg,
    rgba(214, 159, 95, 0.7) 0%,
    rgba(214, 159, 95, 0.45) 30%,
    rgba(253, 251, 248, 1) 72%,
    #FDFBF8 100%
  ) !important;
}

/* Inline Gabon flag (phone input prefix etc.) */
.mb-flag-ga {
  display: inline-block;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    #009E60 0%, #009E60 33.33%,
    #FCD116 33.33%, #FCD116 66.66%,
    #3A75C4 66.66%, #3A75C4 100%
  );
  flex-shrink: 0;
}

/* Hide native scrollbar inside horizontal card rails */
.mb-noscroll::-webkit-scrollbar { display: none; }
.mb-noscroll { scrollbar-width: none; -ms-overflow-style: none; }

/* Focus-visible reset across interactive elements (a11y) */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}