@charset "UTF-8";
/**
 * theme.css  —  iCharts V3 design tokens
 *
 * EVERY colour, size and spacing value lives here. app.css references tokens
 * and never a raw hex, so changing the look means editing this one file and
 * uploading ~3KB. Load it BEFORE app.css.
 *
 * CONTRAST, BRIEFLY
 *   --ink       #025951 on white  = 7.8:1   all text, passes AA and AAA
 *   --action    #F20544 on white  = 4.3:1   fills and large type only
 *   --accent    #04B2D9 on white  = 2.5:1   fills, borders, never text
 *
 *   White on --action is 4.3:1, marginally under the 4.5:1 AA threshold for
 *   small text. The CTA is set at 14px/700 to sit in AA-large territory. If
 *   you want strict AA, darken --action to about #D1043A and nothing else
 *   needs to change.
 */

:root {

	/* ---------------------------------------------- palette (edit here) */

	--c-crimson:    #f20544;
	--c-blue:       #04b2d9;
	--c-cyan:       #04c4d9;
	--c-bright:     #04d9d9;
	--c-deep:       #025951;

	/* ---------------------------------------------- roles */

	/* Structure. Deep teal carries all text and the header surface. */
	--ink:          var(--c-deep);
	--ink-70:       #4a7f7a;
	--ink-45:       #86aaa6;
	--surface:      var(--c-deep);

	/* Navigation. Bright cyans are fills and borders, never small text. */
	--accent:       var(--c-blue);
	--accent-lift:  var(--c-cyan);
	--accent-glow:  var(--c-bright);

	/* The one action that leaves for Apple. Used nowhere else. */
	--action:       var(--c-crimson);
	--action-deep:  #d1043a;
	--action-ink:   #ffffff;

	/* Surfaces */
	--paper:        #ffffff;
	--wash:         #f4f8f8;
	--tint:         #e4f7f9;   /* panel headings — cyan at ~10% */
	--tint-deep:    #cdeff3;

	--line:         rgba(2, 89, 81, 0.14);
	--line-strong:  rgba(2, 89, 81, 0.28);

	/* ---------------------------------------------- type */

	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--t-xs:   0.75rem;
	--t-sm:   0.8125rem;
	--t-base: 0.9375rem;
	--t-md:   1.0625rem;
	--t-lg:   clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);
	--t-xl:   clamp(1.375rem, 1.05rem + 1.6vw, 2rem);
	--t-2xl:  clamp(1.625rem, 1.2rem + 2.2vw, 2.5rem);

	/* ---------------------------------------------- space */

	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;

	/* ---------------------------------------------- shape */

	--radius:    10px;
	--radius-sm: 6px;
	--radius-lg: 16px;

	--max:  1280px;
	--rail: 300px;

	/* Artwork aspect per vertical. Set by a class on the grid. */
	--shape-square:   1 / 1;
	--shape-portrait: 2 / 3;
	--shape-video:    16 / 9;

	--lift:       0 1px 2px rgba(2, 89, 81, 0.07);
	--lift-hover: 0 6px 22px rgba(2, 89, 81, 0.14);
}