/* Design tokens — identité Piloz : thème clair, sobre et lumineux */
:root{
  /* Couleurs de marque (issues du logo Piloz) */
  --primary:#10A99D;
  --primary-2:#087C75;
  --primary-light:rgba(16,169,157,.11);
  --primary-mid:#78D9D1;

  /* Accent bleu marine issu du logo */
  --accent:#173B66;
  --accent-2:#244F7F;
  --accent-light:rgba(23,59,102,.09);

  /* Neutres — thème clair */
  --ink:#0B2342;
  --ink-soft:#304A68;
  --body:#596B80;
  --body-soft:#7B899A;
  --paper:#FFFFFF;
  --paper-alt:#F5F8FB;
  --paper-tint:#EDF9F7;
  --border:rgba(11,35,66,.13);
  --border-soft:rgba(11,35,66,.075);

  /* États */
  --success:#22C55E;
  --success-light:rgba(34,197,94,.14);
  --warning:#F5A623;
  --warning-light:rgba(245,166,35,.14);
  --danger:#F0544A;
  --danger-light:rgba(240,84,74,.14);

  /* Contraste profond réservé aux détails de l'interface produit */
  --deep:#0B2342;

  /* Typo */
  --font-sans:'Albert Sans',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;

  /* Rayons — architecturés, peu de pilules */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:18px;
  --r-full:999px;

  /* Ombres */
  --shadow-sm:0 6px 18px rgba(11,35,66,.07);
  --shadow-md:0 18px 42px rgba(11,35,66,.10);
  --shadow-lg:0 34px 82px rgba(11,35,66,.14);
  --shadow-brand:0 14px 34px rgba(16,169,157,.20);

  /* Rythme */
  --container:1200px;
  --container-narrow:800px;
  --gutter:clamp(20px,4vw,32px);
  --section-y:clamp(64px,10vw,120px);

  /* Mouvement */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.2s;
  --dur-med:.5s;
  --dur-slow:.9s;

  --z-nav:100;
  --z-overlay:200;
}

/* Le cadre produit reprend la palette claire de l'application réelle. */
.device-screen{
  --paper:#FFFFFF;--paper-alt:#F5F6F8;--paper-tint:#EEFAF7;
  --ink:#0A1220;--ink-soft:#2B3648;
  --body:#42495A;--body-soft:#767F91;
  --border:#E1E4EA;--border-soft:#ECEEF2;
  --primary-light:#E3FBF6;--accent-light:#FFEEE9;
  --success-light:#E7F6ED;--warning-light:#FBF0DD;
}