benjamin.harris
/
tasplanning_report


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
							/* ==========================================================================
   design-tokens.css — shared CSS custom properties for tasplanning.report

   Link this file from every page's <head> BEFORE any page-specific <style>:
     <link rel="stylesheet" href="/css/design-tokens.css">

   Pages that need different values for a specific token (e.g. --radius on
   site-report) can override just that token in a subsequent <style> block.

   NOTE: dashboard.php uses an abbreviated naming convention (--acc, --t1,
   etc.) and is excluded from this file — its tokens live inline.
   ========================================================================== */

:root {
  /* ── Backgrounds ────────────────────────────────────────────────────── */
  --bg:             #0b0f0e;
  --bg-1:           #111614;
  --bg-2:           #181e1b;
  --bg-card:        #141a17;

  /* ── Borders ────────────────────────────────────────────────────────── */
  --border:         rgba(255,255,255,0.07);
  --border-hover:   rgba(255,255,255,0.14);

  /* ── Accent (green) ─────────────────────────────────────────────────── */
  --accent:         #2ddc8a;
  --accent-dim:     rgba(45,220,138,0.10);
  --accent-glow:    rgba(45,220,138,0.22);

  /* ── Text ───────────────────────────────────────────────────────────── */
  --text-primary:   #eaf0ec;
  --text-secondary: #8fa899;
  --text-muted:     #4f6459;

  /* ── Status ─────────────────────────────────────────────────────────── */
  --danger:         #f08080;
  --warn:           #f0c060;
  --warn-dim:       rgba(240,192,96,0.10);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --serif:          'DM Serif Display', Georgia, serif;
  --sans:           'DM Sans', system-ui, sans-serif;
  --mono:           ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* ── Shape ──────────────────────────────────────────────────────────── */
  --radius-sm:      5px;
  --radius:         10px;
  --radius-lg:      16px;
  --radius-xl:      26px;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --transition:     0.16s cubic-bezier(0.4,0,0.2,1);
}