/* =============================================
   variables.css — Variabilele principale de design
   ✏️ EDITEAZĂ AICI culorile, fonturile, spațierile
   ============================================= */

:root {

  /* ------------------------------------------
     🎨 CULORI PRINCIPALE
     Schimbă valorile de mai jos cu culorile tale.
     Poți genera palete la: https://coolors.co
     ------------------------------------------ */

  /* Fundal */
  --color-bg:           #0d0d0d;       /* fundalul principal (negru/dark) */
  --color-bg-alt:       #141414;       /* fundal alternativ (secțiuni pare) */
  --color-bg-card:      #1a1a1a;       /* fundalul cardurilor */

  /* Text */
  --color-text:         #f0ece4;       /* text principal (alb cald) */
  --color-text-muted:   #9e9e9e;       /* text secundar/dezactivat */

  /* Accent (culoarea ta de brand) */
  --color-accent:       #c9a96e;       /* auriu — schimbă cu culoarea ta preferată */
  --color-accent-hover: #b8934f;       /* versiunea mai închisă la hover */

  /* Borduri */
  --color-border:       rgba(255,255,255,0.08);

  /* ------------------------------------------
     🔡 FONTURI
     Fontul principal e setat în index.html (Google Fonts)
     Schimbă valorile de mai jos să se potrivească.
     ------------------------------------------ */

  /* Titluri (heading) — elegant, serif */
  --font-heading: 'Cormorant Garamond', Georgia, serif;

  /* Corp text — curat, sans-serif */
  --font-body: 'Inter', system-ui, sans-serif;

  /* ------------------------------------------
     📐 MĂRIMI FONT (scară tipografică)
     ------------------------------------------ */
  --fs-xs:    0.75rem;   /*  12px */
  --fs-sm:    0.875rem;  /*  14px */
  --fs-base:  1rem;      /*  16px */
  --fs-lg:    1.125rem;  /*  18px */
  --fs-xl:    1.25rem;   /*  20px */
  --fs-2xl:   1.5rem;    /*  24px */
  --fs-3xl:   2rem;      /*  32px */
  --fs-4xl:   2.5rem;    /*  40px */
  --fs-5xl:   3.5rem;    /*  56px */
  --fs-hero:  5rem;      /*  80px */

  /* ------------------------------------------
     📏 SPAȚIERI (padding/margin sistem)
     ------------------------------------------ */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 8rem;

  /* ------------------------------------------
     📦 LAYOUT
     ------------------------------------------ */
  --container-max:   1280px;   /* lățimea maximă a conținutului */
  --container-pad:   1.5rem;   /* padding orizontal container */
  --section-pad-y:   6rem;     /* spațiul vertical al secțiunilor */

  /* ------------------------------------------
     🔲 BORDURI & UMBRE
     ------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 30px rgba(201,169,110,0.2);

  /* ------------------------------------------
     ⏱️ TRANZIȚII
     ------------------------------------------ */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;

  /* ------------------------------------------
     📱 NAVBAR
     ------------------------------------------ */
  --navbar-height: 70px;
}