/*
 * tokens.css — FitToo Design Tokens
 * Fonte da verdade: specs/design/tokens/colors.json + typography.json (W3C DTCG)
 * Gerado manualmente para TASK-001. Nao edite diretamente — edite os .json e regenere.
 */

:root {
  /* ── Cores de marca ────────────────────────────────────────────────────── */
  --color-brand-blue:   #4A7AFE;
  --color-brand-green:  #2ECC71;
  --color-brand-yellow: #FFC145;
  --color-brand-coral:  #FF6B6B;
  --color-brand-navy:   #2D3748;

  /* ── Escalas de cor ────────────────────────────────────────────────────── */
  /* Azul */
  --color-blue-50:  #E8F1FF;
  --color-blue-100: #D9E7FE;
  --color-blue-200: #B3CEFD;
  --color-blue-300: #8DB4FB;
  --color-blue-400: #6699FB;
  --color-blue-500: #4A7AFE;
  --color-blue-600: #3A66E6;
  --color-blue-700: #2E52C2;
  --color-blue-800: #173E85;
  --color-blue-900: #102C5E;

  /* Verde */
  --color-green-50:  #E9FBF2;
  --color-green-100: #C9F4DF;
  --color-green-500: #2ECC71;
  --color-green-600: #26B062;
  --color-green-700: #1E8C4E;

  /* Amarelo */
  --color-yellow-50:  #FFF6E0;
  --color-yellow-100: #FDEBBC;
  --color-yellow-500: #FFC145;
  --color-yellow-600: #E6A41C;
  --color-yellow-700: #B7800F;

  /* Coral */
  --color-coral-50:  #FFEDEC;
  --color-coral-100: #FFD4D1;
  --color-coral-500: #FF6B6B;
  --color-coral-600: #F04E4E;
  --color-coral-700: #C73A31;

  /* Neutros */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F7F8FA;
  --color-neutral-100: #F4F6F7;
  --color-neutral-200: #E7EAF0;
  --color-neutral-300: #D6DBE4;
  --color-neutral-400: #AEB6C4;
  --color-neutral-500: #8A93A4;
  --color-neutral-600: #5B6675;
  --color-neutral-700: #44505F;
  --color-neutral-800: #2D3748;
  --color-neutral-900: #1F2733;

  /* ── Aliases semanticos ────────────────────────────────────────────────── */
  --color-primary:        var(--color-blue-500);
  --color-primary-hover:  var(--color-blue-600);
  --color-primary-active: var(--color-blue-700);
  --color-primary-subtle: var(--color-blue-50);
  --color-on-primary:     var(--color-neutral-0);

  --color-secondary:      var(--color-green-500);
  --color-accent:         var(--color-coral-500);

  --color-success:        var(--color-green-500);
  --color-success-subtle: var(--color-green-50);
  --color-warning:        var(--color-yellow-500);
  --color-warning-subtle: var(--color-yellow-50);
  --color-error:          var(--color-coral-600);
  --color-error-subtle:   var(--color-coral-50);
  --color-info:           var(--color-blue-500);
  --color-info-subtle:    var(--color-blue-50);

  --color-background:     var(--color-neutral-50);
  --color-surface:        var(--color-neutral-0);
  --color-surface-muted:  var(--color-neutral-100);
  --color-border:         var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);

  --color-text-primary:   var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-500);
  --color-text-on-primary:var(--color-neutral-0);

  --color-focus-ring:     var(--color-blue-400);

  /* ── Tipografia ────────────────────────────────────────────────────────── */
  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Espacamento ───────────────────────────────────────────────────────── */
  --space-none: 0px;
  --space-2xs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;

  /* ── Raios de borda ────────────────────────────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ── Sombras ───────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px 0 rgba(45,55,72,0.05), 0 1px 3px 0 rgba(45,55,72,0.04);
  --shadow-md:    0 2px 8px 0 rgba(45,55,72,0.06), 0 8px 24px -6px rgba(45,55,72,0.10);
  --shadow-lg:    0 4px 12px 0 rgba(45,55,72,0.05), 0 18px 48px -12px rgba(45,55,72,0.16);
  --shadow-focus: 0 0 0 4px rgba(74,122,254,0.30);

  /* ── Movimento ─────────────────────────────────────────────────────────── */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
}