/**
 * NARA — Piste A « Studio »
 * Source unique des tokens. Chargé en dernier par les layouts : `html:root`
 * l'emporte sur les `:root` déclarés dans les pages et les feuilles legacy.
 *
 * Règles :
 *  - pas de fond crème : blanc pour les cartes, gris froid pour la zone de travail ;
 *  - orange NARA réservé au logo et au bouton principal (jamais état actif, bordure, titre) ;
 *  - vert / ambre / rouge réservés aux verdicts du NaraScore ;
 *  - les trois couleurs d'offre structurent navigation et en-têtes.
 */

html:root {
    /* ── Tokens Piste A (brief BR §3) ── */
    --nara-bg: #F5F6F8;        --nara-card: #FFFFFF;       --nara-sidebar: #FFFFFF;
    --nara-ink: #121417;       --nara-muted: #5D6370;      --nara-line: #E3E6EB;
    --nara-track: #EEF0F3;
    --nara-orange: #E07830;    /* logo + bouton principal uniquement */
    --offer-creative: #6A3FD1; --offer-creative-soft: #F0EBFB;
    --offer-score: #1F62E0;    --offer-score-soft: #E8EFFC;
    --offer-insights: #118A5F; --offer-insights-soft: #E3F3EC;
    --verdict-good: #15995F;   --verdict-good-soft: #E4F5EC;
    --verdict-mid: #C7811D;    --verdict-mid-soft: #FBF1E1;
    --verdict-low: #C9412E;    --verdict-low-soft: #FBE9E6;
    --font-display: "Archivo", "Instrument Sans", system-ui, sans-serif;
    --font-body: "Instrument Sans", system-ui, sans-serif;
    --radius: 6px;

    /* Couleur de la section courante (posée sur <body> : offer-creative / offer-score / offer-insights) */
    --offer-current: var(--nara-ink);
    --offer-current-soft: var(--nara-bg);

    /* ── Compléments Piste A ── */
    --nara-surface: var(--nara-bg);
    --nara-ink-soft: #2B2F36;
    --nara-faint: #8A909B;
    --nara-line-strong: #CDD2DA;
    --nara-orange-hover: #C4662A;
    --offer-creative-dark: #5530B0;
    --offer-score-dark: #1850BA;
    --offer-insights-dark: #0D7350;
    --score-good: var(--verdict-good);
    --score-good-soft: var(--verdict-good-soft);
    --score-mid: var(--verdict-mid);
    --score-mid-soft: var(--verdict-mid-soft);
    --score-low: var(--verdict-low);
    --score-low-soft: var(--verdict-low-soft);
    --font-num: var(--font-display);
    --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    --sidebar-bg: var(--nara-sidebar);
    --sidebar-ink: var(--nara-ink);

    /* ── Alias legacy (base_modern, nara_design_system, creation/_variables, pages) ── */
    --ink: var(--nara-ink);
    --ink-soft: var(--nara-ink-soft);
    --paper: var(--nara-surface);
    --panel: var(--nara-card);
    --card: var(--nara-card);
    --line: var(--nara-line);
    --rule: var(--nara-line);
    --muted: var(--nara-muted);
    --faint: var(--nara-faint);
    --grey: var(--nara-muted);
    /* Anciens alias « orange » : couleur de section (l'orange reste au logo et au bouton principal) */
    --terra: var(--offer-current);
    --terra-deep: var(--offer-current);
    --nara: var(--offer-current);
    --orange: var(--offer-current);
    --orange-dark: var(--offer-current);
    --terracotta: var(--offer-current);
    --noir: var(--nara-ink);
    --noir-mid: var(--nara-ink-soft);
    --charcoal: var(--nara-ink);
    --cream: var(--nara-surface);
    --cream-dark: #ECEEF2;
    --warm-gray: var(--nara-muted);
    --border: var(--nara-line);
    --light-gray: var(--nara-line);

    --bg-page: var(--nara-surface);
    --bg-card: var(--nara-card);
    --bg-subtle: #ECEEF2;
    --bg-sand-tint: var(--nara-surface);
    --text-heading: var(--nara-ink);
    --text-body: var(--nara-ink-soft);
    --text-muted: var(--nara-muted);
    --text-faint: var(--nara-faint);
    --border-light: var(--nara-line);
    --border-medium: var(--nara-line-strong);
    --nara-orange-soft: var(--offer-current-soft);
    --nara-orange-border: var(--nara-line-strong);
    --nara-orange-dark: var(--nara-orange-hover);
    --nara-orange-bg: var(--offer-current-soft);
    --nara-orange-light: var(--nara-line-strong);
    --nara-black: var(--nara-ink);
    --nara-gray-900: var(--nara-ink);
    --nara-gray-800: #23262C;
    --nara-gray-700: var(--nara-ink-soft);
    --nara-gray-600: #4A505B;
    --nara-gray-500: var(--nara-muted);
    --nara-gray-400: var(--nara-faint);
    --nara-gray-300: var(--nara-line-strong);
    --nara-gray-200: var(--nara-line);
    --nara-gray-100: #ECEEF2;
    --nara-gray-50: var(--nara-surface);

    --nara-success: var(--score-good);
    --nara-success-light: var(--score-good-soft);
    --nara-success-dark: #0F7A4B;
    --nara-warning: var(--score-mid);
    --nara-warning-light: var(--score-mid-soft);
    --nara-warning-dark: #A86A12;
    --nara-error: var(--score-low);
    --nara-error-light: var(--score-low-soft);
    --nara-error-dark: #A63322;
    --status-success: var(--score-good);
    --status-success-bg: var(--score-good-soft);
    --status-warning: var(--score-mid);
    --status-warning-bg: var(--score-mid-soft);
    --status-danger: var(--score-low);
    --status-danger-bg: var(--score-low-soft);
    --score-high: var(--score-good);
    --score-medium: var(--score-mid);

    --studio: var(--offer-creative);
    --studio-d: var(--offer-creative-dark);
    --studio-l: var(--offer-creative-soft);
    --score: var(--offer-score);
    --score-d: var(--offer-score-dark);
    --score-l: var(--offer-score-soft);
    --ins: var(--offer-insights);
    --ins-d: var(--offer-insights-dark);
    --ins-l: var(--offer-insights-soft);

    --serif: var(--font-display);
    --sans: var(--font-body);
    --font-main: var(--font-body);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;

    --shadow-subtle: 0 1px 2px rgba(18, 20, 23, 0.04);
    --shadow-card: 0 1px 3px rgba(18, 20, 23, 0.06), 0 1px 2px rgba(18, 20, 23, 0.04);
    --shadow-hover: 0 6px 16px -4px rgba(18, 20, 23, 0.10), 0 2px 4px rgba(18, 20, 23, 0.04);
    --shadow-orange: var(--shadow-card);
    --shadow-orange-hover: var(--shadow-hover);

    --side-bg: var(--sidebar-bg);
    --side-text: var(--sidebar-ink);
    --side-text-muted: var(--nara-muted);
    --side-border: var(--nara-line);

    /* ── Tailwind v4 : tailwind.css compilé lit var(--color-*) ; surcharge ici
       tant que le CSS n'est pas recompilé (node_modules absent). ── */
    --color-terracotta: var(--offer-current);
    --color-terra-dark: var(--offer-current);
    --color-terra-light: var(--nara-bg);
    --color-orange: var(--offer-current);
    --color-orange-50: var(--offer-current-soft);
    --color-orange-100: var(--offer-current-soft);
    --color-orange-500: var(--offer-current);
    --color-orange-600: var(--offer-current);
    --color-orange-700: var(--offer-current);
    --color-orange-800: var(--offer-current);
    --color-gold: var(--verdict-mid);
    --color-charcoal: var(--nara-ink);
    --color-sand: var(--nara-bg);
    --color-sand-dark: var(--nara-track);
    --color-brand-orange: var(--offer-current);
    --color-sidebar-dark: var(--nara-ink);
    --font-sans: var(--font-body);
    --font-serif: var(--font-display);
}

/* ── Couleur de section : étape active du stepper, sidebar, eyebrows, liens ── */
html body.offer-creative { --offer-current: var(--offer-creative); --offer-current-soft: var(--offer-creative-soft); }
html body.offer-score { --offer-current: var(--offer-score); --offer-current-soft: var(--offer-score-soft); }
html body.offer-insights { --offer-current: var(--offer-insights); --offer-current-soft: var(--offer-insights-soft); }

/* Titres : pas de mot orphelin (« Marque demo » sur sa propre ligne) */
html body h1,
html body h2,
html body .page-title { text-wrap: balance; }

/* Eyebrow / ligne de contexte au-dessus d'un titre */
.nara-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nara-muted);
}
.nara-eyebrow--section { color: var(--offer-current); }
.nara-context-line {
    font-size: 13px;
    color: var(--nara-muted);
    margin: 0 0 4px;
}
.nara-link,
a.nara-link { color: var(--offer-current); text-decoration: none; font-weight: 600; }
.nara-link:hover { text-decoration: underline; }

/* Tags plateformes / pastilles neutres */
.nara-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--nara-bg);
    border: 1px solid var(--nara-line);
    color: var(--nara-ink);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Icônes Lucide inline */
.nara-icon { display: inline-block; vertical-align: -0.15em; flex: none; }
.nara-icon.is-good { color: var(--verdict-good); }
.nara-icon.is-mid { color: var(--verdict-mid); }
.nara-icon.is-low { color: var(--verdict-low); }

/* ── Typographie ── */
html body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--nara-ink);
    background-color: var(--nara-surface);
    -webkit-font-smoothing: antialiased;
}
html body h1,
html body h2,
html body h3,
html body h4 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--nara-ink);
}
html body h5,
html body h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.font-serif { font-family: var(--font-display) !important; letter-spacing: -0.02em; }
.nara-num,
.score-value,
.score-number,
[class*="score-num"] {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

:focus-visible { outline: 2px solid var(--offer-score); outline-offset: 2px; }

/* ── Bouton principal : seul usage de l'orange avec le logo ── */
.btn-primary-action,
.btn-primary {
    background: var(--nara-orange);
    border-color: var(--nara-orange);
    color: #FFFFFF !important;
    border-radius: var(--radius);
    box-shadow: none;
}
.btn-primary-action:hover,
.btn-primary:hover {
    background: var(--nara-orange-hover);
    border-color: var(--nara-orange-hover);
    transform: none;
    box-shadow: none;
}
.btn-ghost,
.btn-secondary {
    background: #FFFFFF;
    border: 1px solid var(--nara-line);
    color: var(--nara-ink) !important;
    border-radius: var(--radius);
}
.btn-ghost:hover,
.btn-secondary:hover {
    background: var(--nara-surface);
    border-color: var(--nara-line-strong);
}

/* ── Champs de formulaire ── */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="url"],
html body input[type="search"],
html body input[type="date"],
html body select,
html body textarea {
    font-family: var(--font-body);
    border-color: var(--nara-line);
    border-radius: var(--radius);
}
html body input:focus,
html body select:focus,
html body textarea:focus {
    border-color: var(--offer-score);
    box-shadow: 0 0 0 3px var(--offer-score-soft);
    outline: none;
}

/* ── Cartes ── */
.nara-card, .card, .panel {
    border-color: var(--nara-line);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.nara-card:hover, .card:hover, .panel:hover { box-shadow: none; }

::selection { background: var(--offer-score-soft); color: var(--nara-ink); }

/* ── Focus : bleu Score, jamais orange ── */
html body input:not([type="checkbox"]):not([type="radio"]):focus,
html body select:focus,
html body textarea:focus {
    border-color: var(--offer-score) !important;
    box-shadow: 0 0 0 3px var(--offer-score-soft) !important;
    outline: none;
}

/* ── États actifs / sélectionnés : encre neutre, jamais orange ── */
.tab-btn.active {
    color: var(--nara-ink) !important;
    border-bottom-color: var(--nara-ink) !important;
}
.idea-card.selected,
.visual-candidate.selected,
.explore-opt.selected {
    border-color: var(--nara-ink) !important;
    box-shadow: 0 0 0 2px rgba(18, 20, 23, 0.12) !important;
}
.idea-card.selected .select-btn {
    background: var(--nara-ink) !important;
    border-color: var(--nara-ink) !important;
    color: #FFFFFF !important;
}
.chip.active,
.visual-option-chip.active,
.explore-chip.active {
    background: var(--nara-surface) !important;
    border-color: var(--nara-ink) !important;
    color: var(--nara-ink) !important;
}
.visual-substep.active {
    background: var(--nara-ink) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.visual-transition-steps li.active { color: var(--nara-ink) !important; }

/* Utilitaire Tailwind absent du CSS compilé */
.ring-terracotta { --tw-ring-color: var(--offer-current); }