/* ==========================================================================
   Freelane · jetons d'illustration d'interface
   Structure du preset shadcn b87IwsmYvA — style maia, icones Tabler,
   radius 10px, rampe de graphiques a 5 barreaux, mode sombre.
   Lire le preset d'origine : pnpm dlx shadcn@latest preset decode b87IwsmYvA

   READAPTE A LA MARQUE, deux fois :
   1. Typo — le preset prescrivait Geist et EB Garamond. Ce kit
      (pages hors homepage) passe encore par --font-display.
      La homepage v3 lit assets/tokens.css (frame 537:4), pas ce fichier.
   2. Couleur — le preset etait sur un orange #CA3500, on utilise l'or de
      marque et ses barreaux. Les neutres passent sur l'echelle ink, dont
      ils etaient deja a un ecart perceptuel invisible.
   Il ne reste donc du preset que sa structure, plus aucune de ses couleurs.

   PERIMETRE : maquettes d'interface posees a l'interieur des pages
   (facture, tableau de bord, carte produit). La charte de la page
   elle-meme reste dans freelane.css. Prefixe --ui- contre les collisions.
   ========================================================================== */

:root {
  /* --- Surfaces · echelle ink ------------------------------------------- */
  --ui-background: #FFFFFF;
  --ui-card: #FFFFFF;
  --ui-popover: #FFFFFF;
  --ui-muted: #F8F6F3;              /* ink-50  */
  --ui-accent: #F8F6F3;             /* ink-50  */
  --ui-secondary: #F0EFEA;          /* ink-100 · cream */
  --ui-sidebar: #F8F6F3;            /* ink-50  */

  /* --- Texte · echelle ink ---------------------------------------------- */
  --ui-foreground: #1B1B1B;         /* ink-950 · encre de marque */
  --ui-muted-foreground: #8A8680;   /* ink-500 · muted */
  --ui-accent-foreground: #2E2E2E;  /* ink-900 */
  --ui-secondary-foreground: #1B1B1B;

  /* --- Accent · echelle gold --------------------------------------------
     L'or de marque ne porte PAS de texte blanc : #C9A24D contre blanc
     tombe a 2.4, sous le seuil. Le premier plan est donc l'encre (7.2).
     Pour retrouver le comportement du preset, bouton sombre a texte clair,
     basculer --ui-primary sur #876115 (gold-700, blanc 5.6) et
     --ui-primary-foreground sur #FFFEFA. */
  --ui-primary: #C9A24D;            /* gold-500 · l'or de marque */
  --ui-primary-foreground: #1B1B1B; /* ink-950  · contraste 7.2 */
  --ui-primary-hover: #B8912E;      /* gold-600 */
  --ui-primary-subtle: #F3E8D1;     /* gold-200 · fonds d'etiquette */

  /* L'or de marque ne passe PAS non plus en couleur de texte sur blanc :
     #C9A24D contre blanc tombe a 2.4. Pour un montant, une icone ou un lien
     en or sur fond clair, utiliser --ui-primary-text (gold-700, blanc 5.6).
     Regle : l'or 500 est un APLAT, l'or 700 est une ENCRE. */
  --ui-primary-text: #876115;       /* gold-700 · texte et icones sur clair */

  /* --- Alerte · echelle danger ------------------------------------------ */
  --ui-destructive: #BA1C1C;              /* danger-600 · blanc 6.4 */
  --ui-destructive-foreground: #FFFEFA;

  /* --- Traits ------------------------------------------------------------ */
  --ui-border: #E2DED8;             /* ink-200 · stone */
  --ui-input: #E2DED8;              /* ink-200 */
  --ui-ring: #DFB254;               /* gold-400 · focus de marque */

  /* --- Graphiques · 5 barreaux d'or, du clair au sombre ------------------ */
  --ui-chart-1: #EAD7A0;            /* gold-300 */
  --ui-chart-2: #DFB254;            /* gold-400 */
  --ui-chart-3: #B8912E;            /* gold-600 */
  --ui-chart-4: #876115;            /* gold-700 */
  --ui-chart-5: #473610;            /* gold-900 */

  /* --- Rayons, echelle derivee du preset --------------------------------- */
  --ui-radius: 0.625rem;            /* 10px */
  --ui-radius-sm: calc(var(--ui-radius) - 4px);
  --ui-radius-md: calc(var(--ui-radius) - 2px);
  --ui-radius-lg: var(--ui-radius);
  --ui-radius-xl: calc(var(--ui-radius) + 4px);

  /* --- Typo · heritee de freelane.css ------------------------------------ */
  --ui-font-sans: var(--font-sans, 'General Sans', system-ui, sans-serif);
  --ui-font-heading: var(--font-display, 'OT Jubilee', 'Fraunces', Georgia, serif);

  /* Chiffres. ATTENTION : General Sans et Fraunces n'ont ni jeu tabulaire
     ni fonctionnalite tnum, et leurs chiffres sont proportionnels — le « 1 »
     est 39% plus etroit que le « 0 ». Une colonne de montants ne s'aligne
     donc pas en police de marque. --ui-font-numeric sert aux colonnes
     chiffrees uniquement ; le basculer sur var(--ui-font-sans) redonne
     la police de marque au prix de l'alignement. */
  --ui-font-numeric: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* --- Mode sombre ---------------------------------------------------------
   Sur fond encre, l'or remonte d'un barreau pour garder sa presence. */
[data-ui-theme="dark"] {
  --ui-background: #1B1B1B;         /* ink-950 */
  --ui-card: #2E2E2E;               /* ink-900 */
  --ui-popover: #2E2E2E;
  --ui-muted: #453F3A;              /* ink-800 */
  --ui-accent: #453F3A;
  --ui-secondary: #453F3A;
  --ui-sidebar: #2E2E2E;

  --ui-foreground: #F8F6F3;         /* ink-50  */
  --ui-muted-foreground: #A6A199;   /* ink-400 */
  --ui-accent-foreground: #F0EFEA;
  --ui-secondary-foreground: #F8F6F3;

  --ui-primary: #DFB254;            /* gold-400 · plus clair sur fond sombre */
  --ui-primary-foreground: #1B1B1B;
  --ui-primary-hover: #EAD7A0;      /* gold-300 */
  --ui-primary-subtle: #473610;     /* gold-900 */
  --ui-primary-text: #DFB254;       /* gold-400 · sur fond encre, 8.7 */

  --ui-destructive: #D64545;        /* danger-500 */

  --ui-border: rgba(255, 254, 250, .12);
  --ui-input: rgba(255, 254, 250, .16);
  --ui-ring: #DFB254;
}

/* ==========================================================================
   Bouton · v2 (Figma 614:422)
   Gold 614:410 / 614:412 / 614:414. Hero 620:2 / 620:4 / 620:6.
   Ghost sombre 629:2 / 629:4 / 629:6.
   Tout vient de tokens.css : aucune couleur, taille ou durée en dur.
   Gold : fond accent/gold, texte text/primary (jamais de crème sur l'or).
   Hero : fond button/hero-bg, texte text/primary, rayon radius/md.
   Ghost sombre : sans fond, contour 1 px text/on-brand-secondary,
   texte text/on-brand, mêmes paddings, rayon et typo que le bouton.
   Les trois tailles reprennent les paddings du set (sm, md, lg).
   Focus Ghost sombre : ring-focus-dark. Sur fond clair : ring-focus.
   ========================================================================== */
.fl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font-family:var(--font-family-body);
  font-size:var(--type-button-size);font-weight:var(--type-button-weight);
  line-height:var(--type-button-leading);letter-spacing:var(--type-button-tracking);
  border-radius:var(--radius-md);
}
.fl-btn--sm{padding:var(--space-8) var(--space-16)}
.fl-btn--md{padding:var(--space-12) var(--space-24)}
.fl-btn--lg{padding:var(--space-16) var(--space-32)}
.fl-btn.fl-btn--hero{background:var(--color-button-hero-bg);color:var(--color-text-primary)}
.fl-btn.fl-btn--gold{background:var(--color-accent-gold);color:var(--color-text-primary)}
.fl-btn.fl-btn--ghost-dark{
  background:transparent;
  color:var(--color-text-on-brand);
  border:1px solid var(--color-text-on-brand-secondary);
}
.fl-btn:focus-visible{outline-color:var(--color-ring-focus-light);box-shadow:var(--shadow-ring-focus)}
.fl-btn.fl-btn--ghost-dark:focus-visible{outline-color:var(--color-ring-focus-dark);box-shadow:var(--shadow-ring-focus-dark)}
.hd-hero .fl-btn:focus-visible,
.hm-hero .fl-btn:focus-visible{outline-color:var(--color-ring-focus-dark);box-shadow:var(--shadow-ring-focus-dark)}