/* ============================================================
   FRASSATI DESIGN SYSTEM — TOKENS
   Apostolado São Pier Giorgio Frassati Brasil
   v1.1 — 2026
   Uso: @import 'frassati-tokens.css'; (sempre primeiro)
   WordPress: wp_enqueue_style('frassati-tokens', ...)
============================================================ */

:root {

  /* ── CORES PRIMÁRIAS ─────────────────────────────────── */
  --color-laranja:        #F28C28;
  --color-laranja-escuro: #D97018;
  --color-laranja-claro:  #FAB96A;
  --color-laranja-pale:   #FEF3E2;

  /* ── CORES SECUNDÁRIAS ───────────────────────────────── */
  --color-verde:          #5B8A3C;
  --color-verde-claro:    #8AB86E;
  --color-verde-pale:     #EAF3E2;

  --color-azul:           #2E6DA4;
  --color-azul-claro:     #5A9FD4;
  --color-azul-pale:      #E6F0FA;

  /* ── NEUTROS ─────────────────────────────────────────── */
  --color-branco:         #FFFFFF;
  --color-cinza-50:       #FAFAF8;
  --color-cinza-100:      #F8F8F6;
  --color-cinza-200:      #EFEFED;
  --color-cinza-300:      #D8D8D4;
  --color-cinza-400:      #B0B0A8;
  --color-cinza-500:      #8A8A82;
  --color-cinza-600:      #666660;
  --color-cinza-700:      #444440;
  --color-cinza-800:      #2A2A26;
  --color-cinza-900:      #1A1A16;
  --color-preto:          #0D0D0A;

  /* ── SEMÂNTICAS ──────────────────────────────────────── */
  --color-success:        #5B8A3C;
  --color-success-pale:   #EAF3E2;
  --color-warning:        #F28C28;
  --color-warning-pale:   #FEF3E2;
  --color-error:          #D32F2F;
  --color-error-pale:     #FEF0F0;
  --color-info:           #2E6DA4;
  --color-info-pale:      #E6F0FA;

  /* ── TIPOGRAFIA ──────────────────────────────────────── */
  --font-family:          'Roboto', sans-serif;

  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-md:         1.125rem;   /* 18px */
  --font-size-lg:         1.25rem;    /* 20px */
  --font-size-xl:         1.5rem;     /* 24px */
  --font-size-2xl:        1.875rem;   /* 30px */
  --font-size-3xl:        2.25rem;    /* 36px */
  --font-size-4xl:        3rem;       /* 48px */

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-tight:    1.2;
  --line-height-snug:     1.4;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.8;

  /* Atalhos curtos (compatibilidade interna) */
  --font:   'Roboto', sans-serif;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* ── ESPAÇAMENTOS ────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── BORDER RADIUS ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* Atalhos curtos */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* ── SOMBRAS ─────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.16);
  --shadow-xl:     0 16px 48px rgba(0,0,0,0.20);
  --shadow-orange: 0 8px 24px rgba(242,140,40,0.30);
  --shadow-green:  0 8px 24px rgba(91,138,60,0.25);

  /* ── TRANSIÇÕES ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --ease-bounce:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ── LAYOUT ──────────────────────────────────────────── */
  --container-max:  1200px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;

  /* ── Z-INDEX ─────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}