/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

/*
 * Demonstration Healthcare design tokens
 * ----------------------------------------------------------------------------
 * Single source of truth for color, type, space, radius, and motion.
 * theme.json names a curated subset of these, so the block editor and the
 * front end resolve to the same token. No raw hex outside this file.
 *
 * WHERE THIS PALETTE COMES FROM
 *
 * It is the scheme the Drupal consultant built, recovered from the modins
 * theme variables and confirmed by sampling the rendered screenshots:
 *
 *     --modins-theme-color        #00CDE5   bright cyan, buttons and top bar
 *     --modins-theme-color-second #2B2B5E   deep indigo, structure and headings
 *     card icon blocks            #000ACE   saturated royal blue
 *     alternating sections        #F2F1F6   lavender-tinted gray
 *
 * Indigo and royal blue were already fine. White on #2B2B5E is 13.04:1 and
 * white on #000ACE is 10.85:1.
 *
 * The cyan was not. White on #00CDE5 measures 1.93:1, and that is exactly how
 * their primary button and their utility bar were built. The obvious fix is to
 * darken the cyan until white works on it, but that turns a bright accent into
 * a dull teal and loses the thing that made the scheme feel like a tech brand.
 *
 * So the cyan is kept exactly as they chose it, and the label on it becomes
 * dark indigo instead of white: 8.50:1 rather than 1.93:1. Their color
 * survives untouched. Only what sits on top of it changed.
 *
 * Each anchor is pinned into its ramp at the nearest step, so this file
 * literally contains their values. Everything else is derived in OKLCH for
 * perceptually even lightness, gamut-clamped per step.
 *
 * Regenerate and verify:  python3 build/palette.py --check
 * Current status: all 74 token pairs pass WCAG 2.2 AA.
 */

:root {
	/* ---- indigo: structure, headings, dark surfaces ---- */
	--dhc-indigo-50: #F7F8FF;
	--dhc-indigo-100: #EDEFFF;
	--dhc-indigo-200: #DBDFFF;
	--dhc-indigo-300: #C2C7FF;
	--dhc-indigo-400: #A6ACE6;
	--dhc-indigo-500: #8D92CE;
	--dhc-indigo-600: #767AB4;
	--dhc-indigo-700: #5E6199;
	--dhc-indigo-800: #47497E;
	--dhc-indigo-900: #2B2B5E;   /* their exact value */
	--dhc-indigo-950: #1B1A44;
	--dhc-indigo-975: #0F0C35;
	--dhc-indigo-990: #060025;

	/* ---- cyan: accent fills and highlights ---- */
	--dhc-cyan-50: #ECFCFF;
	--dhc-cyan-100: #D2F8FF;
	--dhc-cyan-200: #9FF1FF;
	--dhc-cyan-300: #5DE1F6;
	--dhc-cyan-400: #00CDE5;   /* their exact value */
	--dhc-cyan-500: #00ABC0;
	--dhc-cyan-600: #0091A2;
	--dhc-cyan-700: #007583;
	--dhc-cyan-800: #005B66;
	--dhc-cyan-900: #003D45;
	--dhc-cyan-950: #00262B;

	/* ---- azure: text links on light surfaces ---- */
	--dhc-azure-50: #F5F9FF;
	--dhc-azure-100: #E9F0FF;
	--dhc-azure-200: #D3E2FF;
	--dhc-azure-300: #B3CCFF;
	--dhc-azure-400: #8AB0FF;
	--dhc-azure-500: #6293FF;
	--dhc-azure-600: #3A73FF;
	--dhc-azure-700: #000ACE;   /* their exact value */
	--dhc-azure-800: #012CD8;
	--dhc-azure-900: #001A99;
	--dhc-azure-950: #000D65;

	/* ---- red: emergency and destructive states only ---- */
	--dhc-red-50: #FFF6F5;
	--dhc-red-100: #FFEBE8;
	--dhc-red-200: #FFD6D0;
	--dhc-red-300: #FFB8AC;
	--dhc-red-400: #FF8B7B;
	--dhc-red-500: #FF5545;
	--dhc-red-600: #E53126;
	--dhc-red-700: #C40003;
	--dhc-red-800: #9A0002;
	--dhc-red-900: #6A0001;
	--dhc-red-950: #450000;

	/* ---- slate: lavender-tinted neutral ---- */
	--dhc-slate-50: #F9F7FF;
	--dhc-slate-100: #F2F1F6;   /* their exact value */
	--dhc-slate-200: #E1E0E7;
	--dhc-slate-300: #CCCBD2;
	--dhc-slate-400: #B1B0B7;
	--dhc-slate-500: #98979E;
	--dhc-slate-600: #807F86;
	--dhc-slate-700: #68666D;
	--dhc-slate-800: #504F55;
	--dhc-slate-900: #36343A;
	--dhc-slate-950: #212025;
	--dhc-slate-975: #141318;

	/* =====================================================================
	 * SEMANTIC TOKENS - light theme
	 * Ratios are measured against the surface each one sits on.
	 * ===================================================================== */
	--dhc-surface:          var(--dhc-slate-50);
	--dhc-surface-raised:   #FFFFFF;
	--dhc-surface-sunken:   var(--dhc-slate-100);
	--dhc-surface-accent:   var(--dhc-cyan-50);

	/* Brand bands (hero, utility bar, footer, feature tile) stay dark in BOTH
	   themes. They are a fixed brand surface, not an inverted one: flipping
	   them to light in dark mode would put light text on a light ground. */
	--dhc-surface-inverse:  var(--dhc-indigo-900);
	--dhc-surface-feature:  var(--dhc-indigo-950);
	--dhc-border-feature:   var(--dhc-indigo-950);


	--dhc-text:             var(--dhc-slate-900);  /* 11.57:1 */
	--dhc-text-strong:      var(--dhc-indigo-900); /* 12.28:1 */
	--dhc-text-muted:       var(--dhc-slate-700);  /* 5.33:1 */
	--dhc-text-inverse:     var(--dhc-slate-50);   /* 12.28:1 on the band */

	/* The accent is their bright cyan, unchanged. What sits on it is dark. */
	--dhc-accent:           var(--dhc-cyan-400);   /* their #00CDE5 */
	--dhc-accent-hover:     var(--dhc-cyan-300);
	--dhc-accent-contrast:  var(--dhc-indigo-950); /* 8.50:1 on the fill */
	--dhc-accent-quiet:     var(--dhc-cyan-50);

	/* Text links need a foreground that works on a light ground, which the
	   bright cyan cannot do. Their royal blue already does, at 10.85:1. */
	--dhc-link:             var(--dhc-azure-700); /* their #000ACE, 10.22:1 */
	--dhc-link-hover:       var(--dhc-azure-900);

	--dhc-secondary:        var(--dhc-indigo-900); /* 12.28:1 */
	--dhc-secondary-hover:  var(--dhc-indigo-950);
	--dhc-secondary-quiet:  var(--dhc-indigo-50);

	--dhc-danger:           var(--dhc-red-700);    /* 5.91:1 */
	--dhc-danger-hover:     var(--dhc-red-800);
	--dhc-danger-quiet:     var(--dhc-red-50);

	--dhc-success:          var(--dhc-cyan-800);
	--dhc-success-quiet:    var(--dhc-cyan-50);

	/* Subtle borders are decorative dividers and need no minimum ratio.
	   Strong borders identify component boundaries (form inputs) and are held
	   to WCAG 1.4.11 at 3:1. slate-600 clears it on every surface, both themes. */
	--dhc-border-subtle:    var(--dhc-slate-300);
	--dhc-border-strong:    var(--dhc-slate-600);  /* 3.73:1 */

	--dhc-focus:            var(--dhc-cyan-600);   /* 3.55:1 on surface */

	--dhc-shadow-sm: 0 1px 2px rgba(27, 26, 68, .06), 0 1px 3px rgba(27, 26, 68, .08);
	--dhc-shadow-md: 0 2px 4px rgba(27, 26, 68, .05), 0 4px 12px rgba(27, 26, 68, .08);
	--dhc-shadow-lg: 0 4px 8px rgba(27, 26, 68, .05), 0 12px 32px rgba(27, 26, 68, .10);

	/* =====================================================================
	 * TYPE
	 * Source Serif 4 for display, echoing the serif wordmark in the logo.
	 * Public Sans for everything functional.
	 * Fluid sizes clamp between a 320px and a 1280px viewport.
	 * ===================================================================== */
	--dhc-font-display: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
	--dhc-font-sans:    "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dhc-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--dhc-text-xs:   0.8125rem;                               /* 13px, metadata only */
	--dhc-text-sm:   0.875rem;                                /* 14px */
	--dhc-text-base: clamp(1rem, 0.96rem + 0.21vw, 1.125rem); /* 16 -> 18 */
	--dhc-text-lg:   clamp(1.125rem, 1.07rem + 0.26vw, 1.3125rem);
	--dhc-text-xl:   clamp(1.3125rem, 1.23rem + 0.42vw, 1.625rem);
	--dhc-text-2xl:  clamp(1.5rem, 1.35rem + 0.75vw, 2.0625rem);
	--dhc-text-3xl:  clamp(1.875rem, 1.63rem + 1.22vw, 2.75rem);
	--dhc-text-4xl:  clamp(2.25rem, 1.86rem + 1.95vw, 3.625rem);
	--dhc-text-5xl:  clamp(2.625rem, 2.02rem + 3.02vw, 4.75rem);

	--dhc-leading-tight:   1.15;
	--dhc-leading-snug:    1.3;
	--dhc-leading-normal:  1.6;
	--dhc-leading-relaxed: 1.75;

	--dhc-tracking-tight:  -0.02em;
	--dhc-tracking-normal: 0;
	--dhc-tracking-wide:   0.02em;
	--dhc-tracking-caps:   0.08em;

	/* Body copy never goes below 400. Section 7.1: thin type on pale gray is
	   the single most common automated accessibility failure. */
	--dhc-weight-normal:   400;
	--dhc-weight-medium:   500;
	--dhc-weight-semibold: 600;
	--dhc-weight-bold:     700;

	--dhc-measure:       68ch;  /* body copy, inside the 45-75ch band */
	--dhc-measure-short: 46ch;  /* intros and pull quotes */

	/* ---- space: 4pt rhythm ---------------------------------------------- */
	--dhc-space-3xs: 0.25rem;
	--dhc-space-2xs: 0.5rem;
	--dhc-space-xs:  0.75rem;
	--dhc-space-sm:  1rem;
	--dhc-space-md:  1.5rem;
	--dhc-space-lg:  2rem;
	--dhc-space-xl:  3rem;
	--dhc-space-2xl: 4rem;
	--dhc-space-3xl: 6rem;
	--dhc-space-4xl: 8rem;

	--dhc-section-y: clamp(3rem, 2rem + 5vw, 6rem);
	--dhc-gutter:    clamp(1rem, 0.5rem + 2.5vw, 2rem);

	--dhc-content-width: 44rem;
	--dhc-wide-width:    78rem;

	/* ---- radius: generous, echoing the circular logo mark ---------------- */
	--dhc-radius-sm:   0.375rem;
	--dhc-radius-md:   0.625rem;
	--dhc-radius-lg:   1rem;
	--dhc-radius-xl:   1.5rem;
	--dhc-radius-full: 999rem;

	/* ---- motion: information, not wallpaper ------------------------------ */
	--dhc-duration-fast: 120ms;
	--dhc-duration-base: 200ms;
	--dhc-duration-slow: 320ms;
	--dhc-ease:          cubic-bezier(.2, 0, .2, 1);
	--dhc-ease-out:      cubic-bezier(0, 0, .2, 1);

	/* Minimum hit area. WCAG 2.5.8 requires 24px; 44px is the safer touch
	   target and is what this theme actually ships. */
	--dhc-target-min: 44px;
	/* The WCAG 2.5.8 floor rather than the comfortable size. For
	   secondary controls where 44px would dominate the layout, such as
	   the consent banner byline. Primary actions use target-min. */
	--dhc-target-alt: 24px;

	--dhc-header-height: 4rem;

	color-scheme: light;
}

/* =========================================================================
 * DARK THEME
 * Designed, not inverted. The accent stays their exact cyan; the surfaces
 * move down the indigo ramp. Guarded with :not([data-theme="light"]) so an
 * explicit light choice beats the system preference.
 * ========================================================================= */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--dhc-surface:         var(--dhc-indigo-975);
		--dhc-surface-raised:  var(--dhc-indigo-900);
		--dhc-surface-sunken:  var(--dhc-indigo-990);
		--dhc-surface-accent:  var(--dhc-indigo-950);

		/* The band goes deeper than the page rather than flipping to light. */
		--dhc-surface-inverse: var(--dhc-indigo-950);
		--dhc-surface-feature: var(--dhc-azure-900);
		--dhc-border-feature:  var(--dhc-cyan-600);

		--dhc-text:            var(--dhc-slate-200);  /* 14.25:1 */
		--dhc-text-strong:     #FFFFFF;               /* 18.68:1 */
		--dhc-text-muted:      var(--dhc-slate-400);  /* 8.68:1 */
		--dhc-text-inverse:    var(--dhc-slate-50);   /* unchanged across themes */

		--dhc-accent:          var(--dhc-cyan-400);   /* their #00CDE5, unchanged */
		--dhc-accent-hover:    var(--dhc-cyan-300);
		--dhc-accent-contrast: var(--dhc-indigo-950); /* 8.50:1 on the fill */
		--dhc-accent-quiet:    var(--dhc-indigo-950);

		/* Royal blue is too dark to read on a dark ground, so links move up
		   the cyan ramp here instead. */
		--dhc-link:            var(--dhc-cyan-300);   /* 12.07:1 */
		--dhc-link-hover:      var(--dhc-cyan-200);

		--dhc-secondary:       var(--dhc-cyan-400);   /* 9.66:1 */
		--dhc-secondary-hover: var(--dhc-cyan-300);
		--dhc-secondary-quiet: var(--dhc-indigo-950);

		--dhc-danger:          var(--dhc-red-400);    /* 8.21:1 */
		--dhc-danger-hover:    var(--dhc-red-300);
		--dhc-danger-quiet:    var(--dhc-red-950);

		--dhc-success:         var(--dhc-cyan-300);
		--dhc-success-quiet:   var(--dhc-indigo-950);

		--dhc-border-subtle:   var(--dhc-indigo-800);
		--dhc-border-strong:   var(--dhc-slate-600);  /* 4.71:1 */

		--dhc-focus:           var(--dhc-cyan-600);   /* 4.96:1 on surface */

		--dhc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--dhc-shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .4);
		--dhc-shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .45);

		color-scheme: dark;
	}
}

/* An explicit choice from the theme toggle wins in both directions. */
:root[data-theme="dark"] {
	--dhc-surface:         var(--dhc-indigo-975);
	--dhc-surface-raised:  var(--dhc-indigo-900);
	--dhc-surface-sunken:  var(--dhc-indigo-990);
	--dhc-surface-accent:  var(--dhc-indigo-950);

	/* The band goes deeper than the page rather than flipping to light. */
	--dhc-surface-inverse: var(--dhc-indigo-950);
	--dhc-surface-feature: var(--dhc-azure-900);
	--dhc-border-feature:  var(--dhc-cyan-600);

	--dhc-text:            var(--dhc-slate-200);  /* 14.25:1 */
	--dhc-text-strong:     #FFFFFF;               /* 18.68:1 */
	--dhc-text-muted:      var(--dhc-slate-400);  /* 8.68:1 */
	--dhc-text-inverse:    var(--dhc-slate-50);   /* unchanged across themes */

	--dhc-accent:          var(--dhc-cyan-400);   /* their #00CDE5, unchanged */
	--dhc-accent-hover:    var(--dhc-cyan-300);
	--dhc-accent-contrast: var(--dhc-indigo-950); /* 8.50:1 on the fill */
	--dhc-accent-quiet:    var(--dhc-indigo-950);

	/* Royal blue is too dark to read on a dark ground, so links move up
	   the cyan ramp here instead. */
	--dhc-link:            var(--dhc-cyan-300);   /* 12.07:1 */
	--dhc-link-hover:      var(--dhc-cyan-200);

	--dhc-secondary:       var(--dhc-cyan-400);   /* 9.66:1 */
	--dhc-secondary-hover: var(--dhc-cyan-300);
	--dhc-secondary-quiet: var(--dhc-indigo-950);

	--dhc-danger:          var(--dhc-red-400);    /* 8.21:1 */
	--dhc-danger-hover:    var(--dhc-red-300);
	--dhc-danger-quiet:    var(--dhc-red-950);

	--dhc-success:         var(--dhc-cyan-300);
	--dhc-success-quiet:   var(--dhc-indigo-950);

	--dhc-border-subtle:   var(--dhc-indigo-800);
	--dhc-border-strong:   var(--dhc-slate-600);  /* 4.71:1 */

	--dhc-focus:           var(--dhc-cyan-600);   /* 4.96:1 on surface */

	--dhc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--dhc-shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .4);
	--dhc-shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .45);

	color-scheme: dark;
}

/* Motion is opt-out at the token level, so nothing has to remember to check. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dhc-duration-fast: 0.01ms;
		--dhc-duration-base: 0.01ms;
		--dhc-duration-slow: 0.01ms;
	}
}