/* =============================================================
   MS-PRO NEXT GENERATION — DESIGN TOKENS
   All design system custom properties live here.
   Import order: design-tokens → base → layout → components → modules
   ============================================================= */

/* Google Fonts loaded dynamically by MSPNG_CSS_Bridge based on Design Center settings */

:root {
  /* ── Brand Colors ── */
  --color-primary:          #6366f1;
  --color-primary-hover:    #4f46e5;
  --color-primary-light:    #eef2ff;
  --color-primary-rgb:      99, 102, 241;

  --color-secondary:        #0ea5e9;
  --color-secondary-hover:  #0284c7;
  --color-secondary-light:  #e0f2fe;

  --color-accent:           #f59e0b;
  --color-accent-hover:     #d97706;
  --color-accent-light:     #fffbeb;

  /* ── Status Colors ── */
  --color-success:          #22c55e;
  --color-success-light:    #dcfce7;
  --color-warning:          #f59e0b;
  --color-warning-light:    #fef9c3;
  --color-error:            #ef4444;
  --color-error-light:      #fee2e2;

  /* ── Sports-Specific Colors ── */
  --color-live:             #ef4444;
  --color-live-glow:        rgba(239, 68, 68, 0.3);
  --color-fixture:          #6366f1;
  --color-result:           #22c55e;

  /* ── Surface Colors (Light Mode) ── */
  --color-bg:               #f8fafc;
  --color-bg-alt:           #f1f5f9;
  --color-surface:          #ffffff;
  --color-surface-2:        #f8fafc;
  --color-surface-3:        #f1f5f9;
  --color-border:           #e2e8f0;
  --color-border-light:     #f1f5f9;

  /* ── Text Colors (Light Mode) ── */
  --color-text:             #334155;
  --color-text-muted:       #64748b;
  --color-text-subtle:      #94a3b8;
  --color-heading:          #0f172a;
  --color-link:             #6366f1;
  --color-link-hover:       #4f46e5;

  /* ── Typography ──
     Font families (--font-primary, --font-display, --font-editorial,
     --font-menu, --font-widget, --font-button, --font-meta, --font-scoreboard)
     are intentionally NOT defined here. They are owned exclusively by the
     CSS Bridge (<style id="mspng-dynamic-css">) which loads inline before
     these linked files. Defining them here would override Design Center settings.
     Only --font-mono is defined here as it is not user-configurable.
  -- */
  --font-mono:              'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Font Scale ── */
  --text-2xs:               0.625rem;   /* 10px */
  --text-xs:                0.75rem;    /* 12px */
  --text-sm:                0.875rem;   /* 14px */
  --text-base:              1rem;       /* 16px */
  --text-md:                1.0625rem; /* 17px */
  --text-lg:                1.125rem;   /* 18px */
  --text-xl:                1.25rem;    /* 20px */
  --text-2xl:               1.5rem;     /* 24px */
  --text-3xl:               1.875rem;   /* 30px */
  --text-4xl:               2.25rem;    /* 36px */
  --text-5xl:               3rem;       /* 48px */
  --text-6xl:               3.75rem;    /* 60px */

  /* ── Font Weights ── */
  --fw-light:               300;
  --fw-regular:             400;
  --fw-medium:              500;
  --fw-semibold:            600;
  --fw-bold:                700;
  --fw-extrabold:           800;
  --fw-black:               900;

  /* ── Line Heights ── */
  --lh-tight:               1.2;
  --lh-snug:                1.35;
  --lh-normal:              1.5;
  --lh-relaxed:             1.65;
  --lh-loose:               1.8;

  /* ── Letter Spacing ── */
  --ls-tight:               -0.02em;
  --ls-normal:              0;
  --ls-wide:                0.025em;
  --ls-wider:               0.05em;
  --ls-widest:              0.1em;

  /* ── Spacing Scale (4px base) ── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-3-5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-11:   44px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;

  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:   0 1px 4px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 8px 24px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl:   0 16px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-2xl:  0 24px 64px rgba(15, 23, 42, 0.18);
  --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-primary: 0 4px 16px rgba(99, 102, 241, 0.3);
  --shadow-live:    0 0 0 3px rgba(239, 68, 68, 0.25);

  /* ── Layout ──
     --container-max is owned by CSS Bridge (Design Center → Container Width setting).
     It is NOT defined here to prevent static override of user's setting.
     Named size helpers below are for utility use only.
  -- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-pad: clamp(var(--space-4), 5vw, var(--space-8));

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* ── Header ── */
  --header-height:       64px;
  --header-height-sm:    56px;
  --header-bg:           rgba(255, 255, 255, 0.95);
  --header-border:       var(--color-border);
  --header-shadow:       0 1px 0 var(--color-border), 0 4px 16px rgba(15,23,42,0.06);
  --header-text:         var(--color-heading);

  /* ── Cards (overridden by CSS Bridge) ── */
  --card-bg:             var(--color-surface);
  --card-border:         var(--color-border);
  --card-radius:         14px;
  --card-shadow:         0 4px 12px rgba(15,23,42,0.10), 0 2px 4px rgba(15,23,42,0.06);
  --card-shadow-hover:   0 8px 24px rgba(15,23,42,0.14);
  --card-padding:        var(--space-5);

  /* ── Images (overridden by CSS Bridge) ── */
  --card-img-ratio:      16/9;
  --card-img-fit:        cover;
  --card-img-radius:     0px;

  /* ── Buttons (overridden by CSS Bridge) ── */
  --btn-radius:          8px;
  --btn-font:            var(--font-primary);
  --btn-font-size:       var(--text-sm);

  /* ── Sidebar ── */
  --sidebar-width:       320px;
  --sidebar-gap:         var(--space-6);

  /* ── Breaking News Ticker ── */
  --ticker-bg:           var(--color-primary);
  --ticker-text:         #ffffff;
  --ticker-height:       36px;

  /* ── Reading Progress ── */
  --progress-color:      var(--color-primary);
}

/* ── Dark Mode ── */
[data-theme="dark"],
.dark-mode {
  --color-bg:             #0a0f1e;
  --color-bg-alt:         #0d1326;
  --color-surface:        #111827;
  --color-surface-2:      #141e2e;
  --color-surface-3:      #1a2540;
  --color-border:         #1e2d3d;
  --color-border-light:   #1a2540;

  --color-text:           #cbd5e1;
  --color-text-muted:     #94a3b8;
  --color-text-subtle:    #64748b;
  --color-heading:        #f1f5f9;
  --color-link:           #818cf8;
  --color-link-hover:     #a5b4fc;

  --color-primary-light:  rgba(99, 102, 241, 0.15);
  --color-secondary-light: rgba(14, 165, 233, 0.15);
  --color-accent-light:   rgba(245, 158, 11, 0.15);
  --color-success-light:  rgba(34, 197, 94, 0.15);
  --color-error-light:    rgba(239, 68, 68, 0.15);
  --color-warning-light:  rgba(245, 158, 11, 0.15);

  --header-bg:            rgba(10, 15, 30, 0.96);
  --header-border:        var(--color-border);
  --card-bg:              var(--color-surface);
  --card-border:          var(--color-border);

  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* ── System Dark Mode (auto) ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --color-bg:             #0a0f1e;
    --color-bg-alt:         #0d1326;
    --color-surface:        #111827;
    --color-surface-2:      #141e2e;
    --color-surface-3:      #1a2540;
    --color-border:         #1e2d3d;
    --color-border-light:   #1a2540;
    --color-text:           #cbd5e1;
    --color-text-muted:     #94a3b8;
    --color-text-subtle:    #64748b;
    --color-heading:        #f1f5f9;
    --color-link:           #818cf8;
    --color-link-hover:     #a5b4fc;
    --color-primary-light:  rgba(99, 102, 241, 0.15);
    --color-secondary-light: rgba(14, 165, 233, 0.15);
    --color-accent-light:   rgba(245, 158, 11, 0.15);
    --header-bg:            rgba(10, 15, 30, 0.96);
    --header-border:        #1e2d3d;
    --card-bg:              #111827;
    --card-border:          #1e2d3d;
    --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.5);
  }
}