/*
 * FolkBeauty – Design Token rendszer
 * MINDEN szín, tipográfia, spacing, shadow token itt van definiálva.
 * A komponens CSS-ek CSAK ezeket a változókat használják.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {

  /* ============================================================
     BRAND COLORS
     ============================================================ */
  --color-primary:    #3C3B63;   /* mély indigókék */
  --color-secondary:  #2F5748;   /* mély erdőzöld */

  /* Accent */
  --color-accent-1:   #939EBB;   /* tompa levendülás kék */
  --color-accent-2:   #A9B8B7;   /* zsályás szürkezöld */

  /* Soft backgrounds */
  --color-soft-1:     #DDD2CB;   /* meleg tört bézs */
  --color-soft-2:     #DFC4B9;   /* púderes rózsás bézs */

  /* Earth / neutral */
  --color-earth:      #685B4C;   /* meleg taupe barna */

  /* Neutral kiegészítők */
  --color-white:      #FFFFFF;
  --color-off-white:  #FAF8F6;
  --color-text:       #1E1D2E;
  --color-text-muted: #685B4C;
  --color-border:     #D8D0C8;

  /* ============================================================
     FOOTER COLOR WORLD
     ============================================================ */
  --color-footer-bg:      #2F5748;
  --color-footer-surface: #3C3B63;
  --color-footer-earth:   #685B4C;
  --color-footer-text:    #DDD2CB;
  --color-footer-link:    #A9B8B7;
  --color-footer-link-hover: #DFC4B9;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --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:  2.75rem;    /* 44px */
  --text-5xl:  4.5rem;     /* 72px */

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;

  /* ============================================================
     SPACING
     ============================================================ */
  --space-xs:  0.5rem;    /* 8px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  2rem;      /* 32px */
  --space-lg:  4rem;      /* 64px */
  --space-xl:  7rem;      /* 112px */

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-card:    0 2px 16px rgba(60, 59, 99, 0.08);
  --shadow-hover:   0 8px 32px rgba(60, 59, 99, 0.16);
  --shadow-overlay: 0 4px 24px rgba(30, 29, 46, 0.25);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1200px;
  --container-pad: 1.5rem;
  --header-height: 72px;
}