/* ==========================================================================
   unlocka33 — 品牌 token
   色票、字體、線寬與標誌基本樣式，全部沿用品牌規範，數值不要在這裡以外的
   地方硬寫。改品牌只改這個檔。
   ========================================================================== */

:root {
  /* --- 核心色 ------------------------------------------------------------ */
  --ink:        #17123A;   /* 主底色 */
  --ink-2:      #211A52;   /* 面板 */
  --ink-3:      #120E2C;   /* 圖示底部漸層終點 */
  --ink-4:      #241C5C;   /* 圖示底部漸層起點 */
  --paper:      #F4F1FF;   /* 淺底／深底文字 */
  --muted:      #9E95CC;   /* 次要文字 */
  --key:        #FFC44D;   /* 鑰匙金・主標誌 */
  --key-ink:    #C98A00;   /* 淺底上的金（對比度足夠的版本） */

  /* --- 產品色 ------------------------------------------------------------ */
  --flow:   #5B84FF;
  --quest:  #FF7A45;
  --beam:   #E85CD3;
  --yield:  #FF5470;
  --hydro:  #22CFD8;
  --care:   #4ADE96;
  --lawn:   #7BD44A;
  --farm:   #B7CE3E;
  --brew:   #C08A3E;
  --amp:    #AE5CFF;

  /* --- 衍生 -------------------------------------------------------------- */
  --line:       rgba(158, 149, 204, .22);
  --line-soft:  rgba(158, 149, 204, .12);
  --text-dim:   #DAD4F5;

  /* --- 字體 -------------------------------------------------------------- */
  --sora: 'Sora', system-ui, -apple-system, sans-serif;
  /* Sora 擺前面是為了讓拉丁字與 ’ — … 這些標點走拉丁字面。
     Noto Sans TC 的這些標點是全形的，混排時會多出一大塊空白。
     Sora 沒有中日韓字，中文自然往後 fallback 到 Noto Sans TC。 */
  --body: 'Sora', 'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- 半徑 -------------------------------------------------------------- */
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-squircle: 22.37%;   /* 接近 iOS app icon 的 squircle */

  /* --- 版面 -------------------------------------------------------------- */
  --wrap:      1080px;
  --wrap-text: 780px;     /* 純文字區塊窄一點，行長才好讀 */
  --nav-h:     64px;
}

/* ==========================================================================
   標誌
   一條不間斷的路徑。線寬 12u、round cap、開口收在 140°。
   不要加陰影、外框、漸層或第二段路徑。
   ========================================================================== */

/* 換色一律透過 --mark-stroke，不要用後代選擇器。
   <use href="#mark"> 會把 symbol 複製進 shadow tree，文件端的 CSS 選不到裡面的
   .mk；但自訂屬性會從 <use> 往內繼承，所以只有這條路走得通。 */
.mk {
  fill: none;
  stroke: var(--mark-stroke, var(--key));
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 碗內符號。三種筆法對應規範裡的 glyph / glyph-thin / glyph-fill。 */
.glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glyph-thin {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glyph-fill { fill: currentColor; }

/* 一筆畫進場。
   gap (1.2) 比路徑 (1) 長，所以下一段 dash 的 round cap 絕對落不到筆畫上
   —— 開口前不會冒出幻影圓點。 */
@keyframes mk-draw {
  from { stroke-dashoffset: 1.05; }
  to   { stroke-dashoffset: 0; }
}
.mk-draw .mk {
  stroke-dasharray: 1 1.2;
  stroke-dashoffset: 1.05;
  animation: mk-draw 1.2s cubic-bezier(.62, 0, .24, 1) .1s both;
}
.mk-draw.replay .mk { animation: none; }

/* ==========================================================================
   App icon 磚
   深底 + 產品色光暈。標誌在深底上提亮 18%，這是深色介面的標準做法。
   ========================================================================== */

.tile {
  --on-dark: color-mix(in srgb, var(--c, var(--key)) 82%, #fff);
  --mark-stroke: var(--on-dark);
  display: grid;
  place-items: center;
  border-radius: var(--r-squircle);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c, var(--key)) 7%, var(--ink-4)), var(--ink-3));
  box-shadow: 0 10px 26px -14px var(--c, var(--key));
  color: var(--on-dark);
}
.tile svg { width: 66%; height: 66%; }

/* 主品牌磚沒有產品色，用金色 */
.tile.is-master {
  background: linear-gradient(150deg, var(--ink-4), var(--ink-3));
  --on-dark: var(--key);
}

/* ==========================================================================
   共用小元件
   ========================================================================== */

/* mono 小標分隔線 */
.gap-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}
.gap-rule::before,
.gap-rule::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}
.gap-rule::before { flex: 0 0 8%; }
.gap-rule span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* 規格表：左標題、右 mono 值 */
.specs {
  list-style: none;
  font-size: 15px;
  width: 100%;
}
.specs li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.specs li:last-child { border-bottom: 0; }
/* 標籤不換行 —— 「更新」被拆成兩行很難看，寧可讓右邊的值去折 */
.specs b { font-weight: 500; white-space: nowrap; flex: none; }
.specs span {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
}

/* 字級 */
.wordmark {
  font-family: var(--sora);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
.wordmark .num {
  font-weight: 300;
  color: var(--key);
  letter-spacing: .01em;
}