/* Arti design tokens, lifted from the app.
 *
 * SOURCE OF TRUTH: lib/core/theme/arti_colors.dart and app_theme.dart.
 * Do not invent a value here. If the site needs a colour the app does not
 * have, add it to the "site only" block at the bottom and say why — otherwise
 * the two drift and the site stops looking like the product.
 *
 * The palette has a story, and the site should tell it: floor plans are drawn
 * on warm paper, so the light theme is sepia drafting paper and the dark theme
 * ("Nuit atelier") is that same paper under a desk lamp. Neither is a
 * blue-black. Every pair below was measured for contrast in the app, not
 * eyeballed.
 */

:root {
  /* --- light: warm drafting paper ------------------------------------- */
  --bg: #EFE0C4;
  --surface: #F7EDD8;
  --surface-elevated: #E3CEAA;
  --primary: #245BD3;
  --primary-dark: #1D4ED8;
  --on-primary: #FFFFFF;
  --text: #2C1A06;
  --text-secondary: #7A5C3A;
  --text-disabled: #B89A78;
  --border: #CFB48A;
  --border-focus: #245BD3;
  --danger: #C42020;
  --success: #16A34A;

  /* --- brand gold, sampled from the app icon (#E7AD54) -----------------
   * DECORATIVE ONLY. Gold on sepia measures far below 4.5:1, so it never
   * carries text or a control. It is the glow, the rule under a heading, the
   * eyebrow tint — the thing that makes the page look like the product.
   * --primary (blue) stays the action colour so CTAs remain unmistakable and
   * accessible. */
  --gold: #E7AD54;
  --gold-deep: #C88A2E;
  --gold-glow: rgba(231, 173, 84, .38);
  --gold-wash: rgba(231, 173, 84, .10);

  /* Site-only. The app has no page-width or shadow tokens because it is a
     desktop window, not a document. */
  --shadow-sm: 0 1px 2px rgba(44, 26, 6, .07);
  --shadow: 0 2px 4px rgba(44, 26, 6, .06), 0 12px 32px rgba(44, 26, 6, .10);
  --shadow-lg: 0 4px 8px rgba(44, 26, 6, .08), 0 24px 64px rgba(44, 26, 6, .16);
  --plan-ink: #2C1A06;
  --plan-line: #B89A78;

  /* --- type: Inter, the app's scale ----------------------------------- */
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-display: 28px;   /* displayLarge  w600 */
  --fs-h2: 22px;        /* headlineMedium w600 */
  --fs-h3: 18px;        /* headlineSmall  w600 */
  --fs-body-lg: 16px;
  --fs-body: 14px;
  --fs-small: 12px;

  /* --- shape: the app's radii ----------------------------------------- */
  --r-lg: 12px;   /* cards, dialogs, primary buttons */
  --r-md: 10px;   /* secondary buttons */
  --r-sm: 6px;
  --r-xs: 3px;

  /* --- rhythm ---------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;
  --page: 1120px;
  --prose: 68ch;
}

/* --- dark: « Nuit atelier » --------------------------------------------
 * L* 28 — deliberately lifted so the plan separates from the chrome and a
 * long session stays comfortable. onPrimary is INK, not white: white on this
 * accent measures 2.4, ink measures 7.3.
 *
 * Declared once, in a custom property group, then applied from the two places
 * that can select it. The light palette above is the base and is never
 * repeated — duplicating it is how the two fall out of step.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2C2721;
    --surface: #39322A;
    --surface-elevated: #4A4137;
    --primary: #6FAAF7;
    --primary-dark: #4A87D8;
    --on-primary: #0E1B2B;
    --text: #F7F2E8;
    --text-secondary: #C4B6A0;
    --text-disabled: #8B7F6B;
    --border: #564B3B;
    --border-focus: #6FAAF7;
    --danger: #F58579;
    --success: #2ECC71;
    --gold: #F0BE72;
    --gold-deep: #D69B44;
    --gold-glow: rgba(240, 190, 114, .30);
    --gold-wash: rgba(240, 190, 114, .09);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow: 0 2px 4px rgba(0, 0, 0, .28), 0 12px 32px rgba(0, 0, 0, .40);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .32), 0 24px 64px rgba(0, 0, 0, .50);
    --plan-ink: #F7F2E8;
    --plan-line: #8B7F6B;
  }
}

/* An explicit choice must win in BOTH directions — including a visitor who
   picks dark while their system is light. */
:root[data-theme="dark"] {
  --bg: #2C2721;
  --surface: #39322A;
  --surface-elevated: #4A4137;
  --primary: #6FAAF7;
  --primary-dark: #4A87D8;
  --on-primary: #0E1B2B;
  --text: #F7F2E8;
  --text-secondary: #C4B6A0;
  --text-disabled: #8B7F6B;
  --border: #564B3B;
  --border-focus: #6FAAF7;
  --danger: #F58579;
  --success: #2ECC71;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
  --shadow: 0 2px 4px rgba(0, 0, 0, .28), 0 12px 32px rgba(0, 0, 0, .40);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .32), 0 24px 64px rgba(0, 0, 0, .50);
  --plan-ink: #F7F2E8;
  --plan-line: #8B7F6B;
}

/* --- site only ----------------------------------------------------------
 * Values the app does not have. Each one says why it exists, per the rule at
 * the top of this file.
 */

/* THE DEMO CAPTION. It sits on a translucent tint over a SCREENSHOT rather
 * than on flat --bg, and the plan in that screenshot contains near-black
 * pixels — measured at rgb(17, 9, 13), not guessed. Composited over that,
 * --text-secondary lands at 2.91:1, where it is a comfortable 4.72:1 on plain
 * paper: a WCAG AA failure for text that size.
 *
 * Raising the tint does not rescue it. At 97% opacity it still only reaches
 * 4.45:1, and a 97% tint hides the very screenshot the section exists to
 * show. So the caption gets its own darker brown instead — 5.13:1 over the
 * worst pixel in that picture, and still plainly quieter than --text.
 *
 * Dark theme needs no override: there the tint is dark and the screenshot is
 * light, so the backdrop only ever moves further from the light text. */
:root { --demo-note: #5C4327; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --demo-note: var(--text-secondary); }
}
:root[data-theme="dark"] { --demo-note: var(--text-secondary); }