/* =========================================================
   KEYPLO — Design tokens (single source of truth)
   Every color, size, radius, shadow and spacing value used
   by the theme comes from here.
   ========================================================= */

:root {
	color-scheme: dark;

	/* ---------- Colors: surfaces ---------- */
	--kp-bg:            #070A12;  /* page background (very dark navy) */
	--kp-bg-elevated:   #0B101A;  /* bands, strips, footer */
	--kp-header-bg:     rgba(9, 13, 21, 0.92); /* sticky header (with blur) */
	--kp-surface:       #0F1520;  /* cards, panels */
	--kp-surface-2:     #151C29;  /* inputs, nested cards, hover */
	--kp-surface-3:     #1C2433;  /* chips, icon tiles */
	--kp-overlay:       rgba(3, 5, 10, 0.72);

	/* ---------- Colors: brand orange ---------- */
	--kp-orange:        #FF7A00;  /* primary accent */
	--kp-orange-hover:  #FF8F26;  /* hover */
	--kp-orange-active: #E86A00;  /* pressed */
	--kp-orange-soft:   rgba(255, 122, 0, 0.12); /* tinted backgrounds */
	--kp-orange-line:   rgba(255, 122, 0, 0.45); /* accent borders */
	--kp-on-orange:     #0B0F17;  /* text on orange (7.3:1 contrast) */

	/* ---------- Colors: text ---------- */
	--kp-text:          #F3F5F9;  /* primary (18:1 on bg) */
	--kp-text-2:        #A6B0C2;  /* secondary blue-gray (9:1) */
	--kp-text-muted:    #7A869A;  /* muted / meta (5.4:1) */
	--kp-text-disabled: #4C5668;

	/* ---------- Colors: borders ---------- */
	--kp-border:        #1E2736;  /* default card border */
	--kp-border-strong: #2B3647;  /* inputs, hover */
	--kp-border-subtle: rgba(255, 255, 255, 0.06);

	/* ---------- Colors: status ---------- */
	--kp-success:       #22C55E;
	--kp-success-soft:  rgba(34, 197, 94, 0.14);
	--kp-warning:       #F5A524;
	--kp-warning-soft:  rgba(245, 165, 36, 0.14);
	--kp-error:         #F0525A;
	--kp-error-soft:    rgba(240, 82, 90, 0.14);
	--kp-info:          #3B8BF6;
	--kp-info-soft:     rgba(59, 139, 246, 0.14);

	/* ---------- Glow (use sparingly) ---------- */
	--kp-glow-sm: 0 0 12px rgba(255, 122, 0, 0.22);
	--kp-glow-md: 0 0 24px rgba(255, 122, 0, 0.28);
	--kp-glow-lg: 0 0 48px rgba(255, 122, 0, 0.22);
	--kp-glow-text: 0 0 18px rgba(255, 122, 0, 0.30);

	/* ---------- Shadows ---------- */
	--kp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
	--kp-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35);
	--kp-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.45);
	--kp-focus-ring: 0 0 0 3px rgba(255, 122, 0, 0.45);

	/* ---------- Typography ---------- */
	--kp-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--kp-font-display: "Montserrat", "Inter", system-ui, sans-serif;

	--kp-text-xs:   0.75rem;    /* 12px  labels, badges */
	--kp-text-sm:   0.875rem;   /* 14px  meta, small UI */
	--kp-text-base: 1rem;       /* 16px  body */
	--kp-text-lg:   1.125rem;   /* 18px  lead */
	--kp-h3:        clamp(1.125rem, 1rem + 0.4vw, 1.375rem);   /* 18–22px */
	--kp-h2:        clamp(1.375rem, 1.1rem + 1vw, 2rem);       /* 22–32px */
	--kp-h1:        clamp(2rem, 1.2rem + 3.2vw, 3.75rem);      /* 32–60px */

	--kp-weight-regular: 400;
	--kp-weight-medium:  500;
	--kp-weight-semi:    600;
	--kp-weight-bold:    700;
	--kp-weight-heavy:   800;
	--kp-weight-black:   900;

	--kp-leading-tight: 1.05;
	--kp-leading-snug:  1.25;
	--kp-leading-body:  1.6;
	--kp-tracking-label: 0.08em;

	/* ---------- Spacing (4/8 scale) ---------- */
	--kp-space-1:  4px;
	--kp-space-2:  8px;
	--kp-space-3:  12px;
	--kp-space-4:  16px;
	--kp-space-5:  20px;
	--kp-space-6:  24px;
	--kp-space-8:  32px;
	--kp-space-10: 40px;
	--kp-space-12: 48px;
	--kp-space-16: 64px;
	--kp-space-20: 80px;

	/* ---------- Radius ---------- */
	--kp-radius-xs:   4px;   /* tiny tags */
	--kp-radius-sm:   8px;   /* buttons, inputs */
	--kp-radius-md:   12px;  /* cards */
	--kp-radius-lg:   16px;  /* panels, hero */
	--kp-radius-pill: 999px; /* badges, chips */

	/* ---------- Layout ---------- */
	--kp-container: 1440px;
	--kp-container-narrow: 860px;  /* text pages */
	--kp-gutter: 16px;             /* mobile side padding */
	--kp-header-h: 72px;

	/* ---------- Controls ---------- */
	--kp-control-h-sm: 36px;
	--kp-control-h:    44px;   /* min touch target */
	--kp-control-h-lg: 52px;

	/* ---------- Motion ---------- */
	--kp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--kp-dur-fast: 120ms;
	--kp-dur: 180ms;
	--kp-dur-slow: 280ms;

	/* ---------- Layers ---------- */
	--kp-z-header: 100;
	--kp-z-dropdown: 200;
	--kp-z-overlay: 900;
	--kp-z-modal: 1000;
}

/* Breakpoints (CSS variables can't be used inside @media, so these are the fixed values):
   mobile   : < 640px
   tablet   : 640px – 1023px
   desktop  : 1024px – 1279px
   wide     : 1280px – 1439px
   xl       : >= 1440px            */
@media (min-width: 640px)  { :root { --kp-gutter: 24px; } }
@media (min-width: 1024px) { :root { --kp-gutter: 32px; --kp-header-h: 80px; } }