/* ============================================================
   MyPass DRM — Design Tokens
   Aligned to the LIVE kprise.com brand (verified via computed styles):
     - Font:   Inter (single family)
     - Ink:    #0F172A (slate-900)
     - Accent: #7C3AED violet (light #A78BFA), used like kprise.com
     - Primary action: dark slate button (#0F172A), white text
     - Secondary action: white button, slate text, 1px border
     - Radius: buttons 10px, cards 14px
     - Surfaces: white with #F8FAFC / #F1F5F9 tints
   DRM extension: one security accent (Cipher Teal) for policy/security state.
   ============================================================ */

:root {
  /* ---- Brand accent (violet) — matches kprise.com #7C3AED ---- */
  --color-primary:        #7C3AED;
  --color-primary-light:  #A78BFA;
  --color-primary-dark:   #6D28D9;
  --grad-brand:           linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
  --color-surface-tint:   #EDE9FE;  /* violet-100 */

  /* ---- Ink / dark surfaces (slate) — matches kprise.com ---- */
  --color-ink:            #0F172A;  /* slate-900 */
  --color-ink-2:          #1E293B;  /* slate-800 */
  --grad-dark:            linear-gradient(160deg, #0F172A 0%, #1E293B 100%);

  /* ---- DRM security accent (Cipher Teal) ---- */
  --color-secure:         #0E8578;
  --color-secure-tint:    #E3F2F0;
  --color-secure-bright:  #22C2B0;  /* on dark backgrounds */

  /* ---- Text (slate scale) ---- */
  --text-1:      #0F172A;  /* headings / primary  */
  --text-2:      #334155;  /* slate-700           */
  --text-3:      #475569;  /* slate-600 — body    */
  --text-muted:  #64748B;  /* slate-500           */
  --text-on-dark:      #F1F5F9;
  --text-on-dark-soft: #94A3B8;

  /* ---- Surfaces & borders (slate) ---- */
  --bg:          #FFFFFF;
  --surface-1:   #F8FAFC;  /* slate-50  */
  --surface-2:   #F1F5F9;  /* slate-100 */
  --border:      #E2E8F0;  /* slate-200 */
  --border-2:    #CBD5E1;  /* slate-300 */

  /* ---- Status (policy states) ---- */
  --status-ok-fg:      #0E8578;  --status-ok-bg:      #E3F2F0;
  --status-warn-fg:    #B45309;  --status-warn-bg:    #FEF3C7;
  --status-denied-fg:  #DC2626;  --status-denied-bg:  #FEE2E2;
  --status-info-fg:    #7C3AED;  --status-info-bg:    #EDE9FE;

  /* ---- Typography (Inter, matching kprise.com) ---- */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-display:  clamp(2.5rem, 1.1rem + 5vw, 4.25rem);  /* ~40 -> 68 (kprise h1) */
  --fs-h1:       clamp(2.1rem, 1.3rem + 3vw, 3.25rem);
  --fs-h2:       clamp(1.75rem, 1.1rem + 2.3vw, 2.5rem);
  --fs-h3:       1.1875rem;                               /* ~19 */
  --fs-body-lg:  1.0625rem;                               /* 17  */
  --fs-body:     0.9375rem;                               /* 15  */
  --fs-sm:       0.8125rem;                               /* 13  */
  --fs-eyebrow:  0.75rem;                                 /* 12  */

  --lh-tight:   1.05;
  --lh-heading: 1.1;
  --lh-snug:    1.3;
  --lh-body:    1.6;
  --lh-loose:   1.65;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --ls-display: -0.035em;   /* kprise h1 letter-spacing */
  --ls-h2:      -0.02em;
  --ls-eyebrow: 0.1em;

  /* ---- Spacing scale ---- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-9:  36px;
  --sp-12: 48px;  --sp-14: 56px;  --sp-18: 72px;  --sp-22: 96px;

  --section-y:      clamp(56px, 4vw + 32px, 96px);
  --container-max:  1560px;   /* match kprise.com content width */
  --container-pad:  clamp(20px, 5vw, 40px);

  /* ---- Radii (matches kprise.com) ---- */
  --r-sm:   8px;
  --r-btn:  10px;   /* buttons */
  --r-md:   12px;
  --r-lg:   14px;   /* cards */
  --r-xl:   20px;
  --r-pill: 999px;  /* chips / badges only */

  /* ---- Shadows (slate-tinted) ---- */
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.05);
  --shadow-md:    0 12px 30px rgba(15, 23, 42, 0.10);
  --shadow-lg:    0 24px 60px rgba(15, 23, 42, 0.16);
  --shadow-brand: 0 6px 18px rgba(124, 58, 237, 0.28);

  /* ---- Motion ---- */
  --t-fast:  120ms ease;
  --t-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  340ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.25);

  /* ---- Z-index ---- */
  --z-header:   100;
  --z-dropdown: 200;
  --z-mobile:   300;
  --z-modal:    400;
  --z-skip:     500;
}