/* ==========================================================================
   ApplyWithMe Elevate — Design tokens
   Palette derived from the APWM logo mark: sky blue (A/P), teal (W), violet (M).
   ========================================================================== */

:root {
	/* ---- Brand ---------------------------------------------------------- */
	--apwm-blue-50:  #eef7fe;
	--apwm-blue-100: #d6ecfd;
	--apwm-blue-200: #aed8fa;
	--apwm-blue-300: #7cbff5;
	--apwm-blue-400: #4ea7ef;
	--apwm-blue-500: #3e9be8; /* logo AP */
	--apwm-blue-600: #1e7fd0;
	--apwm-blue-700: #1663a5;
	--apwm-blue-800: #134f83;
	--apwm-blue-900: #10405f;

	--apwm-teal-50:  #e8faf8;
	--apwm-teal-100: #c7f2ee;
	--apwm-teal-200: #94e5de;
	--apwm-teal-300: #58d2c8;
	--apwm-teal-400: #2fc0b5;
	--apwm-teal-500: #25b7ac; /* logo W */
	--apwm-teal-600: #14938b;
	--apwm-teal-700: #10746e;
	--apwm-teal-800: #0e5c58;
	--apwm-teal-900: #0b4a47;

	--apwm-violet-50:  #f3efff;
	--apwm-violet-100: #e7dfff;
	--apwm-violet-200: #d0c1fd;
	--apwm-violet-300: #b6a0fa;
	--apwm-violet-400: #a288f4;
	--apwm-violet-500: #9b7bf0; /* logo M */
	--apwm-violet-600: #7b55e0;
	--apwm-violet-700: #6340bd;
	--apwm-violet-800: #4f3499;
	--apwm-violet-900: #402c78;

	/* ---- Functional accents --------------------------------------------- */
	--apwm-amber-100: #fff2df;
	--apwm-amber-400: #ffa338;
	--apwm-amber-500: #ff8a00; /* Apply-now call to action */
	--apwm-amber-600: #e07300;

	--apwm-green-100: #dcf6e8;
	--apwm-green-500: #12a150; /* open / verified */
	--apwm-green-700: #0b7a3c;

	--apwm-red-100: #fde8e8;
	--apwm-red-500: #e5484d;   /* closed / deadline passed */
	--apwm-red-700: #b4272c;

	/* ---- Neutrals -------------------------------------------------------- */
	--apwm-ink:      #0e1726;
	--apwm-ink-soft: #26344a;
	--apwm-slate:    #5a6b85;
	--apwm-slate-2:  #7d8ca3;
	--apwm-line:     #e2e8f1;
	--apwm-line-2:   #eef2f7;
	--apwm-tint:     #f5f8fc;
	--apwm-surface:  #ffffff;
	--apwm-canvas:   #ffffff;

	/* ---- Semantic -------------------------------------------------------- */
	--apwm-primary:        var(--apwm-blue-600);
	--apwm-primary-hover:  var(--apwm-blue-700);
	--apwm-primary-soft:   var(--apwm-blue-50);
	--apwm-secondary:      var(--apwm-teal-600);
	--apwm-accent:         var(--apwm-violet-600);
	--apwm-cta:            var(--apwm-amber-500);
	--apwm-cta-hover:      var(--apwm-amber-600);

	--apwm-text:           var(--apwm-ink);
	--apwm-text-muted:     var(--apwm-slate);
	--apwm-text-invert:    #ffffff;
	--apwm-border:         var(--apwm-line);
	--apwm-bg:             var(--apwm-canvas);
	--apwm-bg-subtle:      var(--apwm-tint);
	--apwm-card:           var(--apwm-surface);
	--apwm-muted:          var(--apwm-tint);

	--apwm-focus:          var(--apwm-violet-500);

	/* ---- Gradients (mirrors the logo left-to-right) ---------------------- */
	--apwm-gradient:       linear-gradient(120deg, var(--apwm-teal-500) 0%, var(--apwm-blue-500) 48%, var(--apwm-violet-500) 100%);
	--apwm-gradient-soft:  linear-gradient(120deg, var(--apwm-teal-50) 0%, var(--apwm-blue-50) 50%, var(--apwm-violet-50) 100%);
	--apwm-gradient-deep:  linear-gradient(140deg, #0b4a47 0%, #10405f 45%, #402c78 100%);

	/* ---- Typography ------------------------------------------------------ */
	--apwm-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--apwm-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--apwm-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Fluid type scale */
	--apwm-fs-xs:   0.78rem;
	--apwm-fs-sm:   0.875rem;
	--apwm-fs-base: 1rem;
	--apwm-fs-md:   1.0625rem;
	--apwm-fs-lg:   clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
	--apwm-fs-xl:   clamp(1.3rem, 0.6vw + 1.15rem, 1.55rem);
	--apwm-fs-2xl:  clamp(1.6rem, 1.1vw + 1.35rem, 2.1rem);
	--apwm-fs-3xl:  clamp(2rem, 1.9vw + 1.55rem, 2.9rem);
	--apwm-fs-4xl:  clamp(2.4rem, 3.2vw + 1.6rem, 3.9rem);

	--apwm-lh-tight: 1.15;
	--apwm-lh-snug:  1.35;
	--apwm-lh-base:  1.7;
	--apwm-lh-loose: 1.85;

	--apwm-tracking-tight: -0.022em;
	--apwm-tracking-wide:  0.06em;

	/* ---- Space ----------------------------------------------------------- */
	--apwm-s-1:  0.25rem;
	--apwm-s-2:  0.5rem;
	--apwm-s-3:  0.75rem;
	--apwm-s-4:  1rem;
	--apwm-s-5:  1.25rem;
	--apwm-s-6:  1.5rem;
	--apwm-s-8:  2rem;
	--apwm-s-10: 2.5rem;
	--apwm-s-12: 3rem;
	--apwm-s-16: 4rem;
	--apwm-s-20: 5rem;
	--apwm-s-24: 6rem;
	--apwm-section: clamp(3rem, 6vw, 5.5rem);

	/* ---- Layout ---------------------------------------------------------- */
	--apwm-container: 1200px;
	--apwm-container-wide: 1400px;
	--apwm-container-narrow: 760px;
	--apwm-gutter: clamp(1rem, 4vw, 2rem);
	--apwm-header-h: 72px;

	/* ---- Radius ---------------------------------------------------------- */
	--apwm-r-sm:   6px;
	--apwm-r-md:   10px;
	--apwm-r-lg:   16px;
	--apwm-r-xl:   22px;
	--apwm-r-2xl:  30px;
	--apwm-r-pill: 999px;

	/* ---- Elevation ------------------------------------------------------- */
	--apwm-shadow-xs: 0 1px 2px rgba(14, 23, 38, 0.06);
	--apwm-shadow-sm: 0 2px 6px rgba(14, 23, 38, 0.07);
	--apwm-shadow-md: 0 8px 24px -8px rgba(14, 23, 38, 0.16);
	--apwm-shadow-lg: 0 20px 48px -16px rgba(14, 23, 38, 0.22);
	--apwm-shadow-brand: 0 14px 34px -14px rgba(30, 127, 208, 0.55);

	/* ---- Motion ---------------------------------------------------------- */
	--apwm-ease: cubic-bezier(0.32, 0.72, 0.24, 1);
	--apwm-t-fast: 140ms;
	--apwm-t-base: 240ms;
	--apwm-t-slow: 420ms;

	/* ---- Z-index --------------------------------------------------------- */
	--apwm-z-header: 900;
	--apwm-z-mega: 910;
	--apwm-z-overlay: 940;
	--apwm-z-drawer: 950;
	--apwm-z-toast: 990;
}

/* ---- Dark theme ---------------------------------------------------------- */
:root[data-apwm-theme="dark"] {
	--apwm-ink:      #eef3fb;
	--apwm-ink-soft: #cfdaeb;
	--apwm-slate:    #9aa9c0;
	--apwm-slate-2:  #7c8ba4;
	--apwm-line:     #24314a;
	--apwm-line-2:   #1c2739;
	--apwm-tint:     #131c2c;
	--apwm-surface:  #172133;
	--apwm-canvas:   #0d1522;

	--apwm-primary:       var(--apwm-blue-400);
	--apwm-primary-hover: var(--apwm-blue-300);
	--apwm-primary-soft:  rgba(62, 155, 232, 0.14);
	--apwm-secondary:     var(--apwm-teal-400);
	--apwm-accent:        var(--apwm-violet-400);

	--apwm-text:       var(--apwm-ink);
	--apwm-text-muted: var(--apwm-slate);
	--apwm-border:     var(--apwm-line);
	--apwm-bg:         var(--apwm-canvas);
	--apwm-bg-subtle:  var(--apwm-tint);
	--apwm-card:       var(--apwm-surface);
	--apwm-muted:      var(--apwm-tint);

	--apwm-gradient-soft: linear-gradient(120deg, rgba(37,183,172,0.14) 0%, rgba(62,155,232,0.14) 50%, rgba(155,123,240,0.16) 100%);

	--apwm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
	--apwm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.42);
	--apwm-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.6);
	--apwm-shadow-lg: 0 24px 56px -18px rgba(0, 0, 0, 0.72);
}

/* Follow the OS preference when the visitor has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
	:root:not([data-apwm-theme="light"]) {
		--apwm-ink:      #eef3fb;
		--apwm-ink-soft: #cfdaeb;
		--apwm-slate:    #9aa9c0;
		--apwm-slate-2:  #7c8ba4;
		--apwm-line:     #24314a;
		--apwm-line-2:   #1c2739;
		--apwm-tint:     #131c2c;
		--apwm-surface:  #172133;
		--apwm-canvas:   #0d1522;

		--apwm-primary:       var(--apwm-blue-400);
		--apwm-primary-hover: var(--apwm-blue-300);
		--apwm-primary-soft:  rgba(62, 155, 232, 0.14);
		--apwm-secondary:     var(--apwm-teal-400);
		--apwm-accent:        var(--apwm-violet-400);

		--apwm-text:       var(--apwm-ink);
		--apwm-text-muted: var(--apwm-slate);
		--apwm-border:     var(--apwm-line);
		--apwm-bg:         var(--apwm-canvas);
		--apwm-bg-subtle:  var(--apwm-tint);
		--apwm-card:       var(--apwm-surface);
		--apwm-muted:      var(--apwm-tint);

		--apwm-gradient-soft: linear-gradient(120deg, rgba(37,183,172,0.14) 0%, rgba(62,155,232,0.14) 50%, rgba(155,123,240,0.16) 100%);

		--apwm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
		--apwm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.42);
		--apwm-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.6);
		--apwm-shadow-lg: 0 24px 56px -18px rgba(0, 0, 0, 0.72);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--apwm-t-fast: 1ms;
		--apwm-t-base: 1ms;
		--apwm-t-slow: 1ms;
	}
}