/* ============================================================
   Bastion v0.3.1 — design tokens (REPALETTE)
   LIGHT-FIRST. Wiz / Tailscale / SentinelOne palette family:
   deep navy + electric cyan + sky-blue. NO purple, NO pink.
   ============================================================ */

@layer reset, tokens, base, components, utilities;

@layer tokens {

	:root {
		/* ---------- Surface (light, neutral with slight blue undertone) ---------- */
		--c-canvas:        #ffffff;
		--c-raised:        #f8fafc;
		--c-sunken:        #f1f5f9;
		--c-overlay:       #ffffff;

		--c-border-subtle: #e2e8f0;
		--c-border:        #cbd5e1;
		--c-border-strong: #94a3b8;

		/* ---------- Text (deep slate on light) ---------- */
		--c-text:          #0f172a;
		--c-text-muted:    #475569;
		--c-text-subtle:   #64748b;
		--c-text-inverse:  #ffffff;

		/* ---------- Brand: navy + cyan family (NO purple, NO pink) ---------- */
		--c-navy:          #0f172a;
		--c-navy-2:        #1e293b;
		--c-cyan:          #06b6d4;  /* cyan-500 — bright */
		--c-cyan-2:        #0891b2;  /* cyan-600 — primary accent */
		--c-cyan-3:        #0e7490;  /* cyan-700 — darker */
		--c-sky:           #0ea5e9;  /* sky-500 */
		--c-sky-2:         #0284c7;  /* sky-600 */
		--c-sky-3:         #0369a1;  /* sky-700 */

		/* Public-facing accent tokens (what components reach for) */
		--c-accent:         var(--c-cyan-2);
		--c-accent-strong:  var(--c-cyan-3);
		--c-accent-soft:    #ecfeff;          /* cyan-50 */
		--c-accent-deep:    var(--c-navy);    /* navy backdrop */

		/* ---------- Semantic (success / warning / danger — unchanged where safe) ---------- */
		/* Green ONLY used as success indicator (checkmarks / pills) per rule -1 */
		--c-success:       #16a34a;
		--c-warning:       #f59e0b;
		--c-danger:        #dc2626;
		--c-info:          var(--c-sky);

		/* ---------- Gradients (navy + cyan + sky — no purple/pink) ---------- */
		--grad-brand:    linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0369a1 100%);
		--grad-brand-d:  linear-gradient(135deg, #0f172a 0%, #0891b2 50%, #0369a1 100%);
		--grad-navy:     linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
		--grad-cyan:     linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
		--grad-sky:      linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
		--grad-blue:     linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
		--grad-teal:     linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
		--grad-slate:    linear-gradient(135deg, #475569 0%, #1e293b 100%);
		--grad-green:    linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
		--grad-amber:    linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
		--grad-red:      linear-gradient(135deg, #dc2626 0%, #f87171 100%);

		/* ---------- Typography ---------- */
		--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
		--font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

		--fs-xs:   0.75rem;
		--fs-sm:   0.875rem;
		--fs-base: 1rem;
		--fs-lg:   1.125rem;
		--fs-xl:   1.5rem;
		--fs-2xl:  2rem;
		--fs-3xl:  2.5rem;
		--fs-4xl:  3.25rem;
		--fs-5xl:  4rem;

		--lh-tight:   1.15;
		--lh-snug:    1.3;
		--lh-base:    1.6;
		--lh-loose:   1.75;

		/* ---------- Spacing ---------- */
		--space-0:  0;
		--space-1:  4px;
		--space-2:  8px;
		--space-3:  12px;
		--space-4:  16px;
		--space-5:  24px;
		--space-6:  32px;
		--space-7:  48px;
		--space-8:  64px;
		--space-9:  96px;
		--space-10: 128px;

		/* ---------- Radius ---------- */
		--radius-sm: 6px;
		--radius:    10px;
		--radius-lg: 14px;
		--radius-xl: 20px;
		--radius-full: 9999px;

		/* ---------- Shadows ---------- */
		--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
		--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
		--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.07);
		--shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 32px 48px -16px rgba(15, 23, 42, 0.08);
		--shadow-brand: 0 10px 25px -5px rgba(8, 145, 178, 0.35);

		/* ---------- Motion ---------- */
		--ease-out: cubic-bezier(0.16, 1, 0.30, 1);
		--ease-in:  cubic-bezier(0.70, 0, 0.84, 0);
		--ease-base: cubic-bezier(0.4, 0, 0.2, 1);
		--motion-fast:       160ms;
		--motion-base:       240ms;
		--motion-deliberate: 360ms;

		/* ---------- Layout ---------- */
		--page-max:   1280px;
		--prose-max:  720px;
	}

	/* Optional dark-mode override */
	:root.theme-dark, :root[data-theme="dark"] {
		--c-canvas:        #0f172a;
		--c-raised:        #1e293b;
		--c-sunken:        #0b1220;
		--c-overlay:       #1e293b;
		--c-border-subtle: #1e293b;
		--c-border:        #334155;
		--c-border-strong: #475569;
		--c-text:          #f1f5f9;
		--c-text-muted:    #cbd5e1;
		--c-text-subtle:   #94a3b8;
		--c-text-inverse:  #0f172a;
		--c-accent-soft:   #083344;
		--shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
		--shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
		--shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.4);
		--shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 32px 48px -16px rgba(0,0,0,0.5);
	}
}