/* ============================================================
FUTURISE NATIVE SKIN · v1.0 — macOS 27 "Liquid Glass" layer
Distilled from Apple's official macOS 27 UI-kit tokens (Jun 2026)
+ Futurise brand integration rules. Canonical:
https://futurise-brand-system.vercel.app/downloads/fz-native.css

WHEN TO USE (brand.json app.native_skin):
For Futurise products that should FEEL like the OS (FOLIO, VAULT
class apps). The split is always: system font for UI text, Unitea
for the lockup + big numerals, Core yellow replaces system blue
as the tint. Never mix this skin with the console/pocket chassis
on the same screen.

RULES:
- UI text = SF via the system stack below. NEVER self-host SF Pro.
- Apple's ramp is exact — don't invent sizes between the steps.
- Tint/focus = Futurise yellow #FFC20E wherever Apple uses blue.
- Yellow on glass always ships with black text (never white).
- Glass needs a backdrop to justify itself — over imagery or
  desktop wallpaper. On flat colour use plain surfaces instead.
============================================================ */

:root {
  --nsk-ui: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
  --nsk-brand: "Unitea Sans", var(--nsk-ui);      /* lockup + hero numerals only */
  --nsk-tint: #FFC20E;                            /* replaces Apple system blue */
  --nsk-tint-ink: #000;                           /* text on tint — always black */

  /* labels (Apple exact) — light */
  --nsk-label-1: rgba(0,0,0,.85);
  --nsk-label-2: rgba(0,0,0,.5);
  --nsk-label-3: rgba(0,0,0,.25);
  --nsk-label-4: rgba(0,0,0,.1);
  /* fills — light */
  --nsk-fill-1: rgba(0,0,0,.1);
  --nsk-fill-2: rgba(0,0,0,.08);
  --nsk-fill-3: rgba(0,0,0,.05);
  /* materials — light (pair with backdrop-filter) */
  --nsk-mat-ultrathin: rgba(236,236,236,.38);
  --nsk-mat-thin:      rgba(236,236,236,.5);
  --nsk-mat-regular:   rgba(236,236,236,.63);
  --nsk-mat-thick:     rgba(236,236,236,.76);
  --nsk-mat-ultrathick:rgba(236,236,236,.88);
  --nsk-glass-stroke:  rgba(255,255,255,.5);
  --nsk-panel-shadow: 0 16px 33px rgba(0,0,0,.18), 0 0 1px rgba(0,0,0,.35);
  /* focus ring — Apple geometry (3.5px @ .25 + 1px @ .15), Futurise tint */
  --nsk-focus: 0 0 0 3.5px rgba(255,194,14,.25), 0 0 0 1px rgba(255,194,14,.55);
}
[data-theme="dark"], .nsk-dark {
  --nsk-label-1: rgba(255,255,255,1);
  --nsk-label-2: rgba(255,255,255,.55);
  --nsk-label-3: rgba(255,255,255,.25);
  --nsk-label-4: rgba(255,255,255,.1);
  --nsk-fill-1: rgba(255,255,255,.1);
  --nsk-fill-2: rgba(255,255,255,.08);
  --nsk-fill-3: rgba(255,255,255,.05);
  --nsk-mat-ultrathin: rgba(41,41,41,.4);
  --nsk-mat-thin:      rgba(41,41,41,.49);
  --nsk-mat-regular:   rgba(44,44,44,.61);
  --nsk-mat-thick:     rgba(44,44,44,.71);
  --nsk-mat-ultrathick:rgba(44,44,44,.82);
  --nsk-glass-stroke:  rgba(255,255,255,.14);
  --nsk-panel-shadow: 0 16px 33px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.8);
}

/* ---- the type ramp (Apple exact: size/line-height, default + emphasized) ---- */
.nsk-largetitle { font: 400 26px/1.231 var(--nsk-ui); color: var(--nsk-label-1); }
.nsk-title1     { font: 400 22px/1.182 var(--nsk-ui); color: var(--nsk-label-1); }
.nsk-title2     { font: 400 17px/1.294 var(--nsk-ui); color: var(--nsk-label-1); }
.nsk-title3     { font: 400 15px/1.333 var(--nsk-ui); color: var(--nsk-label-1); }
.nsk-headline   { font: 700 13px/1.231 var(--nsk-ui); color: var(--nsk-label-1); }
.nsk-body       { font: 400 13px/1.231 var(--nsk-ui); color: var(--nsk-label-1); }
.nsk-callout    { font: 400 12px/1.25  var(--nsk-ui); color: var(--nsk-label-1); }
.nsk-subheadline{ font: 400 11px/1.273 var(--nsk-ui); color: var(--nsk-label-2); }
.nsk-footnote   { font: 400 10px/1.3   var(--nsk-ui); color: var(--nsk-label-2); }
.nsk-caption    { font: 400 10px/1.3   var(--nsk-ui); color: var(--nsk-label-2); }
.nsk-em         { font-weight: 600; }            /* emphasized = +2 steps; LargeTitle/Title1/2 use 700 */
.nsk-largetitle.nsk-em, .nsk-title1.nsk-em, .nsk-title2.nsk-em, .nsk-headline.nsk-em { font-weight: 700; }

/* hero numerals stay on brand */
.nsk-num { font-family: var(--nsk-brand); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--nsk-label-1); }

/* ---- liquid glass surfaces ---- */
.nsk-glass {
  background: var(--nsk-mat-regular);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border: .5px solid var(--nsk-glass-stroke);
  border-radius: 16px;
  box-shadow: var(--nsk-panel-shadow);
}
.nsk-glass.thin  { background: var(--nsk-mat-thin); }
.nsk-glass.thick { background: var(--nsk-mat-thick); }

/* over-glass controls (bordered: idle .07 / clicked .16 on dark; inverse-ish on light) */
.nsk-btn {
  font: 600 13px/1 var(--nsk-ui); color: var(--nsk-label-1);
  background: var(--nsk-fill-2); border: .5px solid var(--nsk-fill-3);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.nsk-btn:active { background: var(--nsk-fill-1); }
.nsk-btn.tinted { background: var(--nsk-tint); color: var(--nsk-tint-ink); border-color: transparent; font-weight: 700; }
.nsk-btn:focus-visible { outline: none; box-shadow: var(--nsk-focus); }
input.nsk:focus-visible, .nsk-focusable:focus-visible { outline: none; box-shadow: var(--nsk-focus); }