/* ============================================================
   DESIGN SYSTEM — LOJA OFICIAL FIODORE COSMETICS
   tokens.css v1.1 — Fase 1 · Premium Clean
   ============================================================ */

/* ------------------------------------------------------------
   1. CORES
   ------------------------------------------------------------ */
:root {
  /* Primária — Verde Fiodore */
  --color-primary:        #12382F;
  --color-primary-dark:   #0B241E;
  --color-primary-hover:  #0E2D25;
  --color-primary-mid:    #1D5244;   /* hover suave em elementos grandes */
  --color-primary-soft:   #EAF2EF;
  --color-primary-border: #C2D9D3;

  /* Acento — Dourado Champagne (usar com moderação) */
  --color-gold:           #C8A96A;
  --color-gold-dark:      #A8893A;
  --color-gold-soft:      #F3E8CF;
  --color-gold-border:    #DEC99A;

  /* Fundo e Superfícies */
  --color-bg:             #FAF8F3;
  --color-surface:        #FFFFFF;
  --color-surface-soft:   #F5F3EE;
  --color-surface-alt:    #EEEAE3;

  /* Texto */
  --color-text:           #1A1A1A;
  --color-text-secondary: #3D3D3D;
  --color-text-muted:     #6B6B6B;
  --color-text-faint:     #A0A0A0;
  --color-text-inverse:   #FFFFFF;

  /* Bordas */
  --color-border:         #E2DDD5;
  --color-border-strong:  #C4BEB5;
  --color-border-focus:   #12382F;

  /* Feedback */
  --color-success:        #2A7050;
  --color-success-bg:     #E6F4ED;
  --color-warning:        #9C6F1E;
  --color-warning-bg:     #FEF3DC;
  --color-danger:         #C0392B;
  --color-danger-bg:      #FDECEB;
  --color-info:           #1E5FA8;
  --color-info-bg:        #EBF2FB;

  /* Overlay */
  --color-overlay:        rgba(18, 56, 47, 0.55);
  --color-scrim:          rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------------------
   2. TIPOGRAFIA
   ------------------------------------------------------------ */
:root {
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  /* Escala tipográfica */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.375rem;   /*  22px */
  --text-2xl:  1.75rem;    /*  28px */
  --text-3xl:  2.25rem;    /*  36px */
  --text-4xl:  3rem;       /*  48px */
  --text-5xl:  3.75rem;    /*  60px */

  /* Peso */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Altura de linha */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Espaçamento de letras */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.12em;
}

/* ------------------------------------------------------------
   3. ESPAÇAMENTO — sistema 4pt
   ------------------------------------------------------------ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;
  --space-11: 128px;
}

/* ------------------------------------------------------------
   4. BORDAS E RAIOS
   ------------------------------------------------------------ */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  36px;
  --radius-full: 9999px;
}

/* ------------------------------------------------------------
   5. SOMBRAS
   ------------------------------------------------------------ */
:root {
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 14px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 56px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-card: 0 2px 8px rgba(18,56,47,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-btn:  0 2px 8px rgba(18,56,47,0.30);
  --shadow-gold: 0 2px 12px rgba(200,169,106,0.25);
  --shadow-inner:inset 0 1px 3px rgba(0,0,0,0.06);
}

/* ------------------------------------------------------------
   6. TRANSIÇÕES
   ------------------------------------------------------------ */
:root {
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   220ms;
  --duration-slow:   340ms;

  --transition-fast:   var(--duration-fast) var(--ease-out);
  --transition-base:   var(--duration-base) var(--ease-out);
  --transition-slow:   var(--duration-slow) var(--ease-out);
  --transition-spring: 280ms var(--ease-spring);
}

/* ------------------------------------------------------------
   7. LAYOUT
   ------------------------------------------------------------ */
:root {
  --container-max:   1200px;
  --container-prose: 720px;
  --container-form:  480px;

  --header-bar-h:    38px;
  --header-main-h:   66px;
  --header-nav-h:    44px;
  --header-total:    148px;   /* bar + main + nav */

  --z-base:    0;
  --z-raised:  5;
  --z-sticky:  10;
  --z-fixed:   20;
  --z-overlay: 40;
  --z-modal:   100;
  --z-toast:   200;
}

/* Breakpoints — referência (usar via @media)
   xs:  360px   mobile pequeno
   sm:  480px   mobile grande
   md:  768px   tablet
   lg:  1024px  laptop
   xl:  1280px  desktop
   2xl: 1440px  wide
*/