/* =====================================================================
   Giao dien HONG — ban mau hong cua VINACAL 680EX PLUS III.
   Cung quy uoc voi gray.css: chi doi vat lieu/mau sac, con kich thuoc va
   vi tri van do white.css quan ly. JS giu lop white-skin va them pink-skin.

   Doc tu anh may that:
     - vo hong pastel, mat truoc mo, hai mep sam hon mot chut;
     - "680EX PLUS III" va "SCIENTIFIC CALCULATOR" mau hong canh sen;
     - nhan SHIFT (chuc nang thu nhat) mau xanh, nhan ALPHA mau hong canh sen;
     - ON / DEL / AC mau tim lavender, chu trang;
     - phim con lai mau trang nhu ban trang.
   ===================================================================== */

html[data-theme="pink"] {
  color-scheme: light;
  --ui-page: #fdf6f8;
  --ui-surface: #fffafc;
  --ui-surface-strong: #fff;
  --ui-text: #34222b;
  --ui-muted: #7a6670;
  --ui-border: #e6bec9;
  --ui-accent: #c2409d;
  --ui-shadow: 0 18px 48px rgba(83, 39, 61, .22);
}

html[data-theme="pink"],
html[data-theme="pink"] body {
  background: var(--ui-page);
  color: var(--ui-text);
}

/* Tren may hong that: SHIFT va cac chuc nang thu nhat mau xanh;
   ALPHA, bien chu va cac chuc nang thu hai mau hong canh sen. */
.pink-skin {
  --shift: #3f86cc;
  --alpha: #c2409d;
  --vblue: #c2409d;
  --keyblue: #a98ad2;
}

/* Than may hong co anh sang mem o giua va hai mep dam hon. */
.pink-skin .shell {
  background:
    radial-gradient(90% 38% at 50% 2%, rgba(255, 255, 255, .26), transparent 72%),
    linear-gradient(90deg, #eab1c1 0%, #f0bcca 5%, #f7cbd6 49%, #f1bfcc 94%, #e9b0c0 100%);
  box-shadow:
    0 calc(var(--px)*9) calc(var(--px)*24) rgba(92, 45, 66, .22),
    inset 0 calc(var(--px)*2) calc(var(--px)*3) rgba(255, 255, 255, .72),
    inset 0 calc(var(--px)*-3) calc(var(--px)*5) rgba(133, 73, 96, .22);
}

.pink-skin .bezel {
  border-color: #e3a9bb;
  background:
    radial-gradient(115% 43% at 50% 0%, rgba(255, 255, 255, .22), transparent 72%),
    linear-gradient(180deg, #f7cbd6 0%, #f5c6d2 36%, #f3c2cf 68%, #efbac8 100%);
  box-shadow:
    inset 0 0 0 calc(var(--px)*1) rgba(255, 255, 255, .5),
    inset 0 calc(var(--px)*3) calc(var(--px)*7) rgba(255, 255, 255, .3),
    inset 0 calc(var(--px)*-3) calc(var(--px)*6) rgba(140, 79, 102, .14);
}

/* Nen trang cua anh logo hoa vao vo hong, chi giu lai chu den. */
.pink-skin .brand {
  filter: grayscale(1) contrast(12);
  mix-blend-mode: multiply;
}

/* Panel quanh LCD sang hon than may dung nhu anh chup. */
.pink-skin .lcd-frame {
  background: #f9d4dd;
}

.pink-skin .lcd-frame::before {
  background: linear-gradient(180deg, #fbdae2 0%, #f9d3dc 46%, #f6cbd6 100%);
  box-shadow:
    inset calc(var(--px)*1) calc(var(--px)*3) calc(var(--px)*4) rgba(148, 88, 110, .28),
    inset 0 calc(var(--px)*-2) calc(var(--px)*3) rgba(255, 255, 255, .5);
}

.pink-skin .klabel.shift { color: var(--shift); }
.pink-skin .klabel.alpha { color: var(--alpha); }
/* DEC / HEX / BIN / OCT duoc in mau den tren than may, khong theo mau ALPHA. */
.pink-skin .klabel.alpha.lab-basen { color: #241c20; }

/* Phim trang, vien manh am sac hong, do bong nhua nhu anh goc. */
.pink-skin .key {
  color: #1b1419;
  border-color: #7b6470;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbfc 58%, #f3ecef 100%);
  box-shadow:
    0 calc(var(--px)*1.2) calc(var(--px)*1.5) rgba(78, 46, 60, .30),
    0 calc(var(--px)*3.6) calc(var(--px)*5) rgba(78, 46, 60, .22),
    inset 0 calc(var(--px)*1.8) 0 rgba(255, 255, 255, .95),
    inset 0 calc(var(--px)*-2.4) calc(var(--px)*3) rgba(150, 116, 130, .16);
}

/* ON / DEL / AC tim lavender dung sac cua may hong. */
.pink-skin .key.blue {
  color: #fff;
  border-color: #7d5aa8;
  background: linear-gradient(180deg, #bfa5e4 0%, #ad8ed7 55%, #9b78c8 100%);
  box-shadow:
    0 calc(var(--px)*1.2) calc(var(--px)*1.5) rgba(64, 40, 92, .40),
    0 calc(var(--px)*3.6) calc(var(--px)*5) rgba(64, 40, 92, .30),
    inset 0 calc(var(--px)*1.8) 0 rgba(255, 255, 255, .44),
    inset 0 calc(var(--px)*-2.4) calc(var(--px)*3) rgba(72, 40, 110, .30);
}

.pink-skin .key:active,
.pink-skin .key.is-pressed {
  box-shadow:
    0 calc(var(--px)*.6) calc(var(--px)*1) rgba(78, 46, 60, .34),
    inset 0 calc(var(--px)*2) calc(var(--px)*3.5) rgba(140, 105, 120, .26);
}

.pink-skin .key:focus-visible,
.pink-skin .arrow:focus-visible {
  outline-color: var(--shift);
}

.pink-skin .arrow-face {
  fill: #fdfbfc;
  stroke: #8a7580;
}

.pink-skin .arrow-glyph {
  fill: #fff;
  stroke: #cbb4bf;
}

.pink-skin .arrow svg {
  filter: drop-shadow(0 calc(var(--px)*2.2) calc(var(--px)*2.4) rgba(78, 46, 60, .34));
}

.pink-skin .arrow:active .arrow-glyph,
.pink-skin .arrow.is-pressed .arrow-glyph {
  stroke: var(--shift);
}

@media print {
  html[data-theme="pink"],
  html[data-theme="pink"] body { background: #fff; }
}