/* Mayara Almeida DS — tokens v0.2 */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");

:root {
  /* Primary */
  --primary-50:#FDF4F3; --primary-100:#FBE7E5; --primary-200:#F6CBC6; --primary-300:#EEA39B; --primary-400:#E3706A;
  --primary-500:#D43B3B; --primary-600:#B82F30; --primary-700:#962628; --primary-800:#731F21; --primary-900:#4F1718;
  --color-primary:var(--primary-500);
  --color-primary-hover:var(--primary-600);
  --color-primary-text:#B02E2E; /* links / red text on light */

  /* Neutral (warm) */
  --neutral-50:#FBFAF9; --neutral-100:#F7F6F4; --neutral-200:#EEEBE8; --neutral-300:#E2DED9; --neutral-400:#CBC6C0;
  --neutral-500:#A6A0A6; --neutral-600:#6B6670; --neutral-700:#4A4650; --neutral-800:#2E2B32; --neutral-900:#1C1A1F;

  /* Roles */
  --color-bg:var(--neutral-100);
  --color-surface:var(--neutral-50);
  --color-surface-raised:#FFFFFF;
  --color-border:var(--neutral-200);
  --color-border-strong:var(--neutral-300);
  --color-text:var(--neutral-900);
  --color-text-muted:var(--neutral-600);
  --color-text-subtle:#8A8590;
  --color-placeholder:var(--neutral-500);

  /* Semantic (danger deliberately darker than primary) */
  --color-success:#17845A; --color-success-bg:#E6F3EC; --color-success-text:#0F6243;
  --color-warning:#B26B12; --color-warning-bg:#FAF0DF; --color-warning-text:#7A4A0C;
  --color-danger:#A3201C;  --color-danger-bg:#FBE9E7;  --color-danger-text:#962628;
  --color-info:#2F64C8;

  /* Blush — shadows only, never fills */
  --blush:222,138,164;

  /* Type */
  --font-display:"Bricolage Grotesque", system-ui, sans-serif; /* highlights only */
  --font-sans:"Satoshi", system-ui, sans-serif;               /* everything else */
  --text-display:56px; --lh-display:1.02; --ls-display:-.035em;
  --text-h1:40px; --lh-h1:1.1; --ls-h1:-.03em;
  --text-h2:28px; --lh-h2:1.2; --ls-h2:-.02em;
  --text-h3:20px; --lh-h3:1.3; --ls-h3:-.01em;   /* Satoshi 700 */
  --text-body:16px; --lh-body:1.6;
  --text-sm:14px; --lh-sm:1.5;
  --text-xs:12px;
  --text-label:12px; --ls-label:.1em;            /* uppercase, 500 */

  /* Radius (max 12) */
  --radius-xs:4px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px;

  /* Spacing — 4px base */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-18:72px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(60,40,50,.04);
  --shadow-sm:0 1px 2px rgba(60,40,50,.04), 0 2px 6px -2px rgba(var(--blush),.12);
  --shadow-md:0 2px 4px rgba(60,40,50,.04), 0 10px 24px -8px rgba(var(--blush),.22);
  --shadow-lg:0 4px 8px rgba(60,40,50,.05), 0 24px 48px -16px rgba(var(--blush),.32);
  --focus-ring:0 0 0 4px rgba(212,59,59,.12);

  /* Motion */
  --ease-out:cubic-bezier(.25,.6,.3,1);
  --dur-fast:.15s; --dur-base:.18s; --dur-sheen:1.2s; --dur-aura:9s;
}