/* ============================================================
   MySpark CV Portfolio — CSS Tokens v2
   Beautiful, modern portfolio design system
   ============================================================ */

:root {
	/* ---- Colours ---- */
	--mscp-bg-primary:      #ffffff;
	--mscp-bg-secondary:    #f8f6f3;
	--mscp-bg-card:         #ffffff;
	--mscp-bg-hero:         linear-gradient(135deg, var(--mscp-bg-secondary) 0%, var(--mscp-bg-primary) 100%);
	--mscp-text-primary:    #111827;
	--mscp-text-secondary:  #6b7280;
	--mscp-text-muted:      #9ca3af;
	--mscp-accent:          #2563eb;
	--mscp-accent-hover:    #1d4ed8;
	--mscp-accent-subtle:   #eff6ff;
	--mscp-border:          #e5e7eb;
	--mscp-border-strong:   #d1d5db;

	/* ---- Shadows ---- */
	--mscp-shadow-sm:       0 1px 2px rgba(0,0,0,0.05);
	--mscp-shadow-md:       0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
	--mscp-shadow-lg:       0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	--mscp-shadow-xl:       0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

	/* ---- Typography ---- */
	--mscp-font-serif:      "Playfair Display", Georgia, "Times New Roman", serif;
	--mscp-font-sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--mscp-font-mono:       "JetBrains Mono", "SF Mono", "Fira Code", Menlo, monospace;
	--mscp-font-weight-light:   300;
	--mscp-font-weight-normal:  400;
	--mscp-font-weight-medium:  500;
	--mscp-font-weight-semibold: 600;
	--mscp-font-weight-bold:    700;
	--mscp-font-weight-extrabold: 800;

	--mscp-text-xs:         0.75rem;
	--mscp-text-sm:         0.875rem;
	--mscp-text-base:       1rem;
	--mscp-text-lg:         1.125rem;
	--mscp-text-xl:         1.25rem;
	--mscp-text-2xl:        1.5rem;
	--mscp-text-3xl:        1.875rem;
	--mscp-text-4xl:        2.25rem;
	--mscp-text-5xl:        3rem;
	--mscp-text-6xl:        3.75rem;

	/* ---- Spacing ---- */
	--mscp-space-1:         0.25rem;
	--mscp-space-2:         0.5rem;
	--mscp-space-3:         0.75rem;
	--mscp-space-4:         1rem;
	--mscp-space-5:         1.25rem;
	--mscp-space-6:         1.5rem;
	--mscp-space-8:         2rem;
	--mscp-space-10:        2.5rem;
	--mscp-space-12:        3rem;
	--mscp-space-16:        4rem;
	--mscp-space-20:        5rem;
	--mscp-space-24:        6rem;

	/* ---- Border radius ---- */
	--mscp-radius-sm:       6px;
	--mscp-radius-md:       10px;
	--mscp-radius-lg:       16px;
	--mscp-radius-xl:       24px;
	--mscp-radius-full:     9999px;

	/* ---- Layout ---- */
	--mscp-max-width:       1100px;
	--mscp-container-pad:   var(--mscp-space-6);
	--mscp-grid-gap:        var(--mscp-space-6);

	/* ---- Transitions ---- */
	--mscp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--mscp-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--mscp-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ---- Z-index ---- */
	--mscp-z-hero:          1;
	--mscp-z-content:       2;
	--mscp-z-overlay:       10;
	--mscp-z-modal:         100;
}

/* ---- Local vector icons ----
   Icons come from the plugin's own fixed SVG library, never an icon font or a
   CDN, so they render identically on every platform. Sizes are set here because
   every portfolio inlines this file. */
.msw-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.msw-inline-icon { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.15em; }
.mscp-icon-lg { width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -0.12em; }

.msw-service-icon svg,
.msw-feature-icon svg,
.msw-topic-icon svg,
.msw-method-icon svg,
.msw-edu-icon svg { width: 24px; height: 24px; }

.mscp-enrich-stat-icon svg { width: 28px; height: 28px; }

/* Icon slots: a tinted plate with a monochrome glyph reads as a black-and-white
   icon on a coloured square. The glyph takes the accent that tints its plate — and
   inside a card the card scope supplies that card's own accent, so it stays legible
   on a dark card as well as a pale one. */
.msw-edu-icon,
.msw-service-icon,
.msw-feature-icon,
.msw-topic-icon,
.msw-badge-icon,
.mscp-enrich-stat-icon { color: var(--mscp-accent); }

/* Icon slots that used to hold an emoji glyph need explicit centring now. */
.msw-edu-icon,
.msw-method-icon,
.msw-service-icon,
.msw-feature-icon,
.msw-topic-icon,
.msw-badge-icon { display: grid; place-items: center; }

.msw-edu-icon,
.msw-method-icon { color: var(--mscp-accent, currentColor); }

/* Testimonial cards used a fixed five-star row, which implied a rating the
   visitor never gave. A quote mark says "testimonial" without inventing one. */
.msw-quote-icon { width: 22px; height: 22px; opacity: 0.45; }

.msw-marquee-sep { width: 12px; height: 12px; margin: 0 0.6em; vertical-align: -0.05em; opacity: 0.55; }

/* ── Card ink ──────────────────────────────────────────────────────────────────
   Cards and grid cells paint their own ground (--mscp-bg-card), which on several
   styles is not the canvas colour: a dark card on a light style, a pale card on a
   dark one. The style registry derives the ink tokens against the card colour and
   this scope applies them, so every rule inside a card follows automatically. The
   :where() wrapper keeps specificity at zero, so any explicit rule still wins. */
:root {
	--mscp-card-text-primary:   var(--mscp-text-primary);
	--mscp-card-text-secondary: var(--mscp-text-secondary);
	--mscp-card-text-muted:     var(--mscp-text-muted);
	--mscp-card-accent:         var(--mscp-accent);
	--mscp-card-accent-ink:     var(--mscp-accent-ink);
}

:where( .mscp-ach-list li, .mscp-achievements-list li, .mscp-card, .mscp-cert-list li, .mscp-contact-link, .mscp-education-item, .mscp-exec-ach-list li, .mscp-exec-cert-list li, .mscp-exec-photo, .mscp-exp-item, .mscp-experience-item, .mscp-hero-photo, .mscp-proj-card, .mscp-proj-contact-link, .mscp-proj-exp-item, .mscp-proj-skill-group, .mscp-proj-social-link, .mscp-project-card, .mscp-project-item, .mscp-sidebar-photo, .mscp-sidebar-social-link, .mscp-social-link, .mscp-timeline-project-link, .mscp-timeline-skill-chip, .mscp-visual-project-card, .msw-appointment, .msw-bento-card, .msw-bg-item, .msw-booking-card, .msw-btn, .msw-case-card, .msw-collab-card, .msw-contact-card, .msw-content-card, .msw-cs-card, .msw-edu-card, .msw-edu-item, .msw-eng-card, .msw-exp-card, .msw-faq-item, .msw-feature-card, .msw-funfact, .msw-gallery-controls button, .msw-grant-card, .msw-layout-cell, .msw-method-card, .msw-plan, .msw-portfolio-card, .msw-press-card, .msw-process-step, .msw-project-card, .msw-pub-card, .msw-roadmap-item, .msw-service-card, .msw-social-btn, .msw-stat, .msw-talk-card, .msw-team-card, .msw-testi, .msw-testimonial, .msw-testimonial-card, .msw-topic-card, .msw-vt-card) {
	--mscp-text-primary:   var(--mscp-card-text-primary);
	/* Quiet copy inside a card is a high-alpha mix of the card ink instead of a fixed
	   grey. Cards sit on grounds the registry cannot enumerate — a panel painted with a
	   colour mix, a section with its own tint — and a fixed grey is only ever checked
	   against one of them. At 92% and 84% the ink keeps its contrast against whatever is
	   actually behind it, in both directions: dark ink stays dark on a cream panel, pale
	   ink stays pale on a mid-dark one. */
	--mscp-text-secondary: color-mix(in srgb, var(--mscp-card-text-primary) 92%, transparent);
	--mscp-text-muted:     color-mix(in srgb, var(--mscp-card-text-primary) 84%, transparent);
	--mscp-accent:         var(--mscp-card-accent);
	--mscp-accent-ink:     var(--mscp-card-accent-ink);
}

/* ── Hero band tokens ────────────────────────────────────────────────────────
   The Spotlight family paints its hero band from these, so the same stylesheet
   serves a navy band and a pale one: the style says what the band is made of and
   what ink sits on it, the family stylesheet only says where things go. */
:root {
	--mscp-hero-ink: #f8fafc;
	--mscp-hero-ink-soft: rgba(248, 250, 252, 0.82);
	--mscp-hero-eyebrow: #a5b4fc;
	--mscp-hero-surface: rgba(255, 255, 255, 0.08);
	--mscp-hero-line: rgba(255, 255, 255, 0.14);
	--mscp-hero-line-strong: rgba(255, 255, 255, 0.42);
	--mscp-hero-name-gradient: linear-gradient(100deg, #7dd3fc 0%, #a5b4fc 45%, #f0abfc 100%);
	--mscp-gradient-brand: linear-gradient(100deg, #38bdf8 0%, #6366f1 45%, #a855f7 70%, #ec4899 100%);
}