/* ============================================================
   COMPUTER NATION — STRATUL DE TOKENI
   Fundatia sistemului de design. Nimic din acest fisier nu
   stilizeaza componente; doar defineste vocabularul.

   Ordine: primitive -> semantice -> scari -> miscare
   ============================================================ */

/* ---------- 1. SCARI INDEPENDENTE DE TEMA ---------- */
:root {
  /* Tipografie — scara modulara ~1.25, valori rotunjite la pixel intreg */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;   /* baza */
  --text-lg:  18px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  /* Greutati reale. Fara 950 sau 850 — acelea nu exista. */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Inaltimi de rand */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;

  /* Spatiere in ritm de 4px */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Colturi */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* Latimi */
  --container: 1160px;
  --container-narrow: 780px;

  /* Miscare — durate scurte, curbe naturale */
  --dur-instant: 120ms;
  --dur-fast:    200ms;
  --dur-base:    320ms;
  --dur-slow:    520ms;

  --ease-out:   cubic-bezier(.22, 1, .36, 1);      /* intrare, decelerare ferma */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* usor elastic, doar accente */

  --font: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- 2. PALETA A — AMBER RAFINAT (implicita) ---------- */
:root,
[data-palette="amber"] {
  /* #a85610 nu e ales estetic, ci masurat: amber deschis nu atinge
     raportul 4.5 pe fundal alb. La #c2691a da 3.94 — pica. Aici da 5.25. */
  --accent:          #a85610;
  --accent-hover:    #8f4a0c;
  --accent-contrast: #ffffff;
  --accent-soft:     rgba(168, 86, 16, .12);
}
[data-palette="amber"][data-theme="dark"],
[data-theme="dark"] {
  --accent:          #e08c3c;
  --accent-hover:    #f0a15a;
  --accent-contrast: #1a1206;
  --accent-soft:     rgba(224, 140, 60, .16);
}

/* ---------- 3. PALETA B — ALBASTRU TEHNIC ---------- */
[data-palette="blue"] {
  --accent:          #1d5fd0;
  --accent-hover:    #164ba6;
  --accent-contrast: #ffffff;
  --accent-soft:     rgba(29, 95, 208, .12);
}
[data-palette="blue"][data-theme="dark"] {
  --accent:          #5b9bff;
  --accent-hover:    #7db0ff;
  --accent-contrast: #071426;
  --accent-soft:     rgba(91, 155, 255, .16);
}

/* ---------- 4. PALETA C — INDIGO PROFUND ---------- */
[data-palette="indigo"] {
  --accent:          #5b45d6;
  --accent-hover:    #4835b3;
  --accent-contrast: #ffffff;
  --accent-soft:     rgba(91, 69, 214, .12);
}
[data-palette="indigo"][data-theme="dark"] {
  --accent:          #9885ff;
  --accent-hover:    #b0a1ff;
  --accent-contrast: #100a2e;
  --accent-soft:     rgba(152, 133, 255, .18);
}

/* ---------- 5. SUPRAFETE SI TEXT — TEMA DESCHISA ---------- */
[data-theme="light"] {
  --bg:             #f6f4f1;
  --bg-soft:        #ece8e2;
  --surface:        #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f2efeb;

  --text:        #16130f;
  --text-muted:  #5f584f;
  --text-subtle: #8b8279;

  --border:        #e0dad2;
  --border-strong: #c4bab0;

  --nav:   #fffdfb;
  --chip:  #efeae3;
  --field: #ffffff;
  --field-focus: #fffaf4;

  --shadow-sm: 0 1px 2px rgba(22, 19, 15, .06),
               0 2px 8px rgba(22, 19, 15, .04);
  --shadow-md: 0 4px 12px rgba(22, 19, 15, .07),
               0 12px 32px rgba(22, 19, 15, .06);
  --shadow-lg: 0 12px 28px rgba(22, 19, 15, .10),
               0 32px 64px rgba(22, 19, 15, .08);

  --success: #15803d;  --success-bg: rgba(21, 128, 61, .10);  --success-border: rgba(21, 128, 61, .28);
  --warning: #a16207;  --warning-bg: rgba(161, 98, 7, .10);   --warning-border: rgba(161, 98, 7, .28);
  --danger:  #b91c1c;  --danger-bg:  rgba(185, 28, 28, .09);  --danger-border:  rgba(185, 28, 28, .26);
  --info:    #1d4ed8;  --info-bg:    rgba(29, 78, 216, .09);  --info-border:    rgba(29, 78, 216, .26);
}

/* ---------- 6. SUPRAFETE SI TEXT — TEMA INCHISA ---------- */
[data-theme="dark"] {
  --bg:             #0a0e15;
  --bg-soft:        #0f141d;
  --surface:        #141a24;
  --surface-raised: #1a212d;
  --surface-sunken: #0d1219;

  --text:        #f5f7fa;
  --text-muted:  #a3adbd;
  --text-subtle: #78838f;

  --border:        #262f3d;
  --border-strong: #3d4859;

  --nav:   #0d121a;
  --chip:  #1e2633;
  --field: #0e141d;
  --field-focus: #131b26;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32),
               0 2px 8px rgba(0, 0, 0, .24);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .38),
               0 14px 36px rgba(0, 0, 0, .30);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, .46),
               0 36px 72px rgba(0, 0, 0, .38);

  --success: #4ade80;  --success-bg: rgba(74, 222, 128, .13);  --success-border: rgba(74, 222, 128, .30);
  --warning: #fbbf24;  --warning-bg: rgba(251, 191, 36, .13);  --warning-border: rgba(251, 191, 36, .30);
  --danger:  #f87171;  --danger-bg:  rgba(248, 113, 113, .13); --danger-border:  rgba(248, 113, 113, .30);
  --info:    #60a5fa;  --info-bg:    rgba(96, 165, 250, .13);  --info-border:    rgba(96, 165, 250, .30);
}

/* ============================================================
   7. PUNTE DE COMPATIBILITATE
   Vechiul CSS foloseste alte nume, iar patru dintre ele nu au
   fost definite niciodata (--border, --surface-soft, --danger,
   --success). Aliasurile de mai jos repara instant componentele
   rupte, fara sa atinga vechiul fisier.
   De sters cand vechiul computer-nation.css dispare.
   ============================================================ */
:root {
  --line:         var(--border);
  --line-strong:  var(--border-strong);
  --surface-2:    var(--surface-sunken);
  --surface-soft: var(--surface-sunken);
  --muted:        var(--text-muted);
  --red:          var(--danger);
  --green:        var(--success);
  --amber:        var(--warning);
  --blue:         var(--info);
  --accent-dark:  var(--accent-hover);
  --shadow:       var(--shadow-lg);
  --shadow-soft:  var(--shadow-md);
}