/* Calepin design system, version 2 (switch design_v2). Rules and reasons: docs/design/system.md.
   One token file for every front: web/front (front-office, canopy pages, showcase), web/public and web/app link it
   from their HTML. It applies only under data-design="v2" on <html>, set by /identite/design.js. Without the
   attribute nothing here applies and each front keeps its former look.
   Token names are the ones the fronts already read (--papier, --encre, --plein...), so no component changes its
   classes. The doubled attribute selector makes these values win over the Ardoise and Rams sets of each front. */

/* ------------------------------------------------------------------ colour: warm neutrals, one accent, three states */
:root[data-design="v2"][data-design] {
  /* Neutrals, by role. */
  --papier: #ECEAE5;       /* page behind the surfaces, side bar */
  --feuille: #F8F7F4;      /* surface: page of text, card, field */
  --encre: #1B1B19;        /* text, figures, links, selection, focus */
  --encre-2: #57564F;      /* secondary text (6.9 on feuille) */
  --encre-3: #6B6962;      /* placeholder, unit after a figure (5.1 on feuille) */
  --trait: #D6D3CC;        /* line between two things */
  --trait-fort: #827F77;   /* edge of a field or a control (3.0 at least on papier) */
  --survol: rgba(27, 27, 25, .05);
  --choisi: rgba(27, 27, 25, .09);
  /* The accent has one meaning: the main action of the screen. Never a link, a figure, a selection or a state. */
  --plein: #B8430C; --plein-survol: #9E3909; --sur-plein: #FFFFFF;
  /* Former accents of the fronts now read as ink: figures and links carry no colour. */
  --cote: var(--encre); --cote-doux: #E4E2DC; --humain: var(--encre); --humain-doux: #E4E2DC;
  --externe: var(--encre-2); --externe-doux: #E4E2DC;
  /* States of the engine: measured and ready, doubtful, failed. Text colour and its soft background. */
  --ok: #2F6B35; --ok-doux: #E2EEE1;
  --attention: #6F5A00; --attention-doux: #F2E8C4;   /* yellow ochre: far from the accent orange */
  --bloquant: #A8261B; --bloquant-doux: #F6E1DD;
  --grille: transparent;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-design="v2"][data-design]:not([data-theme="light"]) {
  --papier: #151514; --feuille: #1E1E1C; --encre: #ECEAE4; --encre-2: #A6A39B; --encre-3: #8F8C84;
  --trait: #34332F; --trait-fort: #77756D;
  --survol: rgba(236, 234, 228, .06); --choisi: rgba(236, 234, 228, .11);
  --plein: #B8430C; --plein-survol: #CF4E12; --sur-plein: #FFFFFF;
  --cote: var(--encre); --cote-doux: #2A2A27; --humain: var(--encre); --humain-doux: #2A2A27;
  --externe: var(--encre-2); --externe-doux: #2A2A27;
  --ok: #86C98E; --ok-doux: #1C2E1E; --attention: #E2C257; --attention-doux: #33290F; --bloquant: #F2907F; --bloquant-doux: #43201B;
  color-scheme: dark;
} }
:root[data-design="v2"][data-design][data-theme="dark"] {
  --papier: #151514; --feuille: #1E1E1C; --encre: #ECEAE4; --encre-2: #A6A39B; --encre-3: #8F8C84;
  --trait: #34332F; --trait-fort: #77756D;
  --survol: rgba(236, 234, 228, .06); --choisi: rgba(236, 234, 228, .11);
  --plein: #B8430C; --plein-survol: #CF4E12; --sur-plein: #FFFFFF;
  --cote: var(--encre); --cote-doux: #2A2A27; --humain: var(--encre); --humain-doux: #2A2A27;
  --externe: var(--encre-2); --externe-doux: #2A2A27;
  --ok: #86C98E; --ok-doux: #1C2E1E; --attention: #E2C257; --attention-doux: #33290F; --bloquant: #F2907F; --bloquant-doux: #43201B;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ type, space, grid, shape, motion */
:root[data-design="v2"][data-design] {
  /* One family, two weights. Figures are Inter with tabular digits, not a second family. */
  --v2-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texte: var(--v2-font); --f-chiffre: var(--v2-font); --font-sans: var(--v2-font); --font-mono: var(--v2-font);
  --v2-regular: 400; --v2-medium: 500;
  /* Six sizes, each with its line height. Steps of about 1.4 from 14 px. */
  --v2-12: 12px; --v2-12-line: 16px;    /* label, table head, legal note */
  --v2-14: 14px; --v2-14-line: 20px;    /* text of the platform and the back-office */
  --v2-16: 16px; --v2-16-line: 24px;    /* text of the public pages, fields on a phone */
  --v2-20: 20px; --v2-20-line: 28px;    /* section title, page title of the platform */
  --v2-28: 28px; --v2-28-line: 36px;    /* page title of a public page, key figure */
  --v2-44: 44px; --v2-44-line: 48px;    /* the one idea of a public screen */
  --v2-tight-20: -0.01em; --v2-tight-28: -0.02em; --v2-tight-44: -0.03em;
  /* Space: multiples of 4. */
  --v2-s1: 4px; --v2-s2: 8px; --v2-s3: 12px; --v2-s4: 16px; --v2-s6: 24px; --v2-s8: 32px; --v2-s12: 48px; --v2-s16: 64px; --v2-s24: 96px;
  /* Grid: 12 columns of 72 px, 24 px gutters: 1128 px. 4 columns and 16 px gutters under 640 px. */
  --v2-columns: 12; --v2-gutter: 24px; --v2-margin: 24px; --v2-page: 1128px; --v2-measure: 744px;   /* 8 columns */
  /* Shape. */
  --v2-radius: 2px; --v2-line: 1px;
  --v2-control: 32px; --v2-control-touch: 48px;
  /* Motion: colour and opacity only, never position. */
  --v2-time: 120ms; --v2-ease: ease-out;
}
@media (max-width: 639px) { :root[data-design="v2"][data-design] { --v2-columns: 4; --v2-gutter: 16px; --v2-margin: 16px; } }

/* ------------------------------------------------------------------ rules shared by every front */
[data-design="v2"] body { font-family: var(--v2-font); letter-spacing: 0; }
/* Figures: same family, tabular digits, so columns align. */
[data-design="v2"] :is(.chiffre, .font-mono, .tabular-nums, code, kbd) { font-family: var(--v2-font); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Two weights: what was semi-bold or bold is medium. */
[data-design="v2"] :is(h1, h2, h3, h4, b, strong, th, .font-semibold, .font-bold) { font-weight: var(--v2-medium); }
/* Focus: an ink ring, 2 px, 2 px away. The accent stays free for the main action. */
[data-design="v2"] :focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
[data-design="v2"] [tabindex="-1"]:focus { outline: none; }
/* A field that draws no outline of its own (it sits in a frame with an icon): the frame shows the ring. */
[data-design="v2"] :is(div, label, form):has(> :is(input, textarea)[class*="outline-none"]:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
/* Links: ink and underlined. */
/* Only a plain link takes the ink colour: a link drawn as a button keeps the colour of its class. */
[data-design="v2"] a:not([class]) { color: var(--encre); }
[data-design="v2"] a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Motion. */
[data-design="v2"] :is(a, button, input, select, textarea) { transition: background-color var(--v2-time) var(--v2-ease), border-color var(--v2-time) var(--v2-ease), color var(--v2-time) var(--v2-ease), opacity var(--v2-time) var(--v2-ease); }
@media (prefers-reduced-motion: reduce) { [data-design="v2"] *, [data-design="v2"] *::before, [data-design="v2"] *::after { transition: none !important; } }
/* A disabled main action is a neutral plate, not a pale accent: it cannot be read as available. */
[data-design="v2"] :is(button, .bouton):disabled { opacity: 1; background: var(--cote-doux); border-color: var(--trait); color: var(--encre-3); cursor: not-allowed; }

/* ------------------------------------------------------------------ identity: mark and wordmark
   <a class="v2-brand"><span class="v2-mark"></span><span class="v2-word">Calepin</span><span class="v2-product">Toiture solaire</span></a>
   The logo is the silicon wafer of 20 October 2026 (logo.svg, logo-sombre.svg; decision of Jean, 11 November 2026: it
   replaces the « C » mark of web/identite/v2). It keeps its own colours: the blue cell is part of the logo, not the
   accent. At 16 px its 4 x 4 grid blurs: it is drawn at 20 px at least. */
.v2-brand { display: none; }
[data-design="v2"] .v2-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); text-decoration: none; font: var(--v2-medium) var(--v2-16)/var(--v2-16-line) var(--v2-font); letter-spacing: var(--v2-tight-28); white-space: nowrap; }
[data-design="v2"] .v2-mark { width: 24px; height: 24px; flex: none; }
/* The side bar of the platform draws it at 20 px (h-5): at that size the blue cell is lost in the dark theme. */
[data-design="v2"] .logo-calepin.h-5 { width: 24px; height: 24px; }
/* The URLs stay in this file: a relative url() read through var(--logo) resolves against the page that uses it. */
[data-design="v2"] :is(.v2-mark, .logo-calepin, .marque .repere, header.barre .logo, .sc-logo) { background: url("logo.svg") center / contain no-repeat; }
@media (prefers-color-scheme: dark) { [data-design="v2"]:not([data-theme="light"]) :is(.v2-mark, .logo-calepin, .marque .repere, header.barre .logo, .sc-logo) { background-image: url("logo-sombre.svg"); } }
[data-design="v2"][data-theme="dark"] :is(.v2-mark, .logo-calepin, .marque .repere, header.barre .logo, .sc-logo) { background-image: url("logo-sombre.svg"); }
[data-design="v2"] .v2-product { font-weight: var(--v2-regular); letter-spacing: 0; color: var(--encre-2); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--trait-fort); }

/* ------------------------------------------------------------------ markup kept for one version only */
.v2-only { display: none; }
[data-design="v2"] .v2-only { display: revert; }
[data-design="v2"] .v1-only { display: none !important; }