/* Sharlinks · tokens v3. Source : docs/v3/DESIGN.md. Seules les variables sémantiques sont utilisées par les composants. */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Caveat Brush";
  src: url("fonts/caveat-brush.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Palette de marque */
  --yellow: #FFE600;
  --yellow-soft: #FFFBD6;
  --black: #0B0B0C;
  --white: #FFFFFF;

  /* Échelle de gris (chaude côté clair, neutre côté sombre) */
  --gray-50: #F4F4F1;
  --gray-100: #EBEBE6;
  --gray-200: #E4E4DF;
  --gray-300: #D0D0C9;
  --gray-400: #A9A9B0;
  --gray-500: #76767D;
  --gray-600: #55555B;
  --gray-700: #2C2C31;
  --gray-800: #1A1A1D;
  --gray-900: #141417;

  /* Sémantique, mode jour */
  --bg: var(--white);
  --surface: var(--white);
  --surface-2: var(--gray-50);
  --surface-3: var(--gray-100);
  --line: var(--gray-200);
  --text: var(--black);
  --muted: var(--gray-600);
  --accent: var(--yellow);
  --on-accent: var(--black);
  --highlight: var(--yellow-soft);
  --inverse: var(--black);
  --on-inverse: var(--white);
  --strong: var(--black);          /* bouton sombre, contour de CTA */
  --on-strong: var(--yellow);
  --success: #0E7537;
  --success-bg: #E3F6E9;
  --danger: #C8281B;
  --danger-bg: #FDE8E6;
  --live: #1FBF5B;

  /* Typographie */
  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-text: var(--font-display);
  --font-hand: "Caveat Brush", "Marker Felt", "Bradley Hand", cursive;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-h3: 24px;
  --fs-h2: clamp(36px, 10vw, 72px);
  --fs-h1: clamp(46px, 13.2vw, 118px);
  --track-display: -0.055em;
  --track-title: -0.035em;

  /* Espacements (base 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --gutter: 20px;
  --wrap: 1328px;
  --tap: 44px;

  /* Rayons */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Ombres : la dure pour ce qui se presse, la douce pour ce qui flotte */
  --shadow-hard: 5px 5px 0 var(--black);
  --shadow-float: 0 1px 0 rgb(11 11 12 / .04), 0 18px 40px -18px rgb(11 11 12 / .28);
  --shadow-sheet: 0 -12px 48px -12px rgb(11 11 12 / .35);

  /* Mouvement */
  --dur-press: 110ms;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* Empilement */
  --z-sticky: 20;
  --z-nav: 30;
  --z-sheet: 40;
  --z-toast: 50;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Illustrations : halo blanc en mode nuit pour garder le trait noir lisible */
  --char-halo: none;

  color-scheme: light;
}

@media (min-width: 1024px) {
  :root { --gutter: 56px; }
}

/* Mode nuit : déclaré deux fois (préférence système, puis choix explicite) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--black);
    --surface: var(--gray-900);
    --surface-2: var(--gray-800);
    --surface-3: #232327;
    --line: var(--gray-700);
    --text: var(--white);
    --muted: var(--gray-400);
    --highlight: #26240F;
    --inverse: var(--gray-800);
    --strong: var(--yellow);
    --on-strong: var(--black);
    --success: #4ADE80;
    --success-bg: #0F2A1A;
    --danger: #FF7A6E;
    --danger-bg: #2E1412;
    --shadow-hard: 5px 5px 0 transparent;
    --shadow-float: 0 18px 40px -18px rgb(0 0 0 / .8);
    --shadow-sheet: 0 -12px 48px -12px rgb(0 0 0 / .9);
    --char-halo: drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--black);
  --surface: var(--gray-900);
  --surface-2: var(--gray-800);
  --surface-3: #232327;
  --line: var(--gray-700);
  --text: var(--white);
  --muted: var(--gray-400);
  --highlight: #26240F;
  --inverse: var(--gray-800);
  --strong: var(--yellow);
  --on-strong: var(--black);
  --success: #4ADE80;
  --success-bg: #0F2A1A;
  --danger: #FF7A6E;
  --danger-bg: #2E1412;
  --shadow-hard: 5px 5px 0 transparent;
  --shadow-float: 0 18px 40px -18px rgb(0 0 0 / .8);
  --shadow-sheet: 0 -12px 48px -12px rgb(0 0 0 / .9);
  --char-halo: drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-fast: 0ms; --dur-base: 0ms; }
}