/* ============================================================================
 *  Rubis Sur l'Ongle — feuille de styles racine
 *  Tailwind v4 (CSS-first) + tokens de marque (cf. /docs/marque.md)
 * ========================================================================== */

@import "tailwindcss";

/* Polices self-hostées via fontsource (cf. /docs/tech/frontend.md §10) */
@import "@fontsource-variable/bricolage-grotesque";
@import "@fontsource-variable/inter";

/* ----------------------------------------------------------------------------
 *  Tokens de marque exposés en utilitaires Tailwind v4 via @theme.
 *  Source : /docs/marque.md §3, §4
 * -------------------------------------------------------------------------- */
@theme {
  /* === Couleurs rubis === */
  --color-rubis: #9f1239;
  --color-rubis-deep: #771328;
  --color-rubis-light: #c9415c;
  --color-rubis-glow: #fbe4ea;

  /* === Neutres chauds (jamais de blanc/noir purs) === */
  --color-cream: #faf7f2;
  --color-cream-2: #f5efe7;
  --color-line: #e8e0d6;
  --color-ink: #1a1410;
  --color-ink-2: #4f4640;
  --color-ink-3: #8a7f76;

  /* === Typographies === */
  --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  /* === Border radius — un peu plus tranchés que la default Tailwind ===
     6px sur les éléments interactifs (cohérent avec la landing) */
  --radius-sharp: 4px;
  --radius-default: 6px;
  --radius-soft: 10px;
  --radius-card: 14px;

  /* === Ombres rubis-teintées === */
  --shadow-rubis: 0 2px 8px rgba(159, 18, 57, 0.25);
  --shadow-rubis-hover: 0 6px 16px rgba(159, 18, 57, 0.35);
  --shadow-card:
    0 16px 40px -16px rgba(26, 20, 16, 0.18), 0 4px 8px -2px rgba(26, 20, 16, 0.06);
  --shadow-soft: 0 4px 16px rgba(26, 20, 16, 0.04);
}

/* ----------------------------------------------------------------------------
 *  Globals
 * -------------------------------------------------------------------------- */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  body {
    background: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
  }

  /* Sélection rubis — petite signature partout */
  ::selection {
    background: var(--color-rubis);
    color: white;
  }

  /* Reset hr/fieldset minimal */
  fieldset {
    border: 0;
    padding: 0;
    margin: 0;
  }

  /* Curseur pointer par défaut sur tous les éléments interactifs activables.
     Tailwind v4 ne le pose plus automatiquement sur <button> — on le remet
     ici en global pour ne pas polluer chaque composant. Les éléments
     désactivés gardent un cursor neutre (cf. cascade Tailwind sur disabled). */
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  summary,
  label[for],
  a[href],
  select:not(:disabled),
  [type="checkbox"]:not(:disabled),
  [type="radio"]:not(:disabled),
  [type="submit"]:not(:disabled),
  [type="button"]:not(:disabled),
  [type="reset"]:not(:disabled) {
    cursor: pointer;
  }

  button:disabled,
  [role="button"][aria-disabled="true"] {
    cursor: not-allowed;
  }

  /* Chiffres alignés en colonnes — toujours préférable pour montants/dates */
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  /* Italique rubis : convention typographique sur le mot-clé d'un titre */
  em {
    font-style: italic;
    color: var(--color-rubis);
  }

  /* Anti-overflow sur écrans étroits */
  body,
  #root {
    min-height: 100vh;
  }
}

/* ----------------------------------------------------------------------------
 *  Utilitaires custom — touche maison.
 *  Pas de helpers Tailwind par-dessus, juste de petites primitives marque.
 * -------------------------------------------------------------------------- */
@utility eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-rubis);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

@utility eyebrow-mark {
  /* Le ◆ géométrique, en pseudo-élément carré tourné. Cohérent avec la landing. */
  width: 7px;
  height: 7px;
  background: currentColor;
  display: inline-block;
  transform: rotate(45deg);
}

@utility shadow-rubis {
  box-shadow: var(--shadow-rubis);
}

@utility shadow-rubis-hover {
  box-shadow: var(--shadow-rubis-hover);
}

@utility shadow-card {
  box-shadow: var(--shadow-card);
}

@utility shadow-soft {
  box-shadow: var(--shadow-soft);
}