/* ============================================================================
   costume.css — costumele clienților: culorile și fonturile lor reale.
   Le poartă Garderoba (Acasă), lista de lucrări, studiile de caz și cipurile de pe paginile
   de servicii. Valorile sunt COPIATE din clients/<client>/tokens.css — dacă se schimbă acolo,
   se schimbă și aici. Fonturile (OFL) se descarcă doar când un costum chiar apare pe ecran.
   ========================================================================= */

/* ---------- fonturile costumelor (OFL, din folderele clienților; vezi assets/fonts/costume/) ---------- */
@font-face { font-family: "K Young Serif"; src: url("../assets/fonts/costume/YoungSerif-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "K Instrument Sans"; src: url("../assets/fonts/costume/InstrumentSans-var.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "K Archivo"; src: url("../assets/fonts/costume/Archivo-var.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "K Martian Mono"; src: url("../assets/fonts/costume/MartianMono-var.woff2") format("woff2-variations"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "K Funnel Display"; src: url("../assets/fonts/costume/FunnelDisplay-var.woff2") format("woff2-variations"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "K Funnel Sans"; src: url("../assets/fonts/costume/FunnelSans-var.woff2") format("woff2-variations"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "K Azeret Mono"; src: url("../assets/fonts/costume/AzeretMono-var.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "K Mona Sans"; src: url("../assets/fonts/costume/MonaSans-var.woff2") format("woff2-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "K Spline Sans Mono"; src: url("../assets/fonts/costume/SplineSansMono-var.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "K Bodoni Moda"; src: url("../assets/fonts/costume/BodoniModa-normal-latin.woff2") format("woff2"); font-weight: 400 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; font-display: swap; }
@font-face { font-family: "K Bodoni Moda"; src: url("../assets/fonts/costume/BodoniModa-normal-latin-ext.woff2") format("woff2"); font-weight: 400 900;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F; font-display: swap; }
@font-face { font-family: "K Hanken Grotesk"; src: url("../assets/fonts/costume/HankenGrotesk-normal-latin.woff2") format("woff2"); font-weight: 100 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; font-display: swap; }
@font-face { font-family: "K Hanken Grotesk"; src: url("../assets/fonts/costume/HankenGrotesk-normal-latin-ext.woff2") format("woff2"); font-weight: 100 900;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F; font-display: swap; }

/* ---------- costumele: valorile clienților ---------- */
.costum--happy-smile {   /* clients/cabinet-mama/tokens.css: hârtie, umbră, tutun, scoarță, alamă */
  --k-fond: #E8E5D2; --k-cerneala: #2A150A; --k-cerneala-2: #5B3412; --k-accent: #C58436; --k-accent-text: #7B522D;
  --k-f-display: "K Young Serif", Georgia, serif; --k-f-text: "K Instrument Sans", var(--f-text); --k-f-mono: "K Instrument Sans", var(--f-text);
  --k-greutate: 400; --k-ls: -0.02em; --k-ecran: #1B0E07;
}
.costum--vacuserv {      /* clients/vacuserv/tokens.css: vid, lumină, semnal pe vid */
  --k-fond: #0E100A; --k-cerneala: #E6E9E2; --k-cerneala-2: #8A9084; --k-accent: #E0565B; --k-accent-text: #E0565B;
  --k-f-display: "K Archivo", "Arial Narrow", sans-serif; --k-f-text: "K Archivo", var(--f-text); --k-f-mono: "K Martian Mono", var(--f-mono);
  --k-greutate: 500; --k-ls: -0.035em; --k-ecran: #000;
}
.costum--pro-instal {    /* clients/pro-instal-grup/tokens.css: noapte, lumină, galbenul din logo */
  --k-fond: #070B2E; --k-cerneala: #EEF0F7; --k-cerneala-2: #A9B0CC; --k-accent: #FECE05; --k-accent-text: #FECE05;
  --k-f-display: "K Funnel Display", var(--f-text); --k-f-text: "K Funnel Sans", var(--f-text); --k-f-mono: "K Azeret Mono", var(--f-mono);
  --k-greutate: 700; --k-ls: -0.03em; --k-ecran: #02041A;
}
.costum--sser {          /* clients/sser/tokens.css: hârtia roz-gri, negrul, roșul (mare) / roșul sălii (mic) */
  --k-fond: #EDE9E6; --k-cerneala: #100C0C; --k-cerneala-2: #5E5552; --k-accent: #E63030; --k-accent-text: #A92926;
  --k-f-display: "K Mona Sans", "Arial Narrow", sans-serif; --k-f-text: "K Mona Sans", var(--f-text); --k-f-mono: "K Spline Sans Mono", var(--f-mono);
  --k-greutate: 850; --k-ls: -0.03em; --k-stretch: 80%; --k-transform: uppercase; --k-ecran: #100C0C;
}
.costum--dcs {           /* clients/dental-concept-studio/tokens.css: negrul fotografiilor, ceramica, umbra */
  --k-fond: #040303; --k-cerneala: #E7E7E9; --k-cerneala-2: #AAA59F; --k-accent: #903A2D; --k-accent-text: #E7E7E9;
  --k-f-display: "K Bodoni Moda", Didot, serif; --k-f-text: "K Hanken Grotesk", var(--f-text); --k-f-mono: "K Hanken Grotesk", var(--f-text);
  --k-greutate: 500; --k-ls: -0.01em; --k-ecran: #000;
}

/* ---------- textele din costum ---------- */
.c-eticheta { font: 500 .8125rem/1.3 var(--k-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--k-cerneala-2); }
.c-demo { font: 600 var(--step-0)/1 var(--k-f-text); color: var(--k-cerneala); text-decoration: none; border-bottom: 2px solid var(--k-accent); padding-bottom: .35em; }
.c-demo:hover .sageata { transform: translate(.15em, -.15em); }
.c-nume {
  font-family: var(--k-f-display); font-weight: var(--k-greutate); font-stretch: var(--k-stretch, 100%);
  text-transform: var(--k-transform, none); line-height: .92; letter-spacing: var(--k-ls); color: var(--k-cerneala); text-wrap: balance;
}
.c-demo--ext { border-bottom-style: dotted; }

/* rama: laptop pe ecran mare, telefon pe telefon — desenate de noi, nu descărcate */
.c-ecran {
  position: relative; aspect-ratio: 16 / 10; padding: 2.1% 2.1% 3%; border-radius: var(--r-ram) var(--r-ram) 5px 5px;
  background: linear-gradient(160deg, var(--c-ram-1), var(--c-ram-2) 40%); box-shadow: var(--umbra-3);
}
.c-ecran::before { content: ""; position: absolute; top: .9%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--c-ram-camera); }
.c-baza { height: 15px; margin-inline: -7%; border-radius: 2px 2px 16px 16px / 2px 2px 12px 12px;
  background: linear-gradient(var(--c-aluminiu-1), var(--c-aluminiu-2) 60%, var(--c-aluminiu-3)); box-shadow: 0 18px 30px -16px rgb(0 0 0 / .55); position: relative; }
.c-baza::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 5px; margin-left: -8%; border-radius: 0 0 6px 6px; background: var(--c-aluminiu-2); }
.c-pixeli { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: var(--k-ecran); }
.c-pixeli img, .c-pixeli canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.c-pixeli canvas { opacity: 0; transition: opacity .3s; }
.c-pixeli canvas.gata { opacity: 1; }

/* telefonul: colțurile ca la iPhone — raza ≈ 15% din lățime (55 pt din 393), cercuri, nu elipse */
.disp-tel .c-ecran { aspect-ratio: 360 / 780; padding: 3.2%; border-radius: 15% / 6.9%; background: linear-gradient(160deg, var(--c-ram-1), var(--c-ram-2) 45%); }
.disp-tel .c-ecran::before { top: 1.6%; width: 26%; height: 2.2%; margin-left: -13%; border-radius: 99px; background: var(--c-ram-2); z-index: 2; }
.disp-tel .c-pixeli { border-radius: 12.5% / 5.8%; }