/* ==========================================================================
   Mind Architect — Tokens
   Sursa unică de adevăr pentru culoare, tipografie, spațiere, raze, umbre,
   z-index și motion. Componentele nu conțin nicio valoare hardcodată.
   ========================================================================== */

:root {
  /* --- Culori -------------------------------------------------------- */
  --claritate: #FFFCF8;
  --prezenta: #FFFFFF;
  --impuls: #EB6336;
  --impuls-light: #F2915E;
  --impuls-dark: #C74B22;
  --implinire: #E8B21A;
  --implinire-dark: #9F6A0C;
  --profunzime: #17140F;
  --reflectie: #7A7468;
  --reflectie-light: #7B7465;
  --liniste: #EEEAE1;

  /* Derivate — exclusiv din culorile de mai sus */
  --gradient-impuls: linear-gradient(135deg, var(--impuls) 0%, var(--impuls-light) 100%);
  --impuls-wash: rgba(235, 99, 54, .08);
  --impuls-wash-strong: rgba(235, 99, 54, .12);
  --implinire-wash: rgba(232, 178, 26, .12);
  --profunzime-wash: rgba(23, 20, 15, .06);
  --focus-ring: 0 0 0 2px var(--prezenta), 0 0 0 4px var(--impuls);

  /* Suprafata "cerneala" — header, footer, card feature. Profunzime e si
     culoare de text: se inverseaza cu tema. Aceste doua tokens tin suprafata
     inchisa in ambele teme, cu aceleasi hexuri din paleta. */
  --surface-invers: #17140F;
  --on-invers: #FFFCF8;

  /* Portocaliul si auriul ca TEXT. Impuls dark si Implinire dark raman
     culori de fundal si de hover; ca text au nevoie de o treapta in plus,
     pentru ca stau adesea peste propriul lor wash. In tema intunecata rolul
     e preluat de capetele deschise ale paletei. */
  --impuls-text: #BC4720;
  --implinire-text: #9A670C;

  /* --- Tipografie ---------------------------------------------------- */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;

  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  --fs-h2: clamp(1.875rem, 1.55rem + 1.4vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 1.2rem + .65vw, 1.75rem);
  --fs-h4: 1.1rem;
  --fs-lead: clamp(1.1rem, 1.03rem + .3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;

  --lh-tight: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --ls-heading: -0.015em;
  --measure: 64ch;

  /* --- Spațiere (grid 8px) ------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --section-y: var(--sp-9);

  /* --- Raze ----------------------------------------------------------- */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-full: 999px;

  /* --- Umbre ---------------------------------------------------------- */
  --shadow-card:       0 2px 4px rgba(23,20,15,.04), 0 10px 20px rgba(23,20,15,.05), 0 28px 48px rgba(23,20,15,.06);
  --shadow-card-hover: 0 3px 6px rgba(23,20,15,.05), 0 14px 26px rgba(23,20,15,.07), 0 36px 60px rgba(23,20,15,.08);
  --shadow-btn:        0 2px 5px rgba(235,99,54,.2),  0 6px 14px rgba(235,99,54,.18);
  --shadow-btn-hover:  0 3px 7px rgba(235,99,54,.24), 0 10px 20px rgba(235,99,54,.24);
  --shadow-btn-dark:   0 2px 5px rgba(23,20,15,.14),  0 6px 14px rgba(23,20,15,.12);
  --shadow-icon:       0 2px 6px rgba(235,99,54,.15);

  /* --- Bordură --------------------------------------------------------- */
  --hairline: 1px solid var(--liniste);
  --card-border: 0 solid transparent;

  /* --- Z-index --------------------------------------------------------- */
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 100;
  --z-modal: 110;

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-reveal: ease;
  --t-btn: 220ms;
  --t-card: 260ms;
  --t-reveal: 550ms;
  --reveal-shift: 24px;
  --lift-btn: -2px;
  --lift-card: -6px;

  /* --- Grid ------------------------------------------------------------ */
  --container: 1180px;
  --gutter: 16px;
  --margin: 20px;
  --columns: 4;
}

@media (min-width: 768px) {
  :root { --gutter: 20px; --margin: 32px; --columns: 8; }
}

@media (min-width: 1200px) {
  :root { --gutter: 24px; --margin: 32px; --columns: 12; }
}

@media (max-width: 767px) {
  :root { --section-y: var(--sp-8); }
}

/* --- Dark mode ---------------------------------------------------------
   Impuls și Împlinire rămân neschimbate — sunt culori de lumină, nu de
   suprafață. Suprafețele ridicate primesc hairline, pentru că umbra nu se
   mai vede pe fundal închis. */
[data-theme="dark"] {
  --claritate: #15130F;
  --prezenta: #211E17;
  --profunzime: #FBFBF9;
  --reflectie: #ABA396;
  --reflectie-light: #8C8576;
  --liniste: #2E2A21;

  --surface-invers: #211E17;
  --on-invers: #FBFBF9;
  --impuls-text: #F2915E;
  --implinire-text: #E8B21A;
  --profunzime-wash: rgba(251, 251, 249, .08);
  --card-border: 1px solid var(--liniste);
  --shadow-card:       0 2px 4px rgba(0,0,0,.24), 0 10px 20px rgba(0,0,0,.28);
  --shadow-card-hover: 0 3px 6px rgba(0,0,0,.28), 0 14px 26px rgba(0,0,0,.34);
  --shadow-btn-dark:   0 2px 5px rgba(0,0,0,.34),  0 6px 14px rgba(0,0,0,.28);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-btn: 1ms;
    --t-card: 1ms;
    --t-reveal: 1ms;
    --reveal-shift: 0px;
    --lift-btn: 0px;
    --lift-card: 0px;
  }
}

/* --- Densitate -----------------------------------------------------------
   Implicit, secțiunile respiră larg: 96px pe desktop, 64px pe mobil.
   Varianta compactă strânge ritmul paginii fără să atingă componentele și
   se activează cu data-density="compact" pe <body>. Scoaterea atributului
   readuce ritmul implicit. */
:root { --section-head-gap: var(--sp-7); }

[data-density="compact"] {
  --section-y: var(--sp-8);
  --section-head-gap: var(--sp-6);
}
@media (max-width: 767px) {
  [data-density="compact"] { --section-y: var(--sp-7); }
}