/**
 * CliniEd — Design Tokens
 * ---------------------------------------------------------------------------
 * SINGLE SOURCE OF TRUTH for the entire visual language.
 *
 * Every value below is sampled directly from the approved front-page design
 * export (Clinied.com_Frontend_Rebuild). Do not invent colours here — if the
 * design changes, re-sample it and mirror the result into this file.
 *
 * Locked rules from the design:
 *   - ONE accent violet, #6152B8. Never teal, never blue.
 *   - Never pure black; ink is #14151F.
 *   - The page ground below the hero is a flat lavender #F5F5FA, top to
 *     bottom, footer included. Sections are separated by a hairline rule,
 *     not by alternating tints. Cards sit on it in pure white.
 *   - The deep indigo band (#292546) appears ONCE, as the closing CTA.
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. Core palette (from the design contract)
	 * ------------------------------------------------------------ */
	--ce-bg:        #ffffff;  /* cards, hero wash                         */
	--ce-surface:   #f5f5fa;  /* the page ground below the hero           */
	--ce-ink:       #14151f;  /* headings and primary text (never #000)   */
	--ce-muted:     #5a5a68;  /* supporting body copy                     */
	--ce-divider:   #e6e6ee;  /* hairlines and borders                    */

	--ce-accent:        #6152b8;  /* numerals, labels, bars, avatars      */
	--ce-accent-solid:  #6152b8;  /* filled buttons                       */
	--ce-accent-hover:  #52449e;  /* filled button hover                  */
	--ce-accent-tint:   #eceafa;  /* soft accent wash                     */
	--ce-accent-light:  #988ed0;  /* the lighter end of a bar ramp        */

	--ce-indigo:      #292546;  /* closing CTA band only                  */
	--ce-indigo-text: #cfccdf;  /* body copy on the indigo band           */

	/* Neutral ramp derived from the ink/divider pair, for shadows and
	   incidental UI. Kept deliberately small — the design is near-flat. */
	--ce-white:     #ffffff;
	--ce-grey-50:   #fafafd;
	--ce-grey-100:  #f5f5fa;
	--ce-grey-200:  #e6e6ee;
	--ce-grey-300:  #cfcfdd;
	--ce-grey-400:  #9494a4;
	--ce-grey-500:  #5a5a68;
	--ce-grey-700:  #35353f;

	/* ---------------------------------------------------------------
	 * 2. Semantic roles (what components reference)
	 * ------------------------------------------------------------ */
	--ce-text:            var(--ce-ink);
	--ce-text-muted:      var(--ce-muted);
	--ce-text-invert:     var(--ce-white);
	--ce-heading:         var(--ce-ink);

	--ce-primary:          var(--ce-accent-solid);
	--ce-primary-hover:    var(--ce-accent-hover);
	--ce-primary-soft:     var(--ce-accent-tint);
	--ce-primary-contrast: var(--ce-white);

	--ce-surface-default: var(--ce-bg);
	--ce-surface-alt:     var(--ce-surface);
	--ce-surface-sunken:  var(--ce-surface);
	--ce-surface-invert:  var(--ce-indigo);

	--ce-border:          var(--ce-divider);
	--ce-border-strong:   var(--ce-grey-300);

	/* Status colours. The contract gives only two: accent purple for a
	   pass/positive tag, muted grey for fail/negative. Nothing else is
	   introduced, so the single-accent rule holds. */
	--ce-positive:      var(--ce-accent);
	--ce-positive-soft: var(--ce-accent-tint);
	--ce-negative:      var(--ce-muted);
	--ce-negative-soft: var(--ce-grey-100);

	/* ---------------------------------------------------------------
	 * 3. Typography — Inter throughout
	 * ------------------------------------------------------------ */
	--ce-font-heading: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ce-font-body:    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ce-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ce-fw-body:    400;
	--ce-fw-medium:  500;
	--ce-fw-heading: 600;  /* contract: heading weight 600, not 700/800 */
	--ce-fw-bold:    700;  /* numerals only (01/02/03)                  */

	/* Type scale. Density dial is 0.35 (fairly airy), variance 0.35
	   (moderate contrast) — so the ramp is restrained, not dramatic. */
	--ce-fs-xxs:  0.6875rem;  /* 11px — category labels        */
	--ce-fs-xs:   0.75rem;    /* 12px — eyebrows               */
	--ce-fs-sm:   0.8125rem;  /* 13px — stat lines, captions   */
	--ce-fs-base: 0.9375rem;  /* 15px                          */
	--ce-fs-md:   1rem;       /* 16px — body                   */
	--ce-fs-lg:   clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
	--ce-fs-xl:   clamp(1.1875rem, 0.4vw + 1.09rem, 1.375rem);
	--ce-fs-2xl:  clamp(1.4375rem, 0.8vw + 1.26rem, 1.75rem);
	--ce-fs-3xl:  clamp(1.75rem, 1.5vw + 1.4rem, 2.375rem);
	--ce-fs-4xl:  clamp(2.125rem, 2.4vw + 1.6rem, 3rem);

	--ce-lh-tight:   1.12;  /* contract: ~1.15 on large type */
	--ce-lh-snug:    1.28;
	--ce-lh-normal:  1.6;
	--ce-lh-relaxed: 1.7;

	--ce-tracking-tight: -0.015em;
	--ce-tracking-label:  0.08em;  /* category labels  */
	--ce-tracking-eyebrow:0.14em;  /* hero eyebrow     */

	/* ---------------------------------------------------------------
	 * 4. Spacing — contract: sm 8, md 16, lg 32
	 * ------------------------------------------------------------ */
	--ce-space-1:  4px;
	--ce-space-2:  8px;
	--ce-space-3:  12px;
	--ce-space-4:  16px;
	--ce-space-5:  20px;
	--ce-space-6:  24px;
	--ce-space-8:  32px;
	--ce-space-10: 40px;
	--ce-space-12: 48px;
	--ce-space-14: 56px;
	--ce-space-16: 64px;
	--ce-space-20: 80px;

	/* Section rhythm, matching the live new-design page (56–80px). */
	--ce-section-y:    clamp(2.75rem, 5vw, 4rem);   /* 44 → 64px */
	--ce-section-y-lg: clamp(3.5rem,  6vw, 5rem);   /* 56 → 80px */

	/* ---------------------------------------------------------------
	 * 5. Layout — contract: max content width ~1180px
	 * ------------------------------------------------------------ */
	--ce-container:        1180px;
	--ce-container-wide:   1180px;
	--ce-container-narrow: 760px;
	--ce-gutter: clamp(1.25rem, 3vw, 1.75rem);  /* live page uses 28px */

	/* ---------------------------------------------------------------
	 * 6. Radii — contract: sm 6, md 10 (buttons), lg 16 (cards)
	 * ------------------------------------------------------------ */
	--ce-radius-sm:  6px;
	--ce-radius-md:  10px;
	--ce-radius-lg:  16px;
	--ce-radius-pill: 999px;  /* nav active pill only */

	/* ---------------------------------------------------------------
	 * 7. Elevation — soft shadows only, on lavender grounds
	 * ------------------------------------------------------------ */
	--ce-shadow-xs: 0 1px 2px rgba(20, 21, 31, 0.04);
	--ce-shadow-sm: 0 2px 8px rgba(41, 37, 70, 0.05);
	--ce-shadow-md: 0 8px 24px -8px rgba(41, 37, 70, 0.10);
	--ce-shadow-lg: 0 18px 40px -16px rgba(41, 37, 70, 0.16);
	--ce-focus-ring: 0 0 0 3px rgba(97, 82, 184, 0.32);

	/* ---------------------------------------------------------------
	 * 8. Motion — dial is 0.25, so movement stays subtle
	 * ------------------------------------------------------------ */
	--ce-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ce-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ce-dur-fast: 120ms;
	--ce-dur: 200ms;
	--ce-dur-slow: 320ms;

	/* Hero wash — contract: cream/white gradient for legibility,
	   explicitly NOT a dark overlay. */
	--ce-hero-wash: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(255, 255, 255, 0.78) 42%,
		rgba(255, 255, 255, 0) 72%
	);

	/* Per-card rule colour. Components may override this inline, but it
	   always resolves to the single locked accent by default. */
	--ce-card-rule: var(--ce-accent);

	/* Z-index ladder */
	--ce-z-header: 900;
	--ce-z-drawer: 950;
	--ce-z-modal: 1000;
}

/*
 * No dark-mode block.
 *
 * The design specifies a lavender-ground identity with white cards and a
 * single indigo band. Inventing a dark palette would mean inventing colours
 * the design does not define, so the site renders in its one intended
 * appearance. `color-scheme: light` stops the browser from force-darkening
 * form controls.
 */
:root { color-scheme: light; }