/* ==========================================================================
   MOA Gestão — Design tokens
   Paleta extraída do logo: amarelo #FFD400 sobre preto #050505.
   ========================================================================== */

@layer tokens {
  :root {
    /* ---------- marca ---------- */
    --brand-50:  #FFFBE6;
    --brand-100: #FFF3B8;
    --brand-200: #FFE97F;
    --brand-300: #FFE24D;
    --brand-400: #FFD923;
    --brand-500: #FFD400;
    --brand-600: #E6B800;
    --brand-700: #B38B00;
    --brand-800: #806300;
    --brand-900: #4D3B00;

    --ink-900: #050505;
    --ink-850: #0A0B0D;
    --ink-800: #0C0D10;
    --ink-750: #121419;
    --ink-700: #15171C;
    --ink-600: #1D2027;
    --ink-500: #2A2E38;
    --ink-400: #3C414F;
    --ink-300: #5A6172;
    --ink-200: #8C93A3;
    --ink-100: #C3C8D2;
    --ink-050: #E8EAEF;

    /* ---------- apoio (tema clínico/esportivo) ---------- */
    --med-500:   #12B5A6;
    --med-600:   #0E9487;
    --blood-500: #E23D4A;
    --blood-600: #C22B37;
    --field-500: #1FA85C;
    --sky-500:   #2E8FE8;

    --ok-500:     #16A34A;
    --warn-500:   #F59E0B;
    --danger-500: #DC2626;
    --info-500:   #2563EB;

    /* ---------- tipografia ---------- */
    --font-display: 'Archivo Black', 'Arial Black', Impact, system-ui, sans-serif;
    --font-ui: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;

    --fs-3xs: .6875rem;
    --fs-2xs: .75rem;
    --fs-xs:  .8125rem;
    --fs-sm:  .875rem;
    --fs-md:  1rem;
    --fs-lg:  1.125rem;
    --fs-xl:  1.375rem;
    --fs-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    --fs-3xl: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
    --fs-4xl: clamp(2.4rem, 1.6rem + 4vw, 4.4rem);
    --fs-5xl: clamp(3rem, 1.6rem + 6.4vw, 6.5rem);

    --lh-tight: 1.05;
    --lh-snug: 1.25;
    --lh-normal: 1.6;

    /* ---------- espaçamento ---------- */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
    --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
    --sp-32: 8rem;

    --container: 1240px;
    --container-narrow: 820px;

    /* ---------- forma ---------- */
    --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
    --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-full: 999px;
    --border: 1px solid var(--line);

    /* ---------- movimento ---------- */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: .18s;
    --t-med: .32s;
    --t-slow: .6s;

    --z-base: 1; --z-sticky: 100; --z-drawer: 200;
    --z-modal: 300; --z-toast: 400; --z-max: 999;
  }

  /* ================= TEMA CLARO (padrão) ================= */
  :root,
  :root[data-theme='claro'] {
    color-scheme: light;

    --bg:          #F6F7F9;
    --bg-alt:      #FFFFFF;
    --surface:     #FFFFFF;
    --surface-2:   #F1F3F6;
    --surface-3:   #E7EAEF;
    --surface-inv: var(--ink-900);

    --text:        var(--ink-850);
    --text-soft:   var(--ink-300);
    --text-mute:   var(--ink-200);
    --text-inv:    #FFFFFF;

    --line:        #E2E6EC;
    --line-strong: #CBD1DB;

    --accent:      var(--brand-500);
    --accent-ink:  var(--ink-900);
    --accent-soft: var(--brand-100);

    --shadow-sm: 0 1px 2px rgb(9 12 20 / .06), 0 1px 1px rgb(9 12 20 / .04);
    --shadow-md: 0 4px 16px rgb(9 12 20 / .08), 0 1px 3px rgb(9 12 20 / .05);
    --shadow-lg: 0 18px 48px rgb(9 12 20 / .12), 0 4px 12px rgb(9 12 20 / .06);
    --shadow-brand: 0 12px 40px rgb(255 212 0 / .35);

    --glass: rgb(255 255 255 / .72);
    --glass-line: rgb(9 12 20 / .08);
    --grid-line: rgb(9 12 20 / .05);
  }

  /* ================= TEMA ESCURO ================= */
  :root[data-theme='escuro'] {
    color-scheme: dark;

    --bg:          var(--ink-900);
    --bg-alt:      var(--ink-850);
    --surface:     var(--ink-800);
    --surface-2:   var(--ink-750);
    --surface-3:   var(--ink-700);
    --surface-inv: #FFFFFF;

    --text:        #F2F4F8;
    --text-soft:   var(--ink-100);
    --text-mute:   var(--ink-200);
    --text-inv:    var(--ink-900);

    --line:        rgb(255 255 255 / .10);
    --line-strong: rgb(255 255 255 / .20);

    --accent:      var(--brand-500);
    --accent-ink:  var(--ink-900);
    --accent-soft: rgb(255 212 0 / .16);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-md: 0 6px 22px rgb(0 0 0 / .55);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / .65);
    --shadow-brand: 0 14px 50px rgb(255 212 0 / .28);

    --glass: rgb(12 13 16 / .72);
    --glass-line: rgb(255 255 255 / .10);
    --grid-line: rgb(255 255 255 / .05);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='claro']) {
      color-scheme: dark;

      --bg:          var(--ink-900);
      --bg-alt:      var(--ink-850);
      --surface:     var(--ink-800);
      --surface-2:   var(--ink-750);
      --surface-3:   var(--ink-700);
      --surface-inv: #FFFFFF;

      --text:        #F2F4F8;
      --text-soft:   var(--ink-100);
      --text-mute:   var(--ink-200);
      --text-inv:    var(--ink-900);

      --line:        rgb(255 255 255 / .10);
      --line-strong: rgb(255 255 255 / .20);
      --accent-soft: rgb(255 212 0 / .16);

      --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
      --shadow-md: 0 6px 22px rgb(0 0 0 / .55);
      --shadow-lg: 0 24px 60px rgb(0 0 0 / .65);
      --shadow-brand: 0 14px 50px rgb(255 212 0 / .28);

      --glass: rgb(12 13 16 / .72);
      --glass-line: rgb(255 255 255 / .10);
      --grid-line: rgb(255 255 255 / .05);
    }
  }
}