@layer reset, tokens, base, components, pages;

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

@layer tokens {
  :root {
    color-scheme: dark;
    --brand: #004aad;
    --brand-light: #5a8aca;
    --navy: #01052d;
    --bg: #020617;
    --surface: #0a1230;
    --surface-2: #0f1a40;
    --border: rgb(255 255 255 / 0.08);
    --border-strong: rgb(255 255 255 / 0.16);
    --text: #e8ecf6;
    --text-muted: #8f9bbd;
    --accent: #3d7bff;
    --accent-ink: #ffffff;
    --accent-soft: rgb(61 123 255 / 0.14);
    --ok: #22c55e;
    --warn: #f59e0b;
    --danger: #ef4444;
    --whatsapp: #25d366;
    --whatsapp-ink: #04210f;
    --header-bg: rgb(2 6 23 / 0.72);
    --grid-line: rgb(255 255 255 / 0.035);
    --shadow: 0 20px 50px -20px rgb(0 0 0 / 0.6);
    --glow: rgb(61 123 255 / 0.35);
    /* texte et voiles sur la photo du hero (identiques dans les deux thèmes) */
    --on-photo: #ffffff;
    --on-photo-muted: rgb(255 255 255 / 0.86);
    --accent-on-photo: #8db3ff;
    --photo-veil: 1 5 45;

    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 20px;
    --space: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-s: calc(var(--space) * 0.5);
    --space-l: calc(var(--space) * 2);
    --section: clamp(2.75rem, 2rem + 3.5vw, 5rem);
    --gutter: clamp(1rem, 4vw, 2rem);
    --maxw: 1180px;
    --header-h: 68px;
    --bar-h: 64px;

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --dur: 0.5s;
    /* motif géométrique inspiré du tatau, en filigrane */
    --tatau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%235a8aca' stroke-opacity='.18' stroke-width='1.2'%3E%3Cpath d='M60 8 112 60 60 112 8 60Z'/%3E%3Cpath d='M60 30 90 60 60 90 30 60Z'/%3E%3Cpath d='M0 0l20 20M120 0l-20 20M0 120l20-20M120 120l-20-20'/%3E%3C/svg%3E");
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f8fd;
    --surface: #ffffff;
    --surface-2: #eef2fb;
    --border: rgb(1 5 45 / 0.1);
    --border-strong: rgb(1 5 45 / 0.2);
    --text: #01052d;
    --text-muted: #4a5578;
    --accent: #004aad;
    --accent-soft: rgb(0 74 173 / 0.09);
    --header-bg: rgb(246 248 253 / 0.8);
    --grid-line: rgb(1 5 45 / 0.045);
    --shadow: 0 20px 40px -24px rgb(1 5 45 / 0.25);
    --glow: rgb(0 74 173 / 0.25);
    --ok: #15803d;
    --warn: #b45309;
    --danger: #b91c1c;
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      color-scheme: light;
      --bg: #f6f8fd;
      --surface: #ffffff;
      --surface-2: #eef2fb;
      --border: rgb(1 5 45 / 0.1);
      --border-strong: rgb(1 5 45 / 0.2);
      --text: #01052d;
      --text-muted: #4a5578;
      --accent: #004aad;
      --accent-soft: rgb(0 74 173 / 0.09);
      --header-bg: rgb(246 248 253 / 0.8);
      --grid-line: rgb(1 5 45 / 0.045);
      --shadow: 0 20px 40px -24px rgb(1 5 45 / 0.25);
      --glow: rgb(0 74 173 / 0.25);
      --ok: #15803d;
      --warn: #b45309;
      --danger: #b91c1c;
    }
  }
}