/*
  Falex Design System v1.0 | tokens
  Duas camadas:
    1. Primitivas (--fx-red-600, --fx-amendoim-200...): escala crua, nunca usada direto em componente.
    2. Semânticas (--fx-surface, --fx-brand...): papel na interface. O catálogo consome só estas.
  Marca: [data-brand="falex"] (padrão) ou [data-brand="jose-pepper"] troca apenas os tokens de marca.
  Tema: claro por padrão; escuro por prefers-color-scheme ou [data-theme="dark"] na raiz.
*/

:root {
  /* ---------- Primitivas: Vermelho Falex (medido no logotipo: #B4000C) ---------- */
  --fx-red-50: #fff1f0;
  --fx-red-100: #ffdedb;
  --fx-red-200: #ffbab4;
  --fx-red-300: #ff8a80;
  --fx-red-400: #f2544a;
  --fx-red-500: #d8141c;
  --fx-red-600: #b4000c;
  --fx-red-700: #93000a;
  --fx-red-800: #6e0a0c;
  --fx-red-900: #4a0808;

  /* Gema: anel do logotipo e tampa do pote de paçoquinha (#FCCC00) */
  --fx-gema-50: #fffbe6;
  --fx-gema-100: #fff3bf;
  --fx-gema-200: #ffe780;
  --fx-gema-300: #ffd93d;
  --fx-gema-400: #fccc00;
  --fx-gema-500: #e8b400;
  --fx-gema-600: #b88a00;
  --fx-gema-700: #8a6600;
  --fx-gema-800: #5c4400;

  /* Espiral: pirulito do logotipo (#E47824) */
  --fx-espiral-100: #fde6d2;
  --fx-espiral-300: #f6a866;
  --fx-espiral-500: #e47824;
  --fx-espiral-700: #a4500f;

  /* Anil: camiseta do mascote (#003C90) */
  --fx-anil-100: #dce6f7;
  --fx-anil-300: #86a6de;
  --fx-anil-500: #1f57b8;
  --fx-anil-600: #003c90;
  --fx-anil-800: #00265c;

  /* Folha: verde das listras de Paçoquinha, Torrone e Ovinhos (#007030) */
  --fx-folha-100: #dcf2e2;
  --fx-folha-400: #3fae5f;
  --fx-folha-600: #007030;
  --fx-folha-800: #004a20;

  /* José Pepper: medido no logotipo da linha de molhos */
  --fx-jp-red-300: #ff7a6e;
  --fx-jp-red-600: #9c0000;
  --fx-jp-red-700: #7a0000;
  --fx-jp-green-100: #d9eee3;
  --fx-jp-green-600: #005430;
  --fx-jp-yellow-400: #f0d800;

  /* Amendoim: neutros com viés de paçoca torrada */
  --fx-amendoim-0: #ffffff;
  --fx-amendoim-25: #fbf9f6;
  --fx-amendoim-50: #f6f2ec;
  --fx-amendoim-100: #ede6dc;
  --fx-amendoim-200: #ddd2c4;
  --fx-amendoim-300: #c5b6a3;
  --fx-amendoim-400: #a3907b;
  --fx-amendoim-500: #7c6a57;
  --fx-amendoim-600: #5c4d3e;
  --fx-amendoim-700: #43372c;
  --fx-amendoim-800: #2d241d;
  --fx-amendoim-900: #1d1712;
  --fx-amendoim-950: #130e0b;

  /* ---------- Tokens de marca sensíveis ao tema ---------- */
  --fx-falex-brand: var(--fx-red-600);
  --fx-falex-brand-hover: var(--fx-red-700);
  --fx-falex-brand-soft: var(--fx-red-50);
  --fx-falex-brand-text: var(--fx-red-600);
  --fx-falex-accent: var(--fx-gema-400);
  --fx-falex-stripe-a: var(--fx-red-500);
  --fx-falex-stripe-b: var(--fx-gema-400);

  --fx-jp-brand: var(--fx-jp-red-600);
  --fx-jp-brand-hover: var(--fx-jp-red-700);
  --fx-jp-brand-soft: #fbeaea;
  --fx-jp-brand-text: var(--fx-jp-red-600);
  --fx-jp-accent: var(--fx-jp-yellow-400);
  --fx-jp-second: var(--fx-jp-green-600);
  --fx-jp-second-soft: var(--fx-jp-green-100);

  /* ---------- Semânticas ---------- */
  --fx-bg: var(--fx-amendoim-25);
  --fx-surface: var(--fx-amendoim-0);
  --fx-surface-2: var(--fx-amendoim-50);
  --fx-sunken: var(--fx-amendoim-100);
  --fx-inverse: var(--fx-amendoim-900);
  --fx-on-inverse: var(--fx-amendoim-50);
  --fx-vitrine: #ffffff; /* fundo de packshot: igual nos dois temas */

  --fx-text: var(--fx-amendoim-900);
  --fx-text-muted: var(--fx-amendoim-600);
  --fx-text-subtle: var(--fx-amendoim-500);
  --fx-border: var(--fx-amendoim-200);
  --fx-border-strong: var(--fx-amendoim-300);

  --fx-brand: var(--fx-falex-brand);
  --fx-brand-hover: var(--fx-falex-brand-hover);
  --fx-brand-soft: var(--fx-falex-brand-soft);
  --fx-brand-text: var(--fx-falex-brand-text);
  --fx-on-brand: #ffffff;
  --fx-accent: var(--fx-falex-accent);
  --fx-accent-soft: var(--fx-gema-100);
  --fx-on-accent: var(--fx-amendoim-900);
  --fx-highlight: var(--fx-espiral-500);
  --fx-stripe-a: var(--fx-falex-stripe-a);
  --fx-stripe-b: var(--fx-falex-stripe-b);

  --fx-info: var(--fx-anil-600);
  --fx-info-soft: var(--fx-anil-100);
  --fx-success: var(--fx-folha-600);
  --fx-success-soft: var(--fx-folha-100);
  --fx-warning: var(--fx-gema-700);
  --fx-warning-soft: var(--fx-gema-100);
  --fx-danger: var(--fx-red-700);
  --fx-danger-soft: var(--fx-red-50);
  --fx-whatsapp: var(--fx-folha-600);
  --fx-focus: var(--fx-anil-500);

  /* ---------- Tipografia ---------- */
  --fx-font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --fx-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fx-text-2xs: 0.6875rem; /* 11 */
  --fx-text-xs: 0.75rem;    /* 12 */
  --fx-text-sm: 0.875rem;   /* 14 */
  --fx-text-base: 1rem;     /* 16 */
  --fx-text-md: 1.125rem;   /* 18 */
  --fx-text-lg: 1.25rem;    /* 20 */
  --fx-text-xl: 1.5rem;     /* 24 */
  --fx-text-2xl: 1.875rem;  /* 30 */
  --fx-text-3xl: 2.375rem;  /* 38 */
  --fx-text-4xl: 3rem;      /* 48 */
  --fx-text-5xl: 3.75rem;   /* 60 */
  --fx-text-6xl: 4.75rem;   /* 76 */

  --fx-leading-tight: 1.02;
  --fx-leading-snug: 1.2;
  --fx-leading-normal: 1.5;
  --fx-leading-relaxed: 1.65;
  --fx-tracking-display: -0.025em;
  --fx-tracking-caps: 0.08em;
  --fx-weight-regular: 400;
  --fx-weight-medium: 500;
  --fx-weight-semibold: 600;
  --fx-weight-bold: 700;
  --fx-weight-black: 800;
  --fx-width-rotulo: 82; /* eixo wdth da Bricolage para títulos de rótulo */

  /* ---------- Espaço (base 4 px) ---------- */
  --fx-space-0: 0;
  --fx-space-1: 0.25rem;
  --fx-space-2: 0.5rem;
  --fx-space-3: 0.75rem;
  --fx-space-4: 1rem;
  --fx-space-5: 1.25rem;
  --fx-space-6: 1.5rem;
  --fx-space-8: 2rem;
  --fx-space-10: 2.5rem;
  --fx-space-12: 3rem;
  --fx-space-16: 4rem;
  --fx-space-20: 5rem;
  --fx-space-24: 6rem;

  /* ---------- Forma ---------- */
  --fx-radius-xs: 6px;
  --fx-radius-sm: 10px;
  --fx-radius-md: 14px;
  --fx-radius-lg: 20px;
  --fx-radius-xl: 28px;
  --fx-radius-pill: 999px;

  --fx-shadow-sm: 0 1px 2px rgb(45 36 29 / 0.06), 0 1px 1px rgb(45 36 29 / 0.04);
  --fx-shadow-md: 0 8px 20px -6px rgb(45 36 29 / 0.14), 0 2px 4px rgb(45 36 29 / 0.05);
  --fx-shadow-lg: 0 22px 48px -14px rgb(45 36 29 / 0.26), 0 4px 10px rgb(45 36 29 / 0.06);

  /* ---------- Movimento ---------- */
  --fx-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fx-dur-fast: 120ms;
  --fx-dur: 200ms;
  --fx-dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --fx-container: 1240px;
  --fx-gutter: clamp(16px, 4vw, 40px);
  --fx-stripe-width: 18px;
  --fx-scallop: 9px;
}

/* ---------- Tema escuro: torra de amendoim ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fx-falex-brand: var(--fx-red-500);
    --fx-falex-brand-hover: #e8262d;
    --fx-falex-brand-soft: #3a1311;
    --fx-falex-brand-text: var(--fx-red-300);
    --fx-jp-brand: #b81414;
    --fx-jp-brand-hover: #cc2020;
    --fx-jp-brand-soft: #361212;
    --fx-jp-brand-text: var(--fx-jp-red-300);
    --fx-jp-second: #2f9a67;
    --fx-jp-second-soft: #102a1e;

    --fx-bg: var(--fx-amendoim-950);
    --fx-surface: var(--fx-amendoim-900);
    --fx-surface-2: #261e18;
    --fx-sunken: #0c0907;
    --fx-inverse: var(--fx-amendoim-50);
    --fx-on-inverse: var(--fx-amendoim-900);
    --fx-text: var(--fx-amendoim-50);
    --fx-text-muted: var(--fx-amendoim-300);
    --fx-text-subtle: var(--fx-amendoim-400);
    --fx-border: #3a2f26;
    --fx-border-strong: #56473a;
    --fx-accent-soft: #3a2e0a;
    --fx-info: var(--fx-anil-300);
    --fx-info-soft: #13233f;
    --fx-success: var(--fx-folha-400);
    --fx-success-soft: #0f2a19;
    --fx-warning: var(--fx-gema-300);
    --fx-warning-soft: #33280a;
    --fx-danger: var(--fx-red-300);
    --fx-danger-soft: #3a1311;
    --fx-whatsapp: #177a3e;
    --fx-focus: var(--fx-anil-300);
    --fx-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --fx-shadow-md: 0 8px 20px -6px rgb(0 0 0 / 0.55);
    --fx-shadow-lg: 0 22px 48px -14px rgb(0 0 0 / 0.7);
  }
}

:root[data-theme="dark"] {
  --fx-falex-brand: var(--fx-red-500);
  --fx-falex-brand-hover: #e8262d;
  --fx-falex-brand-soft: #3a1311;
  --fx-falex-brand-text: var(--fx-red-300);
  --fx-jp-brand: #b81414;
  --fx-jp-brand-hover: #cc2020;
  --fx-jp-brand-soft: #361212;
  --fx-jp-brand-text: var(--fx-jp-red-300);
  --fx-jp-second: #2f9a67;
  --fx-jp-second-soft: #102a1e;

  --fx-bg: var(--fx-amendoim-950);
  --fx-surface: var(--fx-amendoim-900);
  --fx-surface-2: #261e18;
  --fx-sunken: #0c0907;
  --fx-inverse: var(--fx-amendoim-50);
  --fx-on-inverse: var(--fx-amendoim-900);
  --fx-text: var(--fx-amendoim-50);
  --fx-text-muted: var(--fx-amendoim-300);
  --fx-text-subtle: var(--fx-amendoim-400);
  --fx-border: #3a2f26;
  --fx-border-strong: #56473a;
  --fx-accent-soft: #3a2e0a;
  --fx-info: var(--fx-anil-300);
  --fx-info-soft: #13233f;
  --fx-success: var(--fx-folha-400);
  --fx-success-soft: #0f2a19;
  --fx-warning: var(--fx-gema-300);
  --fx-warning-soft: #33280a;
  --fx-danger: var(--fx-red-300);
  --fx-danger-soft: #3a1311;
  --fx-whatsapp: #177a3e;
  --fx-focus: var(--fx-anil-300);
  --fx-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --fx-shadow-md: 0 8px 20px -6px rgb(0 0 0 / 0.55);
  --fx-shadow-lg: 0 22px 48px -14px rgb(0 0 0 / 0.7);
}

/* ---------- Escopo de marca ---------- */
[data-brand="falex"] {
  --fx-brand: var(--fx-falex-brand);
  --fx-brand-hover: var(--fx-falex-brand-hover);
  --fx-brand-soft: var(--fx-falex-brand-soft);
  --fx-brand-text: var(--fx-falex-brand-text);
  --fx-accent: var(--fx-falex-accent);
  --fx-stripe-a: var(--fx-falex-stripe-a);
  --fx-stripe-b: var(--fx-falex-stripe-b);
}

[data-brand="jose-pepper"] {
  --fx-brand: var(--fx-jp-brand);
  --fx-brand-hover: var(--fx-jp-brand-hover);
  --fx-brand-soft: var(--fx-jp-brand-soft);
  --fx-brand-text: var(--fx-jp-brand-text);
  --fx-accent: var(--fx-jp-accent);
  --fx-stripe-a: var(--fx-jp-second);
  --fx-stripe-b: var(--fx-jp-brand);
}