/* ================================================================
   SmartGym · brand.css — THE WHITELABEL FILE
   ----------------------------------------------------------------
   A gym reskins the app by editing this file and nothing else:
     1. Swap the color tokens for the gym's palette.
     2. Swap the font tokens (and the font <link> in index.html).
     3. Replace wwwroot/images/logo-transparent.webp and icon-192.png.
     4. Update names in Branding.cs and the <title> in index.html.
   Every component and page reads these tokens — no brand value is
   hard-coded anywhere else. See BRANDING.md at the repo root.

   Current skin: Coach Tane Fitness — https://www.coachtanefitness.nz
   (deep-ocean ink, koru cyan, sunshine yellow)
   ================================================================ */

:root {
	/* --- Ink (text) --- */
	--ink: #0b2b30;          /* primary text */
	--ink-2: #47656b;        /* secondary text */
	--ink-3: #7b9297;        /* muted labels, captions */

	/* --- Surfaces --- */
	--surface-page: #f2f7f8; /* app background */
	--surface-card: #ffffff; /* cards, inputs */
	--surface-sunken: #e9f1f3; /* wells, calendar out-of-month */
	--hairline: #dce8ea;     /* borders, dividers */

	/* --- Brand color --- */
	--primary: #0e8a96;         /* actions, links, data */
	--primary-strong: #0b6e78;  /* hover / pressed */
	--primary-soft: #dff3f5;    /* tinted backgrounds */
	--glow: #2ce8f5;            /* bright brand pop — dark surfaces only */

	--accent: #ffc933;          /* the highlighter — use sparingly */
	--accent-ink: #5c4300;      /* text on accent */

	/* --- Hero swell band (dark panel each page opens with) --- */
	--hero-grad: linear-gradient(135deg, #05242c 0%, #0a3f49 60%, #0d5560 100%);
	--hero-ink: #eafbfd;        /* text on the hero */
	--hero-ink-2: #9fd3da;      /* secondary text on the hero */

	/* --- Feedback --- */
	--ok: #1b8a4c;
	--danger: #c23636;

	/* --- Data viz --- */
	--viz-line: #0e8a96;        /* single-series line */
	--viz-grid: #e4edef;        /* hairline gridlines */
	--viz-axis: #90a6aa;        /* tick labels */
	--viz-target: #a87e00;      /* goal/target reference line */

	/* --- Type --- */
	--font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
	--font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
	--display-stretch: 125%;    /* width axis for the display face */

	/* --- Shape & depth --- */
	--r-card: 18px;
	--r-ctl: 12px;
	--r-pill: 999px;
	--shadow-card: 0 1px 2px rgba(11, 43, 48, 0.05), 0 10px 28px -14px rgba(11, 43, 48, 0.14);
	--focus-ring: 0 0 0 3px rgba(14, 138, 150, 0.35);
}