/**
 * Digital360 design tokens.
 *
 * Every colour below was measured against its intended background before being
 * admitted. The two brand colours from the logo fail text contrast (azure
 * 2.56:1, green 2.40:1), so they are display-only: large marks, chart fills and
 * illustration. Anything carrying text or conveying state uses a darker
 * derivative from the same hue family.
 */

:root {
	/* -- Brand. Display only. Never behind text. -------------------------- */
	--d360-azure: #00adee; /* 2.56:1 on white */
	--d360-green: #5ebb5e; /* 2.40:1 on white */

	/* -- Interactive ------------------------------------------------------ */
	--d360-action: #0a72a0;       /* 5.35:1  buttons, links, focus */
	--d360-action-hover: #075e82; /* 7.16:1 */
	--d360-action-tint: #e6f4fa;

	/* -- Score ring. The track is a tint of the brand azure rather than neutral
	      grey, so the unearned part of a score still reads as part of the same
	      object instead of as empty space. ------------------------------- */
	--d360-ring-from: var(--d360-azure);
	--d360-ring-to: #0a72a0;
	--d360-ring-track: color-mix(in srgb, var(--d360-azure) 15%, #ffffff);

	/* -- Semantic --------------------------------------------------------- */
	--d360-success: #2e7d34;      /* 5.12:1  derived from the logo green */
	--d360-success-tint: #eaf6ea;
	--d360-danger: #b42318;       /* 6.57:1 */
	--d360-danger-tint: #fdecea;
	--d360-warning: #9a3c06;      /* 6.95:1 */
	--d360-warning-tint: #fef3e6;

	/* -- Neutrals. The muted step is the logo's own grey. ------------------ */
	--d360-ink: #111318;          /* 18.58:1 */
	--d360-ink-2: #3a3d45;        /* 10.86:1 */
	--d360-ink-3: #6d6e70;        /*  5.10:1 */
	--d360-border: #c9cacc;
	--d360-hairline: #e6e5e3;
	--d360-surface: #ffffff;
	--d360-paper: #fbfaf8;

	/* -- Topic hues.
	      These are identity *affordances*, not a categorical chart palette: every
	      dot ships beside its topic's text label, so colour never carries identity
	      alone. They are stepped dark (all >= 4.9:1 on white) to stay crisp at 8px,
	      which is deliberately the opposite trade from a chart palette — CVD
	      separation there is bought with lightness variation this rules out.
	      Score bars use a single hue instead; see .d360-bar__fill. -------------- */
	--d360-topic-google-ads: #1a6fd4;      /* 4.92:1 */
	--d360-topic-meta-ads: #5b3bc4;        /* 7.32:1 */
	--d360-topic-analytics: #8b2fb8;       /* 6.57:1 */
	--d360-topic-tracking: #b31f7a;        /* 6.19:1 */
	--d360-topic-cro: #c2410c;             /* 5.18:1 */
	--d360-topic-seo: #0e7c6b;             /* 5.10:1 */
	--d360-topic-landing-pages: #9a3412;   /* 7.31:1 */
	--d360-topic-strategy: #475569;        /* 7.58:1 */
	--d360-topic-ai-marketing: #be123c;    /* 6.29:1 */
	--d360-topic-email-marketing: #0369a1; /* 5.93:1 */

	/* -- Type. Inter and IBM Plex Mono are self-hosted at Stage 10; the
	      system stack stands in until then. ------------------------------- */
	--d360-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--d360-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--d360-fs-100: 0.75rem;    /* 12 */
	--d360-fs-200: 0.875rem;   /* 14 */
	--d360-fs-300: 1rem;       /* 16 */
	--d360-fs-400: 1.125rem;   /* 18 */
	--d360-fs-500: 1.3125rem;  /* 21 */
	--d360-fs-600: 1.625rem;   /* 26 */
	--d360-fs-700: 1.9375rem;  /* 31 */
	--d360-fs-800: 2.3125rem;  /* 37 */
	--d360-fs-900: 2.75rem;    /* 44 */

	--d360-lh-tight: 1.15;
	--d360-lh-snug: 1.35;
	--d360-lh-body: 1.6;

	/* -- Space. 4px base. ------------------------------------------------- */
	--d360-sp-1: 0.25rem;
	--d360-sp-2: 0.5rem;
	--d360-sp-3: 0.75rem;
	--d360-sp-4: 1rem;
	--d360-sp-6: 1.5rem;
	--d360-sp-8: 2rem;
	--d360-sp-12: 3rem;
	--d360-sp-16: 4rem;
	--d360-sp-24: 6rem;

	/* -- Structure -------------------------------------------------------- */
	--d360-measure: 68ch;
	--d360-width-content: 45rem;  /* 720 */
	--d360-width-wide: 67.5rem;   /* 1080 */
	--d360-width-full: 80rem;     /* 1280 */

	--d360-radius-control: 6px;
	--d360-radius-card: 12px;
	--d360-radius-pill: 999px;

	--d360-shadow-card: 0 1px 2px rgb(17 19 24 / 4%), 0 4px 12px rgb(17 19 24 / 5%);
	--d360-shadow-lift: 0 2px 4px rgb(17 19 24 / 5%), 0 12px 28px rgb(17 19 24 / 9%);

	--d360-ease: cubic-bezier(0.2, 0, 0.2, 1);
	--d360-dur: 180ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--d360-dur: 0ms;
	}
}