/* ==========================================================================
   ThinkMyWeb / myIAtools — Colors & Type
   Source of truth: cchabry/myIAtools (templates/base.html + static/thinkmyweb-ui.css)

   --- Historique ---
   2026-05-01 — Patch V4.1 :
     · Ajout des 4 alias (--tmw-cream, --tmw-ink, --tmw-muted, --font-display)
       pour compatibilité avec les nouveaux écrans V4.1 (Login, Dashboards,
       TranscriptionDone) qui les référencent.
     · Suppression du @import Google Fonts Playfair Display.

   2026-05-02 — Révision V4.2 :
     · Réintroduction Playfair Display via @import Google Fonts.
       Justification : V4.2 a introduit une variante éditoriale du V4HelpOverlay
       (panneau Aide latéral en mode "magazine") avec classes .tmw-help-quote,
       .tmw-help-section, .tmw-help-section-num, .tmw-italic, .tmw-lead.
       Ces classes utilisent var(--font-serif) qui pointe sur Playfair.
       Décision PM : rendu magazine = vraie valeur sur les onglets Aide.
       Cf. 05_DECISIONS_LOG.md § 2026-05-02.
     · --font-serif réactivé sur Playfair Display, Georgia conservé en fallback.
     · --font-display reste sur var(--font-sans) (Goldplay) — ne pas confondre :
       --font-display = titres (Goldplay), --font-serif = accents éditoriaux (Playfair).
   ========================================================================== */

/* Playfair Display — utilisé uniquement dans la variante éditoriale du V4HelpOverlay. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap");



/* --------------------------------------------------------------------------
   1. Fonts
   - Goldplay (primary sans, all UI) — proprietary OTFs in fonts/
   - SF Mono / Monaco / Inconsolata (monospace, var-tags, code)
   - Pas d'import externe : tout est local pour autonomie + perf.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Goldplay";
  src: url("../Goldplay-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("../Goldplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("../Goldplay-RegularIt.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("../Goldplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("../Goldplay-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("../Goldplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("../Goldplay-BoldIt.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("../Goldplay-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ---- Brand palette (raw) ---- */
  --tmw-orange:       #FF6F57;   /* Primary action / brand accent / titles */
  --tmw-orange-hover: #e55a43;   /* Primary hover */
  --tmw-teal:         #2F8C95;   /* Secondary action / focus / links */
  --tmw-teal-hover:   #237a82;
  --tmw-teal-light:   #7CC3B8;   /* Sidebar surface */
  --tmw-yellow:       #F3BE6C;   /* "Shared" pill, occasional accent */
  --tmw-fond:         #f5eee9;   /* App background — warm off-white */
  --tmw-fond-clair:   #F9E4D7;   /* Pale apricot tint */
  --tmw-dark:         #2D3436;   /* Primary text */
  --tmw-grey:         #636E72;   /* Secondary text, hints */
  --tmw-light-grey:   #B2BEC3;   /* Disabled / placeholder */
  --tmw-border:       #e0d6cf;   /* Card/input borders */
  --tmw-white:        #FFFFFF;

  /* ---- Alias correctif Phase 1b (audit 2026-05-02 § 7.1) ----
     `--tmw-bg` était référencé dans base.html (file browser, lignes 1695/1713)
     sans déclaration → fond transparent silencieux. Alias sur `--tmw-fond`,
     cohérent avec la convention V4.1 (--tmw-cream / --tmw-ink / --tmw-muted). */
  --tmw-bg: var(--tmw-fond);

  /* ---- Phase 1d round 2 — promotion :root des tokens initialement scopés
     `.tmw-frame` (cf. tmw-components.css L24-26). En runtime web app
     multi-page, `.tmw-frame` n'est pas utilisé (canvas Artboard 1280×900
     statique non porté), donc ces tokens étaient undefined silencieusement :
     - `.tmw-segmented { background: var(--tmw-bg-app) }` → bg invisible
     - `.tmw-input { border: 1.5px solid var(--tmw-border-input) }` → border
       invalide (shorthand entier annulé), modales prompts/file-browser sans
       cadre visible.
     Promotion :root sécurise leur disponibilité globale. Valeurs identiques
     aux déclarations `.tmw-frame` (idempotent). */
  --tmw-bg-app:       #faf6f2;   /* fond track segmented + alias cream pâle */
  --tmw-bg-input:     #fff;      /* fond inputs blancs */
  --tmw-border-input: #d8ccc0;   /* bordure inputs (V4 standard) */

  /* ---- Aliases V4.1 (rétro-compatibilité naming Claude Design V4.1) ----
     Ces alias mappent les noms utilisés dans les nouveaux Artboards V4.1
     (Login, Dashboards, TranscriptionDone) sur les tokens canoniques.
     Ne pas créer de nouvelle valeur ici — uniquement aliasser. */
  --tmw-cream: var(--tmw-fond);    /* fond app / panneaux brand */
  --tmw-ink:   var(--tmw-dark);    /* texte principal */
  --tmw-muted: var(--tmw-grey);    /* texte secondaire / labels meta */

  /* ---- Status colors ---- */
  --tmw-success-bg:     #d1fae5;
  --tmw-success-fg:     #065f46;
  --tmw-success-border: #9ae6b4;
  --tmw-error-bg:       #fee2e2;
  --tmw-error-fg:       #991b1b;
  --tmw-error-border:   #feb2b2;
  --tmw-info-bg:        #dbeafe;
  --tmw-info-fg:        #1e40af;
  --tmw-info-border:    #90cdf4;
  --tmw-warning-bg:     #fef3c7;
  --tmw-warning-fg:     #92400e;

  /* ---- Semantic foreground/background ---- */
  --fg-1:        var(--tmw-dark);     /* primary text */
  --fg-2:        var(--tmw-grey);     /* secondary text */
  --fg-3:        var(--tmw-light-grey); /* tertiary, placeholders */
  --fg-accent:   var(--tmw-orange);   /* page headlines */
  --fg-link:     var(--tmw-teal);
  --bg-app:      var(--tmw-fond);
  --bg-surface:  var(--tmw-white);    /* cards, inputs */
  --bg-sidebar:  var(--tmw-teal-light);
  --bg-header:   var(--tmw-orange);
  --border-1:    var(--tmw-border);

  /* ---- Type families ---- */
  --font-sans:    "Goldplay", Arial, Verdana, sans-serif;
  --font-serif:   "Playfair Display", Georgia, serif;  /* Réactivé V4.2 — variante éditoriale V4HelpOverlay uniquement */
  --font-display: var(--font-sans); /* Alias V4.1 — display = sans (Goldplay) — NE PAS confondre avec --font-serif */
  --font-mono:    "SF Mono", Monaco, Inconsolata, monospace;

  /* ---- Type scale (rem; 1rem = 16px) ---- */
  --text-xs:    0.75rem;   /* 12px — micro labels, hints */
  --text-sm:    0.85rem;   /* 13.6px — meta, badges */
  --text-base:  0.95rem;   /* 15.2px — body, inputs, buttons */
  --text-md:    1rem;      /* 16px — form labels emphasized */
  --text-lg:    1.1rem;    /* 17.6px — card sub-h2 */
  --text-xl:    1.3rem;    /* 20.8px — sidebar kicker */
  --text-2xl:   1.75rem;   /* 28px — page H1 */
  --text-3xl:   1.95rem;   /* 31.2px — section H3 */

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ---- Tracking ---- */
  --tracking-tight: 0.02em;
  --tracking-mid:   0.08em;
  --tracking-wide:  0.15em;

  /* ---- Line-heights ---- */
  --leading-tight:  1.3;
  --leading-snug:   1.4;
  --leading-normal: 1.5;
  --leading-loose:  1.6;

  /* ---- Spacing (matches ad-hoc rems used across the codebase) ---- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;   /* buttons, inputs */
  --radius-lg:   12px;  /* cards */
  --radius-xl:   16px;  /* sidebar, login card */
  --radius-pill: 9999px;

  /* ---- Shadows ---- */
  --shadow-card:     0 1px 3px  rgba(0, 0, 0, 0.05);
  --shadow-floating: 0 4px 20px rgba(0, 0, 0, 0.10);  /* sidebar */
  --shadow-modal:    0 10px 40px rgba(0, 0, 0, 0.20);
  --shadow-login:    0 20px 60px rgba(0, 0, 0, 0.20); /* non utilisé V4.1 (login en split layout), conservé pour modales */
  --focus-ring:      0 0 0 3px  rgba(47, 140, 149, 0.10);

  /* ---- Layout ---- */
  --header-height:  80px;
}

/* --------------------------------------------------------------------------
   3. Semantic type styles
   -------------------------------------------------------------------------- */

/* Page header H1 — Goldplay 700, ORANGE, UPPERCASE.
   Distinctive: the page subtitle ("p" inside .main-header) is ALSO orange + uppercase + wide-tracked.
   Source: templates/base.html .main-header */
.h1, h1.tmw-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-accent);
  text-transform: uppercase;
  margin: 0;
}

.subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-accent);
  text-transform: uppercase;
  margin: 0.25rem 0 0;
}

/* Section H3 — TEAL, Goldplay 700, sentence case. Used inside cards. */
.h3, h3.tmw-section-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--tmw-teal);
}

/* Card sub-heading H2 (in-card titles like "Clés API", "Groupes") — Goldplay 700, dark, ~18px */
.h2, h2.tmw-card-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin-bottom: var(--space-4);
}

/* "Kicker" — Goldplay UPPERCASE.
   Note V4.2 : malgré la réactivation de Playfair pour la variante éditoriale Aide,
   le kicker reste en sans-serif. Playfair est réservé aux fragments éditoriaux
   du V4HelpOverlay (.tmw-help-quote, .tmw-help-section-num, .tmw-italic, .tmw-lead).
   Le caractère distinctif du kicker vient du tracking + uppercase + weight. */
.kicker, .tmw-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

/* Form label — bold, dark, slightly compact */
.label, label.tmw-label {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: var(--leading-loose);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}

/* Hint — small, light, grey, sits under inputs */
.hint, .tmw-hint {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-light);
  color: var(--fg-2);
}

/* Body / paragraph */
.p, p.tmw-p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--fg-1);
}

/* Mono — used for var-tags, code blocks, password placeholders */
.mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Status badge — UPPERCASE pill */
.tmw-badge {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}