/* ============================================================
   REMZETTA OÜ — CSS Design Tokens
   All color, spacing, and typography variables for the site.
   ============================================================ */

:root {
  /* Color Palette */
  --color-primary:       #000000;
  --color-primary-dark:  #1A1A1A;
  --color-secondary:     #8A8178;
  --color-background:    #F6F1EB;
  --color-surface:       #FFFFFF;
  --color-text-primary:  #000000;

  /* Derived / Utility Colors */
  --color-card:          #EDEAE1;
  --color-accent:        #FD5A02;
  --color-border:        #E8E3DA;
  --color-error:         #C0392B;
  --color-success:       #27AE60;
  --color-text-muted:    #3B3B3B;
  --color-text-inverse:  #FFFFFF;

  /* Typography */
  --font-family:         'Albert Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --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:        2rem;       /* 32px */
  --font-size-2xl:       2.5rem;     /* 40px */
  --font-size-3xl:       3.75rem;    /* 60px */
  --font-size-4xl:       4.5rem;     /* 72px */

  --line-height-tight:   1.15;
  --line-height-heading: 1.2;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* Layout */
  --max-width:           1280px;
  --section-padding-y:   80px;
  --container-padding-x: 24px;

  /* Grid */
  --grid-gap:            24px;
  --grid-cols-desktop:   4;
  --grid-cols-tablet:    2;
  --grid-cols-mobile:    1;

  /* Components */
  --card-border-radius:  4px;
  --card-shadow:         0 1px 3px rgba(0, 0, 0, 0.05);
  --card-shadow-hover:   0 4px 12px rgba(0, 0, 0, 0.08);
  --btn-border-radius:   2px;
  --btn-padding:         14px 28px;
  --btn-padding-sm:      10px 20px;

  /* Navigation */
  --nav-height:          72px;

  /* Transitions */
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
}