/*
 * Design tokens — the single source of truth for the whole hub.
 * design-preview.html loads this exact file, so whatever gets approved in the
 * preview is literally what ships.
 */

:root {
	/*
	 * Tells the browser to draw its own furniture — scrollbars, the date
	 * picker, spinners, the autofill highlight — to match. Without it a dark
	 * page gets bright white scrollbars.
	 */
	color-scheme: dark;

	/* ---- Surfaces -------------------------------------------------------
	 * Deep navy rather than neutral grey, and never pure black: a slight blue
	 * cast keeps large dark areas from looking like a hole in the screen.
	 */
	--ph-bg:          #0B1220;
	--ph-surface-1:   #121B2C;   /* cards, panels */
	--ph-surface-2:   #1A2438;   /* section headers, hover, inputs */
	--ph-surface-3:   #212D45;   /* pressed / nested */
	--ph-border:      #26314A;
	--ph-border-soft: #1C2540;

	/* ---- Text -----------------------------------------------------------
	 * Off-white, not #FFF. Pure white on a dark field haloes and is tiring
	 * over a long document.
	 */
	--ph-text:   #E8EDF5;   /* 15.9:1 */
	--ph-text-2: #B8C4D8;   /* 10.6:1 */
	--ph-muted:  #94A2BC;   /*  7.3:1 */
	--ph-faint:  #7686A0;   /*  5.1:1 — timestamps and hints are still small
	                               text, so this stays above 4.5:1 */

	/* ---- Accent ---------------------------------------------------------
	 * A softened version of the green from Shakib's original checklist.
	 * The original #0B5D3B is unreadable on dark (~2:1); this is ~7.9:1.
	 */
	--ph-accent:       #3DBE8B;
	--ph-accent-hover: #4FD09C;
	--ph-accent-ink:   #04150E;  /* text on an accent-filled surface */
	--ph-accent-dim:   rgba(61, 190, 139, .12);
	--ph-accent-line:  rgba(61, 190, 139, .34);

	/* ---- Semantic states ------------------------------------------------ */
	--ph-gold:        #D8A657;   /* item IDs, echoing the original file */
	--ph-blocked:     #E4736B;
	--ph-blocked-dim: rgba(228, 115, 107, .12);
	--ph-blocked-line:rgba(228, 115, 107, .38);
	--ph-done:        #7686A0;   /* completed item text — dimmed but readable */
	--ph-done-bg:     rgba(61, 190, 139, .045);
	--ph-warn:        #D8A657;

	/* Critical is orange, not the blocked red: blocked is something that is
	 * wrong right now, critical is a permanent property of the item, and an
	 * item can be both at once. 5.6:1 on its own tint. */
	--ph-crit:        #E8944A;
	--ph-crit-dim:    rgba(232, 148, 74, .15);
	--ph-crit-line:   rgba(232, 148, 74, .40);

	/* ---- Typography -----------------------------------------------------
	 * Hind Siliguri carries every element that can contain Bangla, so no line
	 * ever mixes two families and the line height cannot jump.
	 * Outfit is display only: logo, big numbers, Latin-only badges.
	 */
	/* 'PH Numerals' comes first but only ever answers for ০-৯ — its
	   unicode-range covers nothing else, so every other character falls
	   straight through to Hind Siliguri. Hind's own digits are too tight to
	   read at 12px, which is where most of the counters here are set. */
	--ph-font:         'PH Numerals', 'Hind Siliguri', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ph-font-display: 'Outfit', var(--ph-font);
	--ph-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

	--ph-fs-xs:  11.5px;
	--ph-fs-sm:  12.5px;
	--ph-fs-md:  13.5px;
	--ph-fs-base:14.5px;
	--ph-fs-lg:  16px;
	--ph-fs-xl:  20px;
	--ph-fs-2xl: 26px;

	--ph-lh:       1.72;  /* Bangla needs the extra room */
	--ph-lh-tight: 1.35;

	/* ---- Space ----------------------------------------------------------- */
	--ph-sp-1: 4px;
	--ph-sp-2: 8px;
	--ph-sp-3: 12px;
	--ph-sp-4: 16px;
	--ph-sp-5: 22px;
	--ph-sp-6: 30px;
	--ph-sp-7: 44px;

	/* ---- Shape ----------------------------------------------------------- */
	--ph-r-sm:   6px;
	--ph-r:      10px;
	--ph-r-lg:   14px;
	--ph-r-full: 999px;

	/* Separation comes from borders, not drop shadows. */
	--ph-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	--ph-shadow-pop: 0 8px 28px rgba(0, 0, 0, .5);

	/* ---- Motion ---------------------------------------------------------- */
	--ph-t: 140ms;
	--ph-ease: cubic-bezier(.2, .7, .3, 1);

	/* ---- Focus -----------------------------------------------------------
	 * Two rings: a dark spacer then the accent, so the outline stays visible
	 * on top of every surface shade.
	 */
	--ph-focus: 0 0 0 2px var(--ph-bg), 0 0 0 4px var(--ph-accent);

	--ph-maxw: 1080px;
	--ph-maxw-wide: 1280px;   /* the homepage grid gets more room */
}

/* ============================================================
   Light theme
   ------------------------------------------------------------
   Taken from Shakib's original standalone checklist — the same
   deep green, warm off-white and gold — so the hub reads as the
   same document those files were.

   Dark is the default. This applies only once somebody presses
   the toggle, which writes the choice to localStorage; a
   blocking script in the head sets data-theme from there before
   first paint, so the wrong theme never flashes.
   ============================================================ */

:root[data-theme="light"] {
	color-scheme: light;

	--ph-bg:          #F8FAF8;
	--ph-surface-1:   #FFFFFF;
	--ph-surface-2:   #F1F6F3;
	--ph-surface-3:   #E7F1EC;
	--ph-border:      #DDE6E1;
	--ph-border-soft: #EAF0EC;

	/* Ratios below are measured against the palest surface these ever sit on,
	   the #F1F6F3 tint, not against the page background — that is the case
	   that actually has to pass. */
	--ph-text:   #202923;   /* 12.5:1 */
	--ph-text-2: #3B4643;   /*  8.6:1 */
	--ph-muted:  #5F6B66;   /*  5.1:1 */
	--ph-faint:  #626C66;   /*  5.0:1 */

	--ph-accent:       #0B5D3B;   /* 7.9:1 */
	--ph-accent-hover: #094A2F;
	--ph-accent-ink:   #FFFFFF;
	--ph-accent-dim:   rgba(11, 93, 59, .09);
	--ph-accent-line:  rgba(11, 93, 59, .28);

	/* A shade deeper than the original #8C6D1C, which only just missed 4.5:1
	   on the tinted note background. */
	--ph-gold:        #856517;   /* 5.0:1 on the tint */
	--ph-blocked:     #B3261E;   /* 6.4:1 */
	--ph-blocked-dim: rgba(179, 38, 30, .07);
	--ph-blocked-line:rgba(179, 38, 30, .30);
	/* The original checklist used #8A9791 here, which is only 3:1 on white.
	   A completed item is meant to look finished, not become unreadable. */
	--ph-done:        #697570;   /* 4.4:1 on the tint, 4.8:1 on white */
	--ph-done-bg:     #F3FAF6;
	--ph-warn:        #8C6D1C;

	/* #B35309 reads better but lands at 4.4:1 on its own tint, just under AA. */
	--ph-crit:        #A34E08;   /* 5.0:1 on the tint */
	--ph-crit-dim:    rgba(163, 78, 8, .10);
	--ph-crit-line:   rgba(163, 78, 8, .30);

	--ph-shadow:     0 1px 2px rgba(32, 41, 35, .06);
	--ph-shadow-pop: 0 8px 28px rgba(32, 41, 35, .16);
}

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