/* ============================================================
   Cosmética Natural Lola — Design Tokens
   ============================================================
   Single source of truth for colors, type, spacing, etc.
   Every other CSS file must consume tokens from this file,
   never hardcode values.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLORS — Brand palette (from Figma)
     ---------------------------------------------------------- */
  --color-lavender-50:  #f5edfb;
  --color-lavender-100: #e9daf4; /* Figma: Rect 81 */
  --color-lavender-200: #d5cadd; /* Figma: Rect 84 */
  --color-lavender-400: #9c8aae;
  --color-lavender-600: #6b5582;
  --color-lavender-800: #3d2f55;
  --color-lavender-900: #271c39;

  --color-peach-50:  #fbf2e8;
  --color-peach-100: #eed7c0; /* Figma: Rect 82 */
  --color-peach-200: #e3c2a0;
  --color-peach-400: #c89669;
  --color-peach-600: #92653e;

  --color-cream-50:  #fbf6ee;
  --color-cream-100: #ebe0d4; /* Figma: Rect 83 */
  --color-cream-200: #d8c8b6;

  /* ----------------------------------------------------------
     COLORS — Neutrals (warm-toned to match the natural feel)
     ---------------------------------------------------------- */
  --color-ink-900: #1f1a26;  /* almost black with lavender hint */
  --color-ink-700: #3a3242;
  --color-ink-500: #6b6271;
  --color-ink-300: #a39ba9;
  --color-ink-100: #e2dde6;

  --color-paper:    #fefcf9;  /* off-white background */
  --color-surface:  #ffffff;
  --color-line:     #ece4d9;
  --color-divider:  #f3ede4;

  /* ----------------------------------------------------------
     COLORS — Semantic (status & UI)
     ---------------------------------------------------------- */
  --color-success: #5a8f6b;
  --color-success-bg: #e7f0e9;
  --color-warning: #c89669;
  --color-warning-bg: #fbf2e8;
  --color-error:   #b3543d;
  --color-error-bg: #f9e6df;
  --color-info:    #6b5582;
  --color-info-bg: #f5edfb;

  /* ----------------------------------------------------------
     COLORS — Semantic aliases (use these in components)
     ---------------------------------------------------------- */
  --color-bg:           var(--color-paper);
  --color-bg-alt:       var(--color-cream-50);
  --color-bg-section:   var(--color-cream-100);
  --color-text:         var(--color-ink-900);
  --color-text-muted:   var(--color-ink-500);
  --color-text-inverse: var(--color-paper);
  --color-border:       var(--color-line);
  --color-border-focus: var(--color-lavender-600);

  --color-brand:           var(--color-lavender-600);
  --color-brand-hover:     var(--color-lavender-800);
  --color-brand-soft:      var(--color-lavender-100);
  --color-brand-on:        var(--color-paper);

  --color-accent:        var(--color-peach-400);
  --color-accent-hover:  var(--color-peach-600);
  --color-accent-soft:   var(--color-peach-100);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Sizes — modular scale 1.25 (major third), base 16px */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-md:   1.125rem;    /* 18 */
  --text-lg:   1.25rem;     /* 20 */
  --text-xl:   1.5rem;      /* 24 */
  --text-2xl:  1.875rem;    /* 30 */
  --text-3xl:  2.25rem;     /* 36 */
  --text-4xl:  3rem;        /* 48 */
  --text-5xl:  3.75rem;     /* 60 */

  /* Weights — Open Sans common cuts */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.12em;

  /* ----------------------------------------------------------
     SPACING — 4px base, t-shirt sized
     ---------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  6rem;     /* 96 */
  --space-11:  8rem;     /* 128 */

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-content: 1200px; /* default for marketing pages */

  /* ----------------------------------------------------------
     RADIUS — soft, organic
     ---------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ----------------------------------------------------------
     SHADOWS — subtle, layered (warm tint)
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(31, 26, 38, 0.04);
  --shadow-sm: 0 2px 6px rgba(31, 26, 38, 0.06);
  --shadow-md: 0 4px 16px rgba(31, 26, 38, 0.08);
  --shadow-lg: 0 12px 32px rgba(31, 26, 38, 0.10);
  --shadow-xl: 0 24px 56px rgba(31, 26, 38, 0.14);

  /* Focus ring (accessibility) */
  --shadow-focus: 0 0 0 3px var(--color-lavender-100),
                  0 0 0 4px var(--color-lavender-600);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;

  /* ----------------------------------------------------------
     Z-INDEX scale
     ---------------------------------------------------------- */
  --z-base:    1;
  --z-dropdown: 10;
  --z-sticky:  20;
  --z-overlay: 30;
  --z-modal:   40;
  --z-toast:   50;
}