/* Shared design tokens of "Social Immo" — the landing page (landing.css), the
 * app with its account pages (styles.css), the Design Studio (editor.css) and
 * the legal pages (legal.css) all load this file first and style themselves
 * only through these variables, so the public site and the app stay one
 * design. Change a colour or radius here, not in the sheets.
 *
 * The look (since 2026-10-12): light — a cream ground (#F7F6EE), anthracite
 * type (#0F0F0F), orange actions and accents, a warm orange light from above,
 * green in the headlines (dark to light green) and sparingly elsewhere (check marks), and one
 * signal red-orange used only where something needs attention right now
 * (see --signal). Strictly rectangular: no rounded buttons, fields or panels
 * (the radius tokens are 0; only the iPhone mockup on the landing page and
 * native radios keep their curves). The logo is the wordmark alone.
 *
 * Palette: #F7F6EE cream (ground) · #E7390D signal red-orange · #F26716
 * orange · #084A24 forest · #04261E deep forest.
 *
 * Not affected: the images the app exports. Their colours and fonts come
 * from the export designs (themes, js/theme.js), never from these tokens.
 */
:root{
  color-scheme:light;             /* native selects, checkboxes, scrollbars follow */

  /* surfaces */
  --canvas:#F7F6EE;               /* page and app background (cream) */
  --bg:#FCFBF6;                   /* raised, opaque: panels, fields, cards, dialogs */
  --fill:#ECEADF;                 /* quiet fills: toggle track, hovered rows, kbd, canvas backdrop */
  --glass:rgba(255,255,252,.45);  /* glass panels (with backdrop-filter where they overlap content) */
  --glass-strong:rgba(252,251,246,.9);
  --bar:rgba(247,246,238,.82);    /* glass of the fixed landing nav and the app header */
  /* the lit top edge of a glass panel (a 1px background line, see .edge-lit uses) */
  --edge:linear-gradient(90deg,transparent,rgba(242,103,22,.6) 50%,transparent);
  /* warm light falling from above: stage, closing, price card, Design Studio stage, backdrop */
  --light:rgba(242,103,22,.13);
  --light-soft:rgba(242,103,22,.06);

  /* text: anthracite, not black */
  --ink:#0F0F0F;                  /* 16:1 on --canvas */
  --ink-2:#2F2E2A;
  --muted:#5C5A50;                /* AA on --canvas, --bg and --fill */
  --faint:#A29D86;                /* placeholders only — too dim for real text */

  /* lines */
  --line:rgba(15,15,15,.10);
  --line-strong:rgba(15,15,15,.20);  /* form fields, hovered outlines */
  --line-hover:rgba(15,15,15,.36);   /* outline of a hovered ghost button or chip */
  --hover:rgba(15,15,15,.05);        /* background of a hovered ghost or quiet button */
  --scrim:rgba(15,15,15,.45);        /* behind dialogs */
  --drop:rgba(4,38,30,.32);          /* colour of drop shadows */

  /* accent: orange for actions, links and highlights; forest green only sparingly */
  --accent:#B5440A;               /* links, small icons, focused field borders (#F26716 darkened for AA text on cream) */
  --accent-2:#F26716;             /* active underlines, slider/checkbox accent */
  --accent-soft:rgba(242,103,22,.10);
  --accent-ring:rgba(242,103,22,.35);
  --grad:linear-gradient(180deg,#F47A2E 0%,#F26716 100%);              /* orange fill: primary buttons, selection */
  --on-grad:#0F0F0F;              /* text and icons on --grad (anthracite: cream on orange is too weak) */
  /* whole headlines, never a single word: deep forest at the top into a light green at the foot (≥3:1 on cream, large text only) */
  --grad-text:linear-gradient(180deg,#04261E 0%,#084A24 45%,#2F8F4E 100%);
  --grad-soft:linear-gradient(135deg,rgba(242,103,22,.12),rgba(231,57,13,.04));
  --forest:#084A24;               /* the sparing green: check marks in lists */
  --focus:#B5440A;

  /* signal red-orange — a « À vendre » sign in the window. Only a few fixed places:
     landing hero dot, the tour's step number, the trial note; in the app the
     unsaved state and the plan note. Never on buttons. Text in the signal
     colour uses --signal-ink (same hue, dark enough for AA on cream). */
  --signal:#E7390D;
  --signal-ink:#B32A06;
  --signal-soft:rgba(231,57,13,.14);

  /* status */
  --ok:#1F7A3D;      --ok-bg:rgba(31,122,61,.12);
  --warn:#9A5B00;    --warn-bg:rgba(242,103,22,.14);
  --danger:#C2300A;  --danger-bg:rgba(194,48,10,.10);

  /* shape: rectangular throughout — kept as tokens so every sheet stays in step */
  --radius:0;                     /* panels, big cards */
  --radius-md:0;                  /* small cards, tiles */
  --radius-sm:0;                  /* fields, icon buttons */
  --radius-xs:0;                  /* dense controls (Design Studio) */
  --radius-pill:0;                /* buttons, chips */
  /* on cream a shadow is a soft green-black drop */
  --shadow-sm:0 1px 2px rgba(4,38,30,.06),0 10px 24px -14px var(--drop);
  --shadow:0 1px 2px rgba(4,38,30,.05),0 40px 90px -40px var(--drop);
  --shadow-btn:inset 0 -1px 0 rgba(0,0,0,.18);           /* orange buttons: flat */
  --shadow-btn-hover:inset 0 0 0 100vmax #E7390D;        /* hover: the button deepens to red-orange */

  /* cream with one warm light from above: login card, account pages, mail confirmation */
  --backdrop:
    radial-gradient(70% 55% at 50% -10%, var(--light), transparent 70%),
    var(--canvas);

  /* motion */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);        /* entering / exiting */
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);    /* moving on screen */

  /* type: one geometric family (Outfit, variable 100–900), roles set by weight and tracking */
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}