/* ============================================================
   JOYBOX — Design Tokens  ·  "calm candy"
   For createDazzle (collectible-toy business OS)
   Light + Dark. Consumed by JOYBOX-BUILD-SPEC.md.
   Anchored on Apple Liquid Glass (iPadOS 26/27):
   content leads; glass tints are for the floating control
   layer ONLY (--glass-*). Transparency dialed DOWN for
   legibility (matches Apple's 2026 revision).
   ============================================================ */

:root,
[data-theme="light"] {
  /* — Surfaces — warm porcelain / cream — */
  --surface:          #F6F1EA;  /* app background */
  --surface-raised:   #FFFDFA;  /* cards, lists, sheets */
  --surface-sunken:   #EEE7DD;  /* wells, track grooves */
  --surface-inset:    #FBF7F1;  /* nested field inside a card */
  --hairline:         #E8DFD4;  /* 1px separators / borders */

  /* — Ink — deep plum-charcoal, never pure black — */
  --ink:              #2B2530;  /* primary text */
  --ink-soft:         #6B6473;  /* secondary text */
  --ink-faint:        #9C95A1;  /* tertiary / captions */
  --ink-ghost:        #C5BEC8;  /* disabled / placeholder */

  /* — Primary accent — coral candy (the one signature) — */
  --accent:           #F26D85;
  --accent-press:     #DC586F;
  --accent-soft:      #FCE4E8;  /* tint surface for accent */
  --on-accent:        #FFFFFF;

  /* — Pastel categories (sparing: category / status) — */
  --cat-rose:         #F3C8D3;   --cat-rose-ink:   #9C4258;
  --cat-sky:          #C6DBEE;   --cat-sky-ink:    #345E86;
  --cat-lilac:        #D9CEEC;   --cat-lilac-ink:  #5B4787;
  --cat-mint:         #CBE6D5;   --cat-mint-ink:   #2F7355;
  --cat-butter:       #F2E4BC;   --cat-butter-ink: #846212;

  /* — Semantic (muted, to fit the calm) — */
  --success:          #3FA585;   --success-soft: #DCEFE7;  --success-ink: #1F6A52;  /* sold / paid */
  --warning:          #DCA044;   --warning-soft: #F8E8CB;  --warning-ink: #8A5C16;  /* low stock */
  --info:             #5795D2;   --info-soft:    #DBE7F5;  --info-ink:    #2C5B8A;  /* info */
  --live:             var(--accent);                        /* claimed-live */

  /* — Glass: floating control layer ONLY — */
  --glass-bg:         rgba(255,253,250,0.68);
  --glass-bg-strong:  rgba(255,253,250,0.82);
  --glass-stroke:     rgba(255,255,255,0.70);
  --glass-edge:       rgba(43,37,48,0.06);
  --glass-blur:       22px;
  --glass-saturate:   1.5;
  --glass-specular:   linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 42%);
  --glass-shadow:     0 10px 34px rgba(43,37,48,0.14), 0 2px 8px rgba(43,37,48,0.06);

  /* — Elevation — soft, warm-tinted (never pure black) — */
  --e1: 0 1px 2px rgba(43,37,48,0.05);
  --e2: 0 4px 14px rgba(43,37,48,0.07), 0 1px 3px rgba(43,37,48,0.04);
  --e3: 0 14px 38px rgba(43,37,48,0.10), 0 3px 10px rgba(43,37,48,0.05);

  color-scheme: light;
}

[data-theme="dark"] {
  /* — Surfaces — deep ink-plum charcoal — */
  --surface:          #1A1620;
  --surface-raised:   #262030;
  --surface-sunken:   #131019;
  --surface-inset:    #211B2A;
  --hairline:         #38313F;

  /* — Ink — warm off-white — */
  --ink:              #F3EEE9;
  --ink-soft:         #B8B1BE;
  --ink-faint:        #847E8C;
  --ink-ghost:        #5A5463;

  /* — Primary accent — slightly lifted for dark legibility — */
  --accent:           #F87E94;
  --accent-press:     #E86880;
  --accent-soft:      rgba(248,126,148,0.16);
  --on-accent:        #2A1117;

  /* — Pastel categories — low-alpha tints + lifted ink — */
  --cat-rose:   rgba(243,200,211,0.18);  --cat-rose-ink:   #F1BAC7;
  --cat-sky:    rgba(198,219,238,0.18);  --cat-sky-ink:    #AFCBE8;
  --cat-lilac:  rgba(217,206,236,0.20);  --cat-lilac-ink:  #C9BBE6;
  --cat-mint:   rgba(203,230,213,0.18);  --cat-mint-ink:   #ABD8BB;
  --cat-butter: rgba(242,228,188,0.18);  --cat-butter-ink: #E6D29A;

  /* — Semantic — */
  --success:  #4FB596;  --success-soft: rgba(79,181,150,0.18);  --success-ink: #86D6BD;
  --warning:  #E2AC58;  --warning-soft: rgba(226,172,88,0.18);  --warning-ink: #EBC588;
  --info:     #6AA3DC;  --info-soft:    rgba(106,163,220,0.18); --info-ink:    #A6C8EA;
  --live:     var(--accent);

  /* — Glass — */
  --glass-bg:         rgba(38,32,48,0.62);
  --glass-bg-strong:  rgba(38,32,48,0.80);
  --glass-stroke:     rgba(255,255,255,0.14);
  --glass-edge:       rgba(0,0,0,0.40);
  --glass-blur:       24px;
  --glass-saturate:   1.4;
  --glass-specular:   linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 46%);
  --glass-shadow:     0 12px 40px rgba(0,0,0,0.46), 0 2px 10px rgba(0,0,0,0.34);

  --e1: 0 1px 2px rgba(0,0,0,0.34);
  --e2: 0 5px 16px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30);
  --e3: 0 16px 42px rgba(0,0,0,0.50), 0 3px 12px rgba(0,0,0,0.36);

  color-scheme: dark;
}

:root {
  /* — Radii — concentric, echo the iPad's rounded hardware — */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px; --r-lg: 26px;
  --r-xl: 34px; --r-2xl: 44px; --r-full: 999px;

  /* — Spacing — 4pt base, generous — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* — Type — SF Pro, Dynamic-Type-style scale — */
  --font-sans: -apple-system, "SF Pro Text", "SF Pro Display", "Inter",
               system-ui, "Segoe UI", Roboto, sans-serif;
  --t-caption2: 11px; --t-caption: 12px; --t-footnote: 13px;
  --t-subhead: 15px;  --t-callout: 16px; --t-body: 17px;  --t-headline: 17px;
  --t-title3: 20px;   --t-title2: 22px;  --t-title1: 28px;
  --t-large: 34px;    --t-display: 48px; --t-hero: 68px;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  /* — Motion — gentle, liquid, physical — */
  --ease-liquid:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms; --dur: 280ms; --dur-slow: 460ms;
}