/* ============================================================================
   Deelbert — design tokens v2
   ----------------------------------------------------------------------------
   Dual-consumption: Jinja2 app (--color-* names) + React VAL0 build (--bg/
   --action/--good aliases). Ambele sisteme de denumire trăiesc în :root și se
   sincronizează prin var() — o singură sursă de adevăr.

   Arhitectura cromatică (3 straturi, docs/VISION.md):
     1. Fundație  — warm-sand/ivory: --color-bg → --bg, --surface, --border etc.
     2. Acțiune   — UN accent petrol #106b7d: --color-action → --action (AI inclus).
     3. Semantice — EXCLUSIV pentru semnal de date: scor, freshness, statusuri.
        good/mid/low NU înseamnă verde/portocaliu/roșu: low = charcoal #231f20 (calm).

   Fonturi: Hanken Grotesk (UI) + IBM Plex Mono (numere, date, chips mono).
   Tipografie 14px/1.45, spacing 4px grid, radii 7/10/14px.
   Dark mode: [data-theme=dark] complet (Deelbert dark palette).

   Deținut de UI/UX (teams/uiux/) — singurul fișier de cod al echipei.
   Frontend consumă; React build importă direct; extensie = același fișier.
   ========================================================================== */

/* Google Fonts — Hanken Grotesk (UI) + IBM Plex Mono (date/numere/mono-code) */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap");

:root {
  /* ========================================================================
     1. FUNDAȚIE — warm-sand/ivory (premium, calm; înlocuiește slate-ul rece)
     ======================================================================== */
  --color-bg:             #f7f4ee;  /* fundal aplicație (warm sand) */
  --color-surface:        #fffefb;  /* carduri, panouri (ivory) */
  --color-surface-muted:  #efe9df;  /* coloane kanban, zone secundare */
  --color-border:         #e7e0d3;  /* borduri implicite */
  --color-border-strong:  #d6cebd;  /* borduri accentuate */
  --color-text:           #1f1d1a;  /* text principal */
  --color-text-secondary: #4a463f;  /* text secundar (~6.5:1 pe --color-bg ✓ AA) */
  --color-meta:           #736d61;  /* text meta informativ: timestamps, provenance,
                                       meta-text (~4.6:1 ✓ AA — preferă față de
                                       --color-text-muted în cod nou) */
  --color-text-muted:     #736d61;  /* AA-SAFE (4.6:1) — același ca --color-meta;
                                       pentru cod nou preferă --color-meta (intenție clară) */
  --color-inverse-bg:     #1f1d1a;  /* nav, elemente inversate */
  --color-inverse-text:   #f4f1ea;
  --color-inverse-text-secondary: #d0c9bb;

  /* ========================================================================
     2. ACȚIUNE — UN singur accent petrol/teal (toate acțiunile, inclusiv AI)
     ======================================================================== */
  --color-action:           #106b7d;  /* petrol — butoane primare, linkuri (~5.3:1 pe alb ✓ AA) */
  --color-action-hover:     #0c5566;
  --color-action-soft-bg:   #e9f4f6;  /* chip-uri skills, hover soft, picker highlight */
  --color-action-soft-text: #0b5867;  /* text pe action-soft (9:1 ✓) */
  --color-action-soft-border: #c6e6eb; /* bordura link-badge, picker items */
  --color-focus-ring:       #106b7d;   /* inel de focus — `outline: 2px solid` în base.html */

  /* ========================================================================
     3. SEMANTICE — EXCLUSIV semnal despre date (scor, freshness, statusuri)
     ======================================================================== */

  /* good — scor ≥ 70, freshness < 14 zile, hired (verde warm) */
  --color-positive:        #2f8f5f;
  --color-positive-bg:     #ecf5ef;
  --color-positive-border: #bbddc6;

  /* mid — scor 40–69, freshness 14–60 zile, offer (amber warm) */
  --color-warning:        #c2820a;
  --color-warning-bg:     #fbf2dd;
  --color-warning-border: #f0d690;

  /* low — scor < 40, freshness > 60 zile, rejected (charcoal calm — nu roșu alarm) */
  --color-negative:        #231f20;
  --color-negative-bg:     #edeae4;
  --color-negative-border: #cfc9bf;

  /* ========================================================================
     SCORURI — praguri + tokeni (referință din JS via getPropertyValue)
     ======================================================================== */
  --score-threshold-high: 70;
  --score-threshold-mid:  40;
  /* high: scor ≥ 70 */
  --score-high-text:   var(--color-positive);
  --score-high-bg:     var(--color-positive-bg);
  --score-high-border: var(--color-positive-border);
  /* mid: 40–69 */
  --score-mid-text:    var(--color-warning);
  --score-mid-bg:      var(--color-warning-bg);
  --score-mid-border:  var(--color-warning-border);
  /* low: < 40 (charcoal — calm, nu alarmist) */
  --score-low-text:    var(--color-negative);
  --score-low-bg:      var(--color-negative-bg);
  --score-low-border:  var(--color-negative-border);
  /* none: nescored */
  --score-none-text:   var(--color-text-secondary);
  --score-none-bg:     var(--color-surface-muted);
  --score-none-border: var(--color-border-strong);

  /* ========================================================================
     FRESHNESS — trepte (praguri citite din JS via getPropertyValue)
     ======================================================================== */
  --fresh-days-recent-max: 14;
  --fresh-days-stale-min:  60;
  --fresh-recent-text:   var(--color-positive);
  --fresh-recent-bg:     var(--color-positive-bg);
  --fresh-recent-border: var(--color-positive-border);
  --fresh-aging-text:    var(--color-warning);
  --fresh-aging-bg:      var(--color-warning-bg);
  --fresh-aging-border:  var(--color-warning-border);
  --fresh-stale-text:    var(--color-negative);
  --fresh-stale-bg:      var(--color-negative-bg);
  --fresh-stale-border:  var(--color-negative-border);
  --fresh-unknown-text:  var(--color-meta);

  /* ========================================================================
     STATUSURI PIPELINE — hues unice per stagiu (ramp warm-leaning)
     ======================================================================== */
  --status-new-bg:              #efe9df;  --status-new-text:              #6b6f7a;  --status-new-border:              #d6cebd;
  --status-contacted-bg:        #e6f4f6;  --status-contacted-text:        #3f7c86;  --status-contacted-border:        #b0d9e0;
  --status-in-conversation-bg:  #e5eef7;  --status-in-conversation-text:  #2f6f9e;  --status-in-conversation-border:  #afc8e3;
  --status-interview-bg:        #f0eaf7;  --status-interview-text:        #7b5ea8;  --status-interview-border:        #cdb8e8;
  --status-offer-bg:            #fbf2dd;  --status-offer-text:            #c2820a;  --status-offer-border:            #f0d690;
  --status-hired-bg:            #ecf5ef;  --status-hired-text:            #2f8f5f;  --status-hired-border:            #bbddc6;
  --status-rejected-bg:         #edeae4;  --status-rejected-text:         #231f20;  --status-rejected-border:         #cfc9bf;
  --status-on-hold-bg:          #efe9df;  --status-on-hold-text:          #736d61;  --status-on-hold-border:          #d6cebd;

  /* ========================================================================
     BUTOANE — sistem semantic (PATTERNS.md §11), 4 roluri
     ======================================================================== */
  --btn-primary-bg:        var(--color-action);
  --btn-primary-bg-hover:  var(--color-action-hover);
  --btn-primary-text:      #ffffff;
  --btn-secondary-bg:      #4a463f;  /* warm dark (--text-2) */
  --btn-secondary-bg-hover: var(--color-text);
  --btn-secondary-text:    #ffffff;
  --btn-ghost-bg:          var(--color-surface);
  --btn-ghost-bg-hover:    var(--color-surface-muted);
  --btn-ghost-text:        var(--color-text-secondary);
  --btn-ghost-border:      var(--color-border-strong);
  --btn-danger-bg:         var(--color-surface);
  --btn-danger-bg-hover:   var(--color-negative-bg);
  --btn-danger-text:       var(--color-negative);
  --btn-danger-border:     var(--color-negative-border);
  /* Geometrie */
  --control-height:    36px;
  --control-height-sm: 30px;
  --btn-padding-x:     var(--space-4);
  --btn-padding-x-sm:  var(--space-3);
  --btn-font-size:     var(--font-size-sm);
  --btn-font-weight:   var(--font-weight-semibold);
  --btn-radius:        var(--radius-md);

  /* ========================================================================
     TIPOGRAFIE — Hanken Grotesk (UI) + IBM Plex Mono (numere/date)
     ======================================================================== */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
  --font-size-xs:   12px;   /* meta, timestamps, badge-uri */
  --font-size-sm:   13px;   /* text secundar, tabele dense */
  --font-size-base: 14px;   /* corpul aplicației */
  --font-size-md:   16px;   /* subtitluri de panou */
  --font-size-lg:   18px;   /* titluri de secțiune */
  --font-size-xl:   22px;   /* titlul paginii */
  --line-height-tight: 1.3;
  --line-height-base:  1.45;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ========================================================================
     SPAȚIERE — multipli de 4px
     ======================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ========================================================================
     FORME, UMBRE, MIȘCARE
     ======================================================================== */
  --radius-sm:   7px;     /* badge-uri, chips */
  --radius-md:   10px;    /* butoane, inputs, pickere */
  --radius-lg:   14px;    /* carduri, panouri, modaluri */
  --radius-full: 9999px;  /* pills, avatare */
  --radius:      var(--radius-md);  /* alias React build */

  --shadow-card:       0 1px 2px rgba(31,29,26,.06), 0 1px 1px rgba(31,29,26,.04);
  --shadow-card-hover: 0 2px 8px rgba(31,29,26,.09), 0 1px 2px rgba(31,29,26,.05);
  --shadow-toast:      0 12px 32px rgba(31,29,26,.16), 0 4px 8px rgba(31,29,26,.07);
  /* Alias React build */
  --shadow-sm: var(--shadow-card);
  --shadow:    var(--shadow-card-hover);
  --shadow-lg: var(--shadow-toast);

  /* Focus — box-shadow (React build) + color (Jinja2 outline pattern în base.html) */
  --focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-action);

  --duration-fast:      150ms;
  --duration-base:      200ms;
  --easing-standard:    cubic-bezier(0.2, 0, 0, 1);
  --toast-duration-ms:  3000;

  --z-toast:   50;
  --z-overlay: 40;

  /* Layout React build */
  --side-w:   232px;
  --row-pad:  11px;

  /* ========================================================================
     ALIASURI REACT VAL0 BUILD — mapate pe --color-* existente.
     Jinja2 ignoră aceste proprietăți; React le consumă direct.
     Regulă: alias = var(--color-corespondent) — valoarea e centralizată sus.
     ======================================================================== */

  /* Foundation */
  --bg:       var(--color-bg);
  --surface:  var(--color-surface);
  --surface-2: var(--color-surface-muted);
  --surface-3: #e3dccf;  /* extra nivel warm, fără echivalent în sistemul vechi */
  --text:     var(--color-text);
  --text-2:   var(--color-text-secondary);
  --text-3:   var(--color-meta);
  --text-4:   #a39c8c;   /* placeholder/decorativ — NU folosi pentru text informativ */
  --border:   var(--color-border);
  --border-2: var(--color-border-strong);

  /* Action */
  --action:        var(--color-action);
  --action-hover:  var(--color-action-hover);
  --action-soft:   var(--color-action-soft-bg);
  --action-soft-2: var(--color-action-soft-border);
  --action-text:   var(--color-action-soft-text);
  --action-fg:     #ffffff;

  /* Semantic */
  --good:    var(--color-positive);   --good-bg: var(--color-positive-bg);   --good-bd: var(--color-positive-border);
  --mid:     var(--color-warning);    --mid-bg:  var(--color-warning-bg);    --mid-bd:  var(--color-warning-border);
  --low:     var(--color-negative);   --low-bg:  var(--color-negative-bg);   --low-bd:  var(--color-negative-border);
  --neutral: var(--color-meta);       --neutral-bg: var(--color-surface-muted); --neutral-bd: var(--color-border-strong);

  /* Pipeline hues (alias singular — bg/bd derivate mai sus ca --status-*-bg/bd) */
  --st-new:   #6b6f7a;
  --st-cont:  #3f7c86;
  --st-conv:  #2f6f9e;
  --st-int:   #7b5ea8;
  --st-offer: var(--color-warning);
  --st-hired: var(--color-positive);
  --st-rej:   var(--color-negative);
  --st-hold:  var(--color-meta);

  /* Font aliases */
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* Brand — wordmark DeelBert + wash (NU pe UI funcțional) */
  --gold:       #f2c200;  /* alias backward compat */
  --brand-gold:  #f2c200;  /* dot 1 / "Bert" text */
  --brand-gold-2: #9c7d1f; /* dot 2 */
  --brand-gold-3: #5e4b16; /* dot 3 */
  --brand-ink:   #1c1a17;  /* Mark tile bg (favicon / ext header) */
  --wash-gold: linear-gradient(180deg, rgba(242,194,0,.30), rgba(242,194,0,0) 360px);
}

/* ============================================================================
   DARK MODE — Deelbert dark palette (VAL0; Jinja2 activat prin <body data-theme=dark>)
   ============================================================================ */
[data-theme="dark"] {
  /* Foundation */
  --color-bg:             #141210;
  --color-surface:        #211f1b;
  --color-surface-muted:  #2b2823;
  --color-border:         #35312a;
  --color-border-strong:  #48423a;
  --color-text:           #f4f1ea;
  --color-text-secondary: #d0c9bb;
  --color-meta:           #9e978a;
  --color-text-muted:     #9e978a;
  --color-inverse-bg:     #f4f1ea;
  --color-inverse-text:   #1f1d1a;
  --color-inverse-text-secondary: #4a463f;

  /* Action dark */
  --color-action:           #1f93a8;
  --color-action-hover:     #2aa9bf;
  --color-action-soft-bg:   #0d2b32;
  --color-action-soft-text: #7fd6e6;
  --color-action-soft-border: #133e47;
  --color-focus-ring:       #1f93a8;

  /* Semantic dark */
  --color-positive:        #4aba7e;
  --color-positive-bg:     #0f2a1d;
  --color-positive-border: #235a3e;
  --color-warning:         #e2a92a;
  --color-warning-bg:      #2c2410;
  --color-warning-border:  #5c4a1c;
  --color-negative:        #cabfae;
  --color-negative-bg:     #262219;
  --color-negative-border: #463f30;

  /* Pipeline hues dark (unchanged hues, adjusted for dark surface) */
  --status-new-bg:             #2b2823;  --status-new-text:             #9ea2ad;  --status-new-border:             #48423a;
  --status-contacted-bg:       #0d2b32;  --status-contacted-text:       #4fb8ca;  --status-contacted-border:       #133e47;
  --status-in-conversation-bg: #0d1e30;  --status-in-conversation-text: #6b9fd4;  --status-in-conversation-border: #1b3a56;
  --status-interview-bg:       #201535;  --status-interview-text:       #b08dd4;  --status-interview-border:       #3d2562;
  --status-offer-bg:           #2c2410;  --status-offer-text:           #e2a92a;  --status-offer-border:           #5c4a1c;
  --status-hired-bg:           #0f2a1d;  --status-hired-text:           #4aba7e;  --status-hired-border:           #235a3e;
  --status-rejected-bg:        #262219;  --status-rejected-text:        #cabfae;  --status-rejected-border:        #463f30;
  --status-on-hold-bg:         #27221a;  --status-on-hold-text:         #9e978a;  --status-on-hold-border:         #463f30;

  /* Buttons dark */
  --btn-secondary-bg:       #d0c9bb;
  --btn-secondary-bg-hover: #f4f1ea;
  --btn-secondary-text:     #1f1d1a;

  /* Shadows dark */
  --shadow-card:       0 1px 2px rgba(0,0,0,.45);
  --shadow-card-hover: 0 2px 8px rgba(0,0,0,.5);
  --shadow-toast:      0 16px 40px rgba(0,0,0,.6);
  --shadow-sm: var(--shadow-card);
  --shadow:    var(--shadow-card-hover);
  --shadow-lg: var(--shadow-toast);

  /* Prototype alias overrides for dark (auto via var() chain — nu necesită redefinire) */
  --surface-3: #38342d;
  --text-4:    #6f685c;
  --st-rej:    #cabfae;
}