/* ============================================================
   DPSTI Design System — Color & Type Foundations
   DPSTI /DEP-STEE/ · "The success engine for the ambitious."
   Zoryox Technology / Zoryox Technologies

   Grounded in the real logo (a vibrant 5-figure star) and the
   real product apps (light, SF-native iOS, multi-color).

   TWO TIERS share one token set:
   • PRODUCT (light)  — the apps (Grasp, Catch, Status, Clerk,
                        Folia, FinGo, Constella). DEFAULT on :root.
                        SF-native, cool-gray bg, very-rounded white
                        cards, full multi-hue CATEGORY palette,
                        BLUE primary action.
   • PLATFORM (dark)  — corporate / infrastructure (dpsti.com,
                        Compute Hub, AI Lab). Opt in with
                        class="platform" or [data-theme="dark"].
                        Deep ink, the brand SPECTRUM as accents.

   The 5 logo colors == the 5 values (the brand spectrum):
   D Defy=violet · P Pursue=red · S Shape=green · T Thrive=orange ·
   I Impact=blue.
   ============================================================ */

/* ---- Fonts: Apple-native faces, no uploads, no webfont requests.
        Sans  → SF Pro      (fallback: native system stack)
        Serif → New York    (fallback: Georgia)
        CJK   → PingFang SC  (woven into every stack)
        Mono  → SF Mono      (fallback: ui-monospace) ---- */

:root {
  /* ============================================================
     BRAND SPECTRUM — the 5 logo colors == the 5 values
     (saturated "core" + the iOS-tuned product hue beside it)
     ============================================================ */
  --defy:    #9B51E0;  /* D · violet  (raised hand) */
  --pursue:  #FF3B30;  /* P · red     (arrow)        */
  --shape:   #34C759;  /* S · green   (wrench)       */
  --thrive:  #FF9F0A;  /* T · orange  (sprout)       */
  --impact:  #0A84FF;  /* I · blue    (figure)       */

  /* ============================================================
     PRODUCT CATEGORY PALETTE (iOS-aligned, from the real apps)
     Each hue: solid + a ~14% tint for icon tiles / stat cards.
     ============================================================ */
  --c-blue:    #0A84FF;  --c-blue-tint:   #E5F1FF;
  --c-green:   #34C759;  --c-green-tint:  #E4F8EA;
  --c-orange:  #FF9F0A;  --c-orange-tint: #FFF1DC;
  --c-red:     #FF3B30;  --c-red-tint:    #FFE6E4;
  --c-purple:  #AF52DE;  --c-purple-tint: #F5E8FB;
  --c-pink:    #FF2D92;  --c-pink-tint:   #FFE3F0;
  --c-cyan:    #32ADE6;  --c-cyan-tint:   #E3F4FC;
  --c-teal:    #00C7BE;  --c-teal-tint:   #DCF7F5;
  --c-indigo:  #5856D6;  --c-indigo-tint: #E8E8FA;
  --c-yellow:  #FFCC00;  --c-yellow-tint: #FFF6D6;

  /* ============================================================
     PLATFORM ACCENTS (dark tier)
     ============================================================ */
  --cyan-400: #15CFE8;  /* platform signature accent — electric cyan */
  --cyan-300: #5BE6F5;
  --cyan-600: #0A93A8;

  /* Ink — dark substrate (platform) */
  --ink-950: #06090F;  --ink-900: #0A0E16;  --ink-850: #0E131D;
  --ink-800: #121826;  --ink-750: #161D2B;  --ink-700: #1E2738;
  --ink-600: #2A3548;

  /* Slate — cool neutrals (text, lines, light backgrounds) */
  --slate-950: #0B0F17; --slate-900: #131925; --slate-800: #1F2837;
  --slate-700: #334053; --slate-600: #475569; --slate-500: #64748B;
  --slate-400: #94A3B8; --slate-300: #C2CCD8; --slate-200: #DDE3EB;
  --slate-150: #E7ECF2; --slate-100: #F1F4F8; --slate-50: #F6F8FB;

  /* ============================================================
     TYPE — FAMILIES & SCALE  (Apple-native; native fallbacks)
     ============================================================ */
  /* Western Sans → SF Pro, then the standard native system stack */
  --font-sans: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  /* Serif → New York, then Georgia; PingFang/Songti for CJK */
  --font-serif: 'New York', ui-serif, 'Iowan Old Style', Georgia,
                'PingFang SC', 'Songti SC', serif;
  /* Mono → SF Mono, then ui-monospace */
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Code', monospace;
  /* Display (large headlines) → SF Pro Display, heavy weights */
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', 'PingFang SC', sans-serif;

  /* Back-compat aliases (older kit CSS referenced these) */
  --font-system: var(--font-sans);
  --font-grotesk: var(--font-sans);

  --text-2xs: 11px; --text-xs: 12px;  --text-sm: 14px;  --text-base: 16px;
  --text-md: 18px;  --text-lg: 21px;  --text-xl: 26px;  --text-2xl: 33px;
  --text-3xl: 40px; --text-4xl: 52px; --text-5xl: 70px;  --text-6xl: 96px;

  --leading-none: 0.96; --leading-tight: 1.08; --leading-snug: 1.22;
  --leading-normal: 1.42; --leading-relaxed: 1.6;

  --tracking-tightest: -0.03em; --tracking-tight: -0.02em;
  --tracking-snug: -0.01em; --tracking-normal: 0;
  --tracking-wide: 0.04em; --tracking-label: 0.14em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px;
  --radius-3xl: 34px; --radius-pill: 999px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;

  /* ============================================================
     SEMANTIC TOKENS — DEFAULT = PRODUCT (LIGHT, iOS)
     Components reference ONLY these; the .platform theme remaps.
     ============================================================ */
  --bg:          #EEF1F5;     /* cool light app background */
  --bg-2:        #E7ECF2;
  --surface:     #FFFFFF;     /* card */
  --surface-2:   #F4F6F9;     /* inset chip / nested fill */
  --surface-hover:#F1F4F8;
  --border:      rgba(11,15,23,0.07);
  --border-strong: rgba(11,15,23,0.12);
  --hairline:    rgba(11,15,23,0.06);

  --fg:          #0B0F17;     /* primary text (near-black) */
  --fg-2:        #6B7685;     /* secondary text (gray) */
  --fg-3:        #98A1B0;     /* tertiary / captions */
  --fg-on-accent:#FFFFFF;

  --brand:       var(--c-blue);   /* product primary action = blue */
  --brand-2:     var(--c-cyan);

  --success: var(--c-green);
  --warning: var(--c-orange);
  --danger:  var(--c-red);

  --shadow-sm: 0 1px 3px rgba(16,28,52,0.06);
  --shadow-md: 0 8px 26px rgba(16,28,52,0.08);
  --shadow-lg: 0 22px 54px rgba(16,28,52,0.14);
  --ring:      0 0 0 4px rgba(10,132,255,0.22);

  --btn-radius: var(--radius-md);
  --card-radius: var(--radius-2xl);   /* iOS soft cards (28px) */
}

/* ============================================================
   PLATFORM THEME (DARK) — dpsti.com / Compute Hub / AI Lab
   ============================================================ */
.platform, [data-theme="dark"] {
  --bg:          var(--ink-900);
  --bg-2:        var(--ink-850);
  --surface:     var(--ink-750);
  --surface-2:   var(--ink-800);
  --surface-hover: var(--ink-700);
  --border:      rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --hairline:    rgba(255,255,255,0.07);

  --fg:          #EAF2F5;
  --fg-2:        #9DACBE;
  --fg-3:        #62718A;
  --fg-on-accent:#04222A;

  --brand:       var(--cyan-400);
  --brand-2:     var(--impact);

  --success: #34D17E;
  --warning: #FFB838;
  --danger:  #FF6B83;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --ring:      0 0 0 3px rgba(52,210,224,0.35);
  --glow:      0 0 0 1px rgba(52,210,224,0.25), 0 0 28px -4px rgba(52,210,224,0.4);

  --btn-radius: var(--radius-sm);
  --card-radius: var(--radius-md);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
/* Product (default): SF-native large bold titles */
.ds-title-xl { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.ds-title    { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.ds-headline { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--fg); }
.ds-h        { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-md); line-height: var(--leading-snug); color: var(--fg); }
.ds-body     { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-2); }
.ds-body-sm  { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); }
.ds-caption  { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-3); }
/* Eyebrow / section label — uppercase tracked */
.ds-eyebrow  { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-3); }
/* Big metric number */
.ds-metric   { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--fg); }

/* Platform: condensed industrial display */
.ds-display  { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); line-height: var(--leading-none); letter-spacing: var(--tracking-snug); text-transform: uppercase; color: var(--fg); }
.ds-display-h{ font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); text-transform: uppercase; color: var(--fg); }
.ds-label    { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand); }
.ds-data     { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); color: var(--fg); }