/* =====================================================================
   YeY, stilul de sticlă („Sticlă mată", paleta D „Chihlimbar pe titan")
   VALORILE DE DESIGN, pentru tema întunecată și cea luminoasă.

   Sursa fiecărei valori: apps/mobile/src/shared/theme/directions.ts din YeY
   (starea din 10 octombrie 2026). Valorile marcate „(tradus)" nu există ca
   atare în aplicație, fiindcă aplicația e React Native și estompează cu un
   modul nativ (expo-blur), nu cu CSS; sunt alese să arate la fel în browser.
   Toate celelalte sunt copiate exact.

   Tema se alege cu atributul data-theme="dark" sau data-theme="light" pe
   <html>. Fără atribut, tema e cea întunecată, ca în aplicație. Dacă vrei să
   urmeze setarea sistemului, yey-glass.js o face (YeyGlass.followSystemTheme()).
   ===================================================================== */

:root {
  /* ---------- tonurile paletei „Chihlimbar" (aceleași pe ambele teme) ---------- */
  --yg-honey: #FFE3A3;          /* miere: lumina caldă de sus și eticheta butonului principal pe noapte */
  --yg-amber: #FFB547;          /* chihlimbar: prețul, butonul principal, butonul de bani */
  --yg-titan: #9DB0BF;          /* titan: lumina rece din dreapta */
  --yg-gold-deep: #8A6A30;      /* aurul închis, pentru text auriu pe fond deschis */
  --yg-ink-light: #F4F1EA;      /* literele de pe fond închis */
  --yg-ink-dark: #14120E;       /* literele de pe fond deschis */

  /* ---------- rotunjiri ---------- */
  --yg-r-sm: 7px;
  --yg-r-md: 10px;              /* butoane, câmpuri, plăcuțe mici */
  --yg-r-lg: 16px;              /* plăci, panoul de peste fotografie, bara de sus */
  --yg-r-xl: 20px;              /* ferestrele de dialog */
  --yg-r-pill: 999px;
  --yg-r-chip: 8px;
  --yg-r-tabbar: 18px;
  --yg-r-sheet: 24px;           /* foaia care urcă de jos */
  --yg-r-row: 18px;             /* rândul de listă (rotunjirea veche, păstrată în aplicație) */

  /* ---------- spațieri (scara aplicației) ---------- */
  --yg-s-xs: 4px;
  --yg-s-sm: 8px;
  --yg-s-md: 12px;
  --yg-s-lg: 16px;
  --yg-s-xl: 24px;
  --yg-s-xxl: 32px;
  --yg-s-xxxl: 48px;

  /* ---------- dimensiuni ---------- */
  --yg-touch: 44px;             /* cea mai mică țintă pentru deget; nimic nu coboară sub ea */
  --yg-button-h: 46px;
  --yg-field-h: 48px;           /* 44 + 4 */
  --yg-chip-h: 30px;
  --yg-tabbar-h: 64px;
  --yg-tabbar-gap: 12px;        /* bara de jos plutește la 12px de margini */
  --yg-tab-pill-w: 64px;
  --yg-tab-pill-h: 32px;
  --yg-tab-sell-w: 44px;
  --yg-empty-size: 104px;       /* plăcuța de sticlă a unui ecran gol */
  --yg-empty-glyph: 42px;

  /* ---------- grosimile muchiilor de sticlă ---------- */
  /* Sus prinde lumina, deci e cea mai groasă și cea mai luminoasă. */
  --yg-rim-top-w: 1.2px;
  --yg-rim-bottom-w: 1px;
  --yg-rim-side-w: 0.5px;
  --yg-field-border-w: 1px;

  /* ---------- estomparea (backdrop-filter) ---------- */
  /* (tradus) Aplicația folosește expo-blur cu „intensitate" 0-100 și nuanța „dark".
     Intensitățile originale: panoul de peste fotografie și bara de sus 24,
     foaia și dialogul 40 (noapte) / 44 (zi), pânza difuză 100.
     Plăcile și butoanele NU estompează în aplicație (stau pe un fundal neted);
     estomparea lor vine din macheta HTML aprobată (docs/design/YeY-sticla-mata-macheta.html). */
  --yg-blur-plate: 22px;  --yg-sat-plate: 150%;
  --yg-blur-button: 18px; --yg-sat-button: 160%;
  --yg-blur-panel: 16px;  --yg-sat-panel: 140%;
  --yg-blur-modal: 26px;  --yg-sat-modal: 140%;
  --yg-blur-diffuse: 80px;

  /* ---------- tipografie ---------- */
  --yg-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Prețul de pe fotografie e la grosimea 200, pe care Geist nu o are în aplicație:
     acolo îl desenează fontul sistemului (SF Pro pe iPhone). */
  --yg-font-thin: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", system-ui, sans-serif;

  /* Scara de șapte trepte. Numele spun UNDE, nu CÂT DE MARE. */
  --yg-display-size: 32px; --yg-display-weight: 700; --yg-display-track: -0.5px;  --yg-display-lh: 42px;
  --yg-title-size: 22px;   --yg-title-weight: 700;   --yg-title-track: -0.3px;    --yg-title-lh: 29px;
  --yg-heading-size: 17px; --yg-heading-weight: 600; --yg-heading-track: 0;       --yg-heading-lh: 22px;
  --yg-body-size: 15px;    --yg-body-weight: 400;    --yg-body-track: 0;          --yg-body-lh: 20px;
  --yg-label-size: 14px;   --yg-label-weight: 600;   --yg-label-track: 0;         --yg-label-lh: 18px;
  --yg-caption-size: 12px; --yg-caption-weight: 500; --yg-caption-track: 0;       --yg-caption-lh: 16px;
  --yg-micro-size: 11px;   --yg-micro-weight: 600;   --yg-micro-track: 0.4px;     --yg-micro-lh: 14px;

  /* Textul de pe fotografie (prețul, titlul, rândul de dedesubt): același pe ambele teme. */
  --yg-photo-price-color: #FFB547; --yg-photo-price-size: 34px; --yg-photo-price-weight: 200; --yg-photo-price-track: -1.2px;
  --yg-photo-title-color: rgba(244, 241, 234, 0.78); --yg-photo-title-size: 11px; --yg-photo-title-weight: 600; --yg-photo-title-track: 1.6px;
  --yg-photo-meta-color: rgba(244, 241, 234, 0.74); --yg-photo-meta-size: 12px; --yg-photo-meta-weight: 600; --yg-photo-meta-track: 0.3px;
  --yg-photo-icon: #F4F1EA;

  /* Panoul de sticlă de peste fotografie (și bara de căutare de sus): același pe ambele teme. */
  --yg-panel-fill: rgba(16, 20, 24, 0.34);
  --yg-panel-edge: rgba(255, 255, 255, 0.42);

  /* Voalul care face textul citibil peste o fotografie albă. Pragul e MĂSURAT:
     aurul cere alfa ≥ 0,67; valoarea stă la 0,78 ca să aibă marjă. */
  --yg-veil-floor: 0.78;
  --yg-veil-top-reach: 30%;
  --yg-veil-bottom-reach: 45%;

  /* ---------- mișcarea ---------- */
  --yg-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);   /* ce INTRĂ frânează lung */
  --yg-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);    /* ce PLEACĂ pleacă hotărât */
  --yg-t-press: 80ms;
  --yg-t-appear: 150ms;
  --yg-t-within: 200ms;
  --yg-t-sheet: 300ms;
  --yg-t-screen: 400ms;
  --yg-t-accent: 500ms;
  --yg-t-photo: 360ms;          /* singura animație lungă a ecranului cu fotografie */
  --yg-press-scale: 0.97;
  --yg-press-opacity: 0.9;
  --yg-dialog-rise: 12px;       /* dialogul „se așază" de la 12px, nu traversează ecranul */
  --yg-sheet-dismiss-distance: 120px;  /* trasă mai mult de atât, foaia se închide */
  --yg-sheet-dismiss-velocity: 900;    /* px/s: o smucitură în jos o închide oricât de puțin a coborât */

  /* ---------- sticla neagră a ferestrelor (foaie și dialog) ---------- */
  /* Neagră pe AMBELE teme, decizia proprietarului (30 august 2026). Literele de pe ea
     sunt mereu cele de noapte, oricare ar fi tema. */
  --yg-glass-ink: #F4F1EA;
  --yg-glass-ink-muted: rgba(244, 241, 234, 0.72);
  --yg-glass-ink-faint: rgba(244, 241, 234, 0.55);
  --yg-glass-gold: #D4A14A;
  --yg-glass-error: #FF9E96;
  --yg-sheet-scrim: rgba(0, 0, 0, 0.5);
  --yg-dialog-scrim: rgba(0, 0, 0, 0.58);
  --yg-sheet-handle: rgba(255, 255, 255, 0.34);
  /* Umbrele: în aplicație „raza" iOS; în CSS estomparea e dublă (tradus). */
  --yg-sheet-shadow: 0 -8px 64px rgba(0, 0, 0, 0.4);
  --yg-dialog-shadow: 0 20px 96px rgba(0, 0, 0, 0.5);

  /* Colțurile ferestrelor și ritmul lor nu depind de temă. */
  color-scheme: dark;
}

/* =====================================================================
   TEMA ÎNTUNECATĂ (implicită și când sistemul e pe întunecat)
   ===================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Fundalul: trei opriri de sus în jos, la 165 de grade, plus trei lumini moi. */
  --yg-ground-top: #1B2229;
  --yg-ground-mid: #10151A;
  --yg-ground-bottom: #06080A;
  /* Lumini: tăria e MĂSURATĂ; mai mult de atât strică textul secundar de pe plăci. */
  --yg-light-honey: rgba(255, 227, 163, 0.12);
  --yg-light-titan: rgba(157, 176, 191, 0.12);
  --yg-light-amber: rgba(255, 181, 71, 0.08);
  --yg-page: #10151A;

  /* Literele, derivate din fundal. */
  --yg-ink: #F4F1EA;
  --yg-ink-muted: rgba(244, 241, 234, 0.72);
  --yg-ink-faint: rgba(244, 241, 234, 0.55);
  --yg-ink-off: rgba(244, 241, 234, 0.52);
  --yg-ink-control: #F4F1EA;     /* eticheta butonului secundar, fantomă, fila activă */

  /* Cele trei suprafețe, și numai trei: pagina, cartonașul, panoul ridicat. */
  --yg-card: rgba(255, 255, 255, 0.06);
  --yg-raised: rgba(255, 255, 255, 0.09);
  --yg-field: rgba(255, 255, 255, 0.06);
  --yg-line: rgba(255, 255, 255, 0.16);

  /* Placa de sticlă: degrade vertical, două muchii luminate. */
  --yg-plate-base: transparent;
  --yg-plate-top: rgba(255, 255, 255, 0.10);
  --yg-plate-bottom: rgba(255, 255, 255, 0.03);
  --yg-plate-rim-top: rgba(255, 255, 255, 0.42);
  --yg-plate-rim-bottom: rgba(255, 255, 255, 0.14);

  /* Bara de jos: mai grea decât o placă, fiindcă plutește și peste fotografii. */
  --yg-bar-base: rgba(10, 13, 16, 0.72);
  --yg-bar-top: rgba(255, 255, 255, 0.10);
  --yg-bar-bottom: rgba(255, 255, 255, 0.03);

  /* Blocul ÎNCASTRAT în placă: mai închis, luminat doar sus (fila activă, etichetele). */
  --yg-inset: rgba(0, 0, 0, 0.28);
  --yg-inset-rim: rgba(255, 255, 255, 0.10);

  /* Sticla colorată a butoanelor: pe noapte stă pe FUM, altfel eticheta nu se citește. */
  --yg-smoke: rgba(8, 10, 12, 0.55);
  --yg-tint-rim-top: rgba(255, 255, 255, 0.75);
  --yg-tint-rim-bottom: rgba(255, 255, 255, 0.28);
  --yg-primary-base: var(--yg-smoke);
  --yg-primary-top: rgba(255, 181, 71, 0.36);
  --yg-primary-bottom: rgba(255, 181, 71, 0.12);
  --yg-primary-label: #FFE3A3;
  --yg-money-base: var(--yg-smoke);
  --yg-money-top: rgba(255, 181, 71, 0.40);
  --yg-money-bottom: rgba(255, 181, 71, 0.14);
  --yg-money-label: #FFF0CF;
  --yg-blocked-fill: rgba(0, 0, 0, 0.5);

  /* Câmpuri. Conturul de focus e chihlimbarul. */
  --yg-field-focus: #FFB547;
  --yg-field-error: #E5534B;

  /* Etichete (chipuri): încastrate; cea de încredere păstrează aurul. */
  --yg-chip-fill: rgba(0, 0, 0, 0.28);
  --yg-chip-trust-fill: rgba(255, 181, 71, 0.18);
  --yg-chip-trust-text: #FFB547;

  /* Bara de taburi. */
  --yg-tab-fill: rgba(10, 13, 16, 0.72);
  --yg-tab-active-label: #F4F1EA;
  --yg-tab-inactive-label: rgba(244, 241, 234, 0.55);
  --yg-tab-active-fill: rgba(0, 0, 0, 0.28);
  --yg-tab-sell-icon: #FFE3A3;

  /* Culorile cu înțeles (bani, pericol, reușită). */
  --yg-gold: #D4A14A;
  --yg-gold-bright: #E8BD6D;
  --yg-gold-dim: #8A6A30;
  --yg-on-gold: #0A0A0A;
  --yg-danger: #FF9E96;          /* pe noapte, roșul e mai deschis: a fost măsurat pe o placă luminată */
  --yg-danger-surface: #2A1413;
  --yg-success: #4CAF7D;

  /* Umbre (tradus: estomparea CSS e dublul razei iOS). */
  --yg-shadow-card: 0 12px 48px rgba(0, 0, 0, 0.40);
  --yg-shadow-raised: 0 18px 72px rgba(0, 0, 0, 0.50);
  --yg-shadow-button: 0 10px 22px -14px rgba(0, 0, 0, 0.6);

  /* Voalul de peste fotografie se întunecă spre negru pe noapte. */
  --yg-veil-tint: 0, 0, 0;

  /* Pânza difuză (fundalul unei ferestre când în spate nu e o fotografie). */
  --yg-diffuse-warm: #FFB547;
  --yg-diffuse-cool: rgba(255, 181, 71, 0.36);
}

/* =====================================================================
   TEMA LUMINOASĂ. NU e cea întunecată inversată: aurul COBOARĂ pe alb,
   fundalul se oprește la titan, nu la aproape-negru, ca literele să se citească.
   ===================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --yg-ground-top: #EEF1F4;
  --yg-ground-mid: #CDD6DE;
  --yg-ground-bottom: #B3BFCA;
  --yg-light-honey: rgba(255, 227, 163, 0.60);
  --yg-light-titan: rgba(157, 176, 191, 0.45);
  --yg-light-amber: rgba(255, 181, 71, 0.16);
  --yg-page: #CDD6DE;

  --yg-ink: #14120E;
  --yg-ink-muted: rgba(20, 18, 14, 0.70);
  --yg-ink-faint: rgba(20, 18, 14, 0.55);
  --yg-ink-off: rgba(20, 18, 14, 0.64);
  --yg-ink-control: #0C0D12;

  --yg-card: rgba(255, 255, 255, 0.44);
  --yg-raised: rgba(255, 255, 255, 0.62);
  --yg-field: rgba(255, 255, 255, 0.50);
  --yg-line: rgba(255, 255, 255, 0.80);

  --yg-plate-base: transparent;
  --yg-plate-top: rgba(255, 255, 255, 0.62);
  --yg-plate-bottom: rgba(255, 255, 255, 0.24);
  --yg-plate-rim-top: rgba(255, 255, 255, 0.98);
  --yg-plate-rim-bottom: rgba(255, 255, 255, 0.55);

  --yg-bar-base: transparent;
  --yg-bar-top: rgba(255, 255, 255, 0.84);
  --yg-bar-bottom: rgba(255, 255, 255, 0.66);

  --yg-inset: rgba(20, 22, 30, 0.06);
  --yg-inset-rim: rgba(255, 255, 255, 0.65);

  --yg-smoke: transparent;
  --yg-tint-rim-top: rgba(255, 255, 255, 0.75);
  --yg-tint-rim-bottom: rgba(255, 255, 255, 0.28);
  --yg-primary-base: transparent;
  --yg-primary-top: #FFC56F;
  --yg-primary-bottom: rgba(255, 181, 71, 0.52);
  --yg-primary-label: #0C0D12;
  --yg-money-base: transparent;
  --yg-money-top: #FFC268;
  --yg-money-bottom: rgba(255, 181, 71, 0.58);
  --yg-money-label: #241603;
  --yg-blocked-fill: rgba(255, 255, 255, 0.40);

  --yg-field-focus: #8A6A30;
  --yg-field-error: #B3261E;

  --yg-chip-fill: rgba(20, 22, 30, 0.06);
  --yg-chip-trust-fill: rgba(255, 181, 71, 0.22);
  --yg-chip-trust-text: #8A6A30;

  --yg-tab-fill: rgba(255, 255, 255, 0.84);
  --yg-tab-active-label: #0C0D12;
  --yg-tab-inactive-label: rgba(12, 13, 18, 0.55);
  --yg-tab-active-fill: rgba(20, 22, 30, 0.06);
  --yg-tab-sell-icon: #0C0D12;

  --yg-gold: #725420;            /* aurul de text pe fundalul luminos, măsurat pe capătul de titan */
  --yg-gold-bright: #A07C39;
  --yg-gold-dim: #C7A96A;
  --yg-on-gold: #FFFFFF;
  --yg-danger: #B3261E;
  --yg-danger-surface: #FBE9E7;
  --yg-success: #2E7D52;

  --yg-shadow-card: 0 12px 48px rgba(20, 28, 36, 0.10);
  --yg-shadow-raised: 0 18px 72px rgba(20, 28, 36, 0.16);
  --yg-shadow-button: 0 10px 22px -14px rgba(20, 28, 36, 0.35);

  --yg-veil-tint: 20, 18, 14;

  --yg-diffuse-warm: #8A6A30;
  --yg-diffuse-cool: #FFC56F;
}