/* ═══════════════════════════════════════════════════════════════════════════
   APPLE-INSPIRED TOKENS — from dembrandt https://www.apple.com (2026-08-02)
   Dark console adaptation for BTMob MDM admin (not a marketing-page clone).
   Source: design/apple-extract/output/apple.com/
   Load BEFORE dashboard/phantom/ios sheets so variables cascade cleanly;
   ios-panel may re-map legacy aliases — apple-components re-asserts after.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette (high-confidence dembrandt) ─────────────────────────────── */
  --apple-black:        #000000;
  --apple-text:         #1d1d1f;   /* light-site body; dark elevated base */
  --apple-elevated:     #1d1d1f;
  --apple-elevated-2:   #272729;
  --apple-elevated-3:   #333336;
  --apple-neutral:      #6e6e73;
  --apple-white:        #ffffff;
  --apple-offwhite:     #fafafc;

  /* Links / accents (apple.com) */
  --apple-link:         #0066cc;   /* primary semantic */
  --apple-link-hover:   #007af5;
  --apple-accent:       #2997ff;   /* dark-surface link / accent */
  --apple-accent-hover: #2380d9;
  --apple-cta:          #0071e3;   /* “Learn more” filled pill */
  --apple-cta-hover:    #0077ed;
  --apple-cta-active:   #006edb;

  /* Semantic system (iOS dark companions — keep operational semantics) */
  --apple-green:        #30d158;
  --apple-red:          #ff453a;
  --apple-orange:       #ff9f0a;
  --apple-yellow:       #ffd60a;
  --apple-teal:         #64d2ff;
  --apple-indigo:       #5e5ce6;
  --apple-pink:         #ff375f;
  --apple-purple:       #bf5af2;

  /* Labels on dark */
  --apple-label:        #f5f5f7;
  --apple-label-2:      rgba(245, 245, 247, 0.72);
  --apple-label-3:      rgba(245, 245, 247, 0.72);
  --apple-label-4:      rgba(245, 245, 247, 0.22);

  /* Separators / fills */
  --apple-separator:    rgba(84, 84, 88, 0.65);
  --apple-separator-o:  rgba(84, 84, 88, 0.36);
  --apple-fill:         rgba(120, 120, 128, 0.24);
  --apple-fill-2:       rgba(120, 120, 128, 0.18);
  --apple-fill-3:       rgba(120, 120, 128, 0.12);

  /* Spacing — dembrandt scaleType 8px */
  --apple-space-1:  4px;
  --apple-space-2:  8px;
  --apple-space-3:  12px;
  --apple-space-4:  16px;
  --apple-space-5:  20px;
  --apple-space-6:  24px;
  --apple-space-7:  32px;
  --apple-space-8:  40px;
  --apple-space-9:  48px;
  --apple-touch:    44px;   /* HIG minimum */

  /* Radii from extract + console adaptation */
  --apple-radius-xs:   5px;
  --apple-radius-sm:   8px;
  --apple-radius-md:   11px;
  --apple-radius-lg:   14px;
  --apple-radius-xl:   20px;
  --apple-radius-2xl:  28px;
  --apple-radius-pill: 980px;

  /* Shadows (extract + dark console depth) */
  --apple-shadow-card:  3px 5px 30px rgba(0, 0, 0, 0.22);
  --apple-shadow-float: 0 8px 30px rgba(0, 0, 0, 0.45);
  --apple-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.55);
  --apple-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Typography — system stack (legal SF Pro stand-in) */
  --apple-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                        "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --apple-font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text",
                        "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --apple-font-mono:    "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (from DESIGN.md — admin-scaled body) */
  --apple-fs-display:  34px;  /* condensed from 56 marketing */
  --apple-fs-title1:   28px;
  --apple-fs-title2:   22px;
  --apple-fs-title3:   20px;
  --apple-fs-headline: 17px;
  --apple-fs-body:     15px;
  --apple-fs-callout:  14px;
  --apple-fs-subhead:  13px;
  --apple-fs-footnote: 12px;
  --apple-fs-caption:  11px;
  --apple-fw-regular:  400;
  --apple-fw-medium:   500;
  --apple-fw-semibold: 600;
  --apple-fw-bold:     700;
  --apple-lh-tight:    1.10;
  --apple-lh-snug:     1.24;
  --apple-lh-body:     1.47;
  --apple-tracking:    -0.015em;

  /* Motion */
  --apple-ease:       cubic-bezier(0.25, 0.1, 0.25, 1);
  --apple-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --apple-dur-fast:   120ms;
  --apple-dur:        220ms;
  --apple-dur-slow:   340ms;

  /* Focus ring — link blue family */
  --apple-focus:      0 0 0 3px rgba(0, 113, 227, 0.45);
  --apple-focus-ring: 2px solid rgba(41, 151, 255, 0.90);

  /* Glass */
  --apple-glass:      rgba(29, 29, 31, 0.78);
  --apple-glass-2:    rgba(39, 39, 41, 0.72);
  --apple-blur:       blur(40px) saturate(180%);

  /* ── Bridge → existing MDM / HIG / iOS variable names ─────────────────── */
  --ios-bg:           var(--apple-black);
  --ios-grouped:      var(--apple-black);
  --ios-elevated:     var(--apple-elevated);
  --ios-elevated-2:   var(--apple-elevated-2);
  --ios-elevated-3:   var(--apple-elevated-3);
  --ios-fill:         var(--apple-fill);
  --ios-fill-2:       var(--apple-fill-2);
  --ios-fill-3:       var(--apple-fill-3);
  --ios-separator:    var(--apple-separator);
  --ios-separator-o:  var(--apple-separator-o);
  --ios-label:        var(--apple-label);
  --ios-label-2:      var(--apple-label-2);
  --ios-label-3:      var(--apple-label-3);
  --ios-label-4:      var(--apple-label-4);
  --ios-blue:         var(--apple-cta);
  --ios-blue-2:       var(--apple-accent);
  --ios-green:        var(--apple-green);
  --ios-indigo:       var(--apple-indigo);
  --ios-orange:       var(--apple-orange);
  --ios-pink:         var(--apple-pink);
  --ios-purple:       var(--apple-purple);
  --ios-red:          var(--apple-red);
  --ios-teal:         var(--apple-teal);
  --ios-yellow:       var(--apple-yellow);
  --ios-gray:         var(--apple-neutral);
  --ios-gray-2:       #636366;
  --ios-gray-3:       #48484a;
  --ios-gray-4:       var(--apple-elevated-3);
  --ios-gray-5:       var(--apple-elevated-2);
  --ios-gray-6:       var(--apple-elevated);

  --bg:   var(--apple-black);
  --s1:   var(--apple-elevated);
  --s2:   var(--apple-elevated-2);
  --s3:   var(--apple-elevated-3);
  --s4:   #48484a;
  --s5:   #636366;
  --s6:   var(--apple-neutral);

  --border:  var(--apple-separator-o);
  --border2: var(--apple-separator);
  --border3: rgba(255, 255, 255, 0.22);

  --accent:       var(--apple-cta);
  --accent2:      var(--apple-accent);
  --accent3:      var(--apple-teal);
  --accent-light: rgba(0, 113, 227, 0.16);
  --accent-glow:  rgba(0, 113, 227, 0.35);
  --gold:         var(--apple-yellow);
  --gold-dim:     rgba(255, 214, 10, 0.14);

  --text:  var(--apple-label);
  --text1: var(--apple-label);
  --text2: var(--apple-label-2);
  --text3: var(--apple-label-3);

  --red:    var(--apple-red);
  --orange: var(--apple-orange);
  --teal:   var(--apple-teal);
  --green:  var(--apple-green);
  --blue:   var(--apple-cta);
  --purple: var(--apple-purple);
  --yellow: var(--apple-yellow);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.40);
  --shadow:    var(--apple-shadow-float);
  --shadow-lg: var(--apple-shadow-modal);
  --shadow-card: none;
  --shadow-card-hover: 0 0 0 1px rgba(0, 113, 227, 0.40);

  --glass-bg:     var(--apple-glass);
  --glass-border: rgba(255, 255, 255, 0.08);

  --ease-std:  var(--apple-ease);
  --ease-dec:  var(--apple-ease-out);
  --dur-fast:  var(--apple-dur-fast);
  --dur-std:   var(--apple-dur);
  --dur-slow:  var(--apple-dur-slow);

  --bar:       56px;
  --radius:    var(--apple-radius-lg);
  --radius-sm: var(--apple-radius-md);
  --radius-xs: var(--apple-radius-sm);

  --ph-bg: var(--apple-black);
  --ph-s1: var(--apple-elevated);
  --ph-s2: var(--apple-elevated-2);
  --ph-s3: var(--apple-elevated-3);
  --ph-s4: #48484a;
  --ph-accent: var(--apple-cta);
  --ph-accent2: var(--apple-accent);
  --ph-accent3: var(--apple-teal);
  --ph-accent-dim: rgba(0, 113, 227, 0.14);
  --ph-accent-glow: rgba(0, 113, 227, 0.30);
  --ph-t1: var(--apple-label);
  --ph-t2: var(--apple-label-2);
  --ph-t3: var(--apple-label-3);
  --ph-green: var(--apple-green);
  --ph-red: var(--apple-red);
  --ph-blue: var(--apple-cta);
  --app-font: var(--apple-font-text);
  --ph-font: var(--apple-font-text);
  --ph-mono: var(--apple-font-mono);
  --app-font-size: var(--apple-fs-body);
  --ph-b1: var(--apple-separator-o);
  --ph-b2: var(--apple-separator);
  --ph-glass-1: rgba(255, 255, 255, 0.06);
  --ph-blur: var(--apple-blur);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --apple-dur-fast: 1ms;
    --apple-dur: 1ms;
    --apple-dur-slow: 1ms;
    --dur-fast: 1ms;
    --dur-std: 1ms;
    --dur-slow: 1ms;
  }
}

/* Light theme token flip (early) — components use var(--apple-label) */
html[data-theme="light"],
body.theme-light {
  --apple-label: #1c1c1e;
  --apple-label-2: #3a3a3c;
  --apple-label-3: #6c6c70;
  --apple-label-4: #8e8e93;
  --apple-elevated: #ffffff;
  --apple-elevated-2: #f2f2f7;
  --apple-elevated-3: #e5e5ea;
  --apple-black: #f2f2f7;
  --bg: #f2f2f7;
  --text: #1c1c1e;
  --text1: #1c1c1e;
  --text2: #3a3a3c;
  --text3: #6c6c70;
  --s1: #ffffff;
  --s2: #f2f2f7;
  --s3: #e5e5ea;
  color-scheme: light;
}