/* UrmeVii — Token-uri de design
 * SINGURA sursa de adevar pentru culori, fonturi, spatieri.
 * Orice modificare de design incepe AICI.
 * ─────────────────────────────────────────────────────── */

:root {
  /* ── Culori brand ───────────────────────────────────── */
  --color-primary:      #1C1C1A;   /* negru granit */
  --color-primary-soft: #2E2E2B;   /* varianta mai deschisa pt hover */
  --color-accent:       #C4A24A;   /* auriu */
  --color-accent-soft:  #D4B86A;   /* auriu hover */
  --color-bg:           #F7F4EF;   /* crem */
  --color-bg-alt:       #EDE9E1;   /* crem mai inchis (sectiuni alternate) */
  --color-sage:         #6B7C5C;   /* verde sage */
  --color-muted:        #9B9690;   /* gri piatra */
  --color-border:       #D8D4CC;   /* border subtil */

  /* ── Culori semantice ──────────────────────────────── */
  --color-text:         var(--color-primary);
  --color-text-light:   #5A5853;
  --color-bg-page:      var(--color-bg);
  --color-link:         var(--color-accent);

  /* ── Stari ─────────────────────────────────────────── */
  --color-success:      #4A7C59;
  --color-success-bg:   #EAF4ED;
  --color-error:        #9B2335;
  --color-error-bg:     #FAE8EB;
  --color-warning:      #8A6200;
  --color-warning-bg:   #FFF4D6;
  --color-info:         #1A5F8A;
  --color-info-bg:      #E5F2FA;

  /* ── Tipografie ────────────────────────────────────── */
  --font-heading:       'Cormorant Garamond', Georgia, serif;
  --font-body:          'Lato', Arial, sans-serif;

  --text-xs:    0.75rem;     /*  12px */
  --text-sm:    0.875rem;    /*  14px */
  --text-base:  1rem;        /*  16px */
  --text-md:    1.125rem;    /*  18px */
  --text-lg:    1.25rem;     /*  20px */
  --text-xl:    1.5rem;      /*  24px */
  --text-2xl:   2rem;        /*  32px */
  --text-3xl:   2.5rem;      /*  40px */
  --text-4xl:   3.5rem;      /*  56px */

  --leading-tight:  1.25;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  /* ── Spatieri ──────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Border radius ─────────────────────────────────── */
  --radius-sm:  0.25rem;   /*  4px */
  --radius-md:  0.5rem;    /*  8px */
  --radius-lg:  1rem;      /* 16px */
  --radius-xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Umbre ─────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(28, 28, 26, 0.08);
  --shadow-md:   0 4px 16px rgba(28, 28, 26, 0.10);
  --shadow-lg:   0 8px 32px rgba(28, 28, 26, 0.12);

  /* ── Tranzitii ─────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ────────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  var(--space-4);

  /* ── Z-index ───────────────────────────────────────── */
  --z-header:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-8);
  }
}