/* ============================================================
   Cisnădie · Design Tokens
   Bazat pe brand.md + design-brief.md
   Inter variable · self-hosted WOFF2 (latin + latin-ext)
   ============================================================ */

/* ─── Inter Variable · self-host (latin + latin-ext) ────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ─── PALETĂ — 5 culori sursă (cool family · teal/cyan) ──── */
  --color-deep-teal:       #397367;   /* primary fill */
  --color-strong-cyan:     #63CCCA;   /* accent vibrant · doar surface/decorative */
  --color-ocean-mist:      #5DA399;   /* mid-tone, surfaces, hover */
  --color-dark-cyan:       #42858C;   /* heading accent, link variant */
  --color-gunmetal:        #35393C;   /* neutral text dark · 11.6:1 pe alb */

  /* ─── BACKGROUND-uri (warm-cool balance) ──────────────────── */
  --color-bg:              #F7F9F8;   /* off-white cu nuanță teal subtilă · document */
  --color-bg-elevated:     #FFFFFF;   /* card, modal, search field */
  --color-bg-section:      #EAF1EF;   /* secțiune alternantă (Ocean Mist 12% pe alb) */

  /* ─── TEXT (variante darkened pt. AA/AAA pe bg #F7F9F8) ──── */
  --color-text:            #35393C;   /* 11.4:1 AAA · body (Gunmetal) */
  --color-text-secondary:  #4F5559;   /* 7.4:1 AAA · meta */
  --color-text-tertiary:   #686E73;   /* 4.88:1 AA · timestamps, meta */

  /* ─── PRIMARY (Deep Teal) ─────────────────────────────────── */
  --color-primary:         #397367;   /* fills · button, header underline */
  --color-primary-text:    #285148;   /* 7.6:1 AAA · LINK INLINE darkened */
  --color-primary-hover:   #1C3B34;   /* 12.2:1 · hover state */
  --color-primary-tint:    #E1EDEA;   /* tint subtle pentru info panel */
  --color-primary-tint-2:  #C7DDD8;   /* tint hover */

  /* ─── SECONDARY (Dark Cyan — heading accent, variantă link) ─ */
  --color-secondary:       #42858C;
  --color-secondary-text:  #2C5E64;   /* 6.6:1 AAA */
  --color-secondary-tint:  #DCE9EB;

  /* ─── ACCENT (Strong Cyan — focus halo, surface "nou") ────── */
  --color-accent:          #63CCCA;   /* DOAR surface tint, focus halo */
  --color-accent-tint:     #DBF1F0;   /* "în consultare" bg */
  --color-accent-text:     #15686A;   /* 6.4:1 AAA · text "nou" pe alb */

  /* ─── SEMANTIC (adăugate · paleta cool n-acoperă) ─────────── */
  /* Daltonism check: hue 0°/33° vs paleta 160-188° → safe (ΔL >25 vs cyan) */
  --color-warning:         #B45309;   /* 5.1:1 AA · "în lucru" text */
  --color-warning-fill:    #F59E0B;   /* fill solid badge */
  --color-warning-tint:    #FEF3C7;

  --color-danger:          #B91C1C;   /* 5.9:1 AA · text error */
  --color-danger-fill:     #DC2626;   /* fill solid badge */
  --color-danger-tint:     #FEE2E2;

  --color-success:         #15686A;   /* alias accent-text — "adoptată" */
  --color-success-tint:    var(--color-primary-tint);

  /* ─── BORDERS ─────────────────────────────────────────────── */
  --color-border:          #DEE5E3;   /* cool-warm neutral */
  --color-border-strong:   #B4BFBC;
  --color-divider:         #E8EDEB;

  /* ─── FOCUS (Gunmetal outline + Strong Cyan halo) ─────────── */
  --color-focus:           #35393C;   /* outline solid 3px */
  --color-focus-halo:      #63CCCA;   /* shadow halo · 4px */

  /* ─── TIPOGRAFIE ──────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, sans-serif;

  /* Scale 1.25 (Major Third), baza 16px — Bringhurst */
  --fs-caption:   0.8125rem;   /* 13   · metadata, captions */
  --fs-body:      1rem;        /* 16   · niciodată sub */
  --fs-lead:      1.25rem;     /* 20   · hero subtitle */
  --fs-h3:        1.5625rem;   /* 25   · titlu secțiune */
  --fs-h2:        1.9375rem;   /* 31   · titlu pagină */
  --fs-h1:        2.4375rem;   /* 39   · hero · fluid jos */
  --fs-display:   3.0625rem;   /* 49   · rar */

  /* Leading whole-number (Lupton) — la 16px body */
  --lh-caption:   1.4;
  --lh-body:      1.625;       /* = 26px @16 · measure 66ch necesită leading generos */
  --lh-lead:      1.4;
  --lh-h3:        1.25;
  --lh-h2:        1.2;
  --lh-h1:        1.1;
  --lh-display:   1.05;

  /* Tracking */
  --tr-display: -0.015em;
  --tr-tight:   -0.01em;
  --tr-normal:   0;
  --tr-eyebrow:  0.08em;       /* ALL CAPS small caps */

  /* ─── SPACING 8px baseline (Müller-Brockmann) ─────────────── */
  --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;
  --space-10:  128px;

  /* Spacing responsive (fluid) */
  --space-page-pad:    clamp(16px, 4vw, 48px);
  --space-section-y:   clamp(48px, 8vh, 96px);
  --space-block-y:     clamp(24px, 4vh, 48px);

  /* ─── RHYTHM baseline ─────────────────────────────────────── */
  --rhythm-unit: 8px;
  --rhythm-line: 26px;          /* body line-height absolut · multipli pe vertical */

  /* ─── GRID 12-col ─────────────────────────────────────────── */
  --grid-cols: 12;
  --grid-gutter: 12px;          /* mobile */
  --container-max: 1280px;

  /* ─── RADIUS — document-flat, NU pillow ───────────────────── */
  --radius-xs: 2px;             /* inputs */
  --radius-sm: 4px;             /* chips, badges */
  --radius:    6px;             /* buttons */
  --radius-md: 8px;             /* cards */
  --radius-lg: 12px;            /* modals */
  /* NU 999px / pill — sober */

  /* ─── SHADOW — subtle, doar pentru depth funcțional ───────── */
  --shadow-xs: 0 1px 2px rgba(59, 31, 43, 0.04);
  --shadow:    0 2px 6px -1px rgba(59, 31, 43, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(59, 31, 43, 0.08);
  /* NU heavy shadows / glassmorphism */

  /* ─── MOTION — minimal, respectă reduced-motion ───────────── */
  --dur-fast:    100ms;
  --dur-normal:  160ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ─── Z-INDEX scale ───────────────────────────────────────── */
  --z-base:     1;
  --z-elev:    10;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast:10000;
}

/* ─── Responsive scale up (grid + container pad) ─────────────── */
@media (min-width: 640px) {
  :root { --grid-gutter: 20px; }
}
@media (min-width: 1024px) {
  :root { --grid-gutter: 24px; }
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── BASE RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'kern' 1, 'liga' 1, 'clig' 1, 'calt' 1;
}

/* Tabular nums pe documente, date, ID-uri */
.tabular,
.doc-number,
.date,
time,
[data-tabular] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Small caps pe acronime (HCL, PUZ, CL, CF) */
.smcp { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }

/* ─── HEADINGS (single family, hierarchy strict) ─────────────── */
h1, h2, h3, h4 {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  color: var(--color-text);
}
h1 {
  font-size: clamp(1.9375rem, 1.5rem + 2vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-display);
  font-weight: 800;
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-tight);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
}
h4 {
  font-size: var(--fs-lead);
  line-height: 1.3;
  font-weight: 600;
}

p { margin: 0 0 var(--space-4); }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
  display: inline-block;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-secondary);
  font-weight: 400;
  max-width: 60ch;
}

.prose {
  max-width: 66ch;   /* Bringhurst measure */
  line-height: var(--lh-body);
}

/* ─── LINK ───────────────────────────────────────────────────── */
a {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}
a:hover {
  color: var(--color-primary-hover);
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
  text-decoration: underline;
}

/* ─── BUTTON ─────────────────────────────────────────────────── */
button { font: inherit; cursor: pointer; }

::selection {
  background: var(--color-primary-tint);
  color: var(--color-text);
}