/* ============================================================
   TaxAim / TaxTrail — Design System Foundations
   colors_and_type.css
   Brand: TaxAim (by 1001554244 Ontario Inc.) — taxtrail.ca
   ------------------------------------------------------------
   Drop this file in and `@import` it, or copy the :root block.
   Fonts load from Google Fonts (see @import below). If you need
   self-hosted ttfs, mirror these families into /fonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;   /* headlines, big statements */
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* body, UI */
  --font-serif:   'Spectral', Georgia, 'Times New Roman', serif;    /* pull-quotes, heritage voice */
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; /* figures, timelines, labels */

  /* ---------- BRAND COLOR — NAVY (ink / authority) ---------- */
  --navy-950: #050F1F;
  --navy-900: #081A33;
  --navy-800: #0D2545;  /* ◆ BASE navy — primary brand ink */
  --navy-700: #143257;
  --navy-600: #1E4470;
  --navy-500: #2D5A8C;
  --navy-400: #5681AD;
  --navy-300: #8AABCB;
  --navy-200: #BFD3E4;
  --navy-100: #E1EAF3;
  --navy-50:  #F1F5FA;

  /* ---------- BRAND COLOR — TEAL (accent / the "new build") ---------- */
  --teal-800: #006B61;
  --teal-700: #007F73;  /* hover / pressed accent */
  --teal-600: #008B7D;
  --teal-500: #00A896;  /* ◆ BASE teal — primary accent */
  --teal-400: #25BFAE;
  --teal-300: #6FD6CA;
  --teal-200: #A9E6DE;
  --teal-100: #D6F2EE;
  --teal-50:  #EBF9F6;

  /* ---------- NEUTRALS (cool grey) ---------- */
  --paper:    #FFFFFF;
  --mist:     #F5F7FA;  /* default page background for light sections */
  --cloud:    #ECEFF4;  /* subtle panel fill */
  --line:     #DCE2EB;  /* default borders */
  --line-strong: #C3CCD9;
  --slate-500:#5B6678;  /* muted / secondary text */
  --slate-600:#47515F;
  --slate-700:#333B47;
  --ink:      #0D2545;  /* = navy-800, primary text on light */

  /* ---------- STATUS ---------- */
  --amber-600: #B5740F;  /* "in progress" text */
  --amber-500: #D9912B;  /* "in progress" accent */
  --amber-100: #FBF0DA;  /* "in progress" badge bg */
  --success-600: #00897D;/* = teal family, success */
  --success-100: #D6F2EE;
  --danger-600: #C0392B;
  --danger-100: #F7DEDA;

  /* ---------- SEMANTIC ROLES ---------- */
  --bg-page:        var(--mist);
  --bg-surface:     #FFFFFF;            /* cards / elevated panels */
  --bg-inverse:     var(--navy-800);
  --bg-inverse-deep:var(--navy-950);
  --nav-bg:         rgba(255,255,255,0.85);  /* sticky nav, scrolled */
  --nav-bg-solid:   rgba(255,255,255,0.97);  /* mobile menu sheet */
  --fg-1:           var(--ink);        /* primary text */
  --fg-2:           var(--slate-600);  /* secondary text */
  --fg-3:           var(--slate-500);  /* muted / captions */
  --fg-on-dark-1:   #FFFFFF;
  --fg-on-dark-2:   #B7C6D8;           /* secondary text on navy */
  --fg-on-dark-3:   #7C92AC;           /* muted on navy */
  --accent:         var(--teal-500);
  --accent-hover:   var(--teal-700);
  --accent-quiet:   var(--teal-50);
  --border:         var(--line);
  --focus-ring:     0 0 0 3px rgba(0,168,150,0.40);

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;   /* default cards, inputs */
  --r-lg: 16px;   /* feature cards, media */
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---------- ELEVATION (cool navy-tinted shadows) ---------- */
  --shadow-xs: 0 1px 2px rgba(13,37,69,0.06);
  --shadow-sm: 0 1px 3px rgba(13,37,69,0.08), 0 1px 2px rgba(13,37,69,0.06);
  --shadow-md: 0 4px 12px rgba(13,37,69,0.08), 0 2px 4px rgba(13,37,69,0.05);
  --shadow-lg: 0 12px 28px rgba(13,37,69,0.12), 0 4px 8px rgba(13,37,69,0.06);
  --shadow-xl: 0 24px 56px rgba(8,26,51,0.20);
  --ring-inset: inset 0 0 0 1px var(--line);

  /* ---------- TYPE SCALE (fluid-ready, px base) ---------- */
  --t-display: 600 clamp(40px, 6vw, 68px)/1.04 var(--font-display);
  --t-h1:      700 clamp(32px, 4vw, 48px)/1.08 var(--font-display);
  --t-h2:      700 clamp(26px, 3vw, 36px)/1.14 var(--font-display);
  --t-h3:      600 22px/1.25 var(--font-display);
  --t-h4:      600 18px/1.3 var(--font-sans);
  --t-quote:   500 clamp(24px, 3vw, 34px)/1.3 var(--font-serif);
  --t-lead:    400 clamp(18px, 1.4vw, 21px)/1.55 var(--font-sans);
  --t-body:    400 16px/1.6 var(--font-sans);
  --t-small:   400 14px/1.55 var(--font-sans);
  --t-label:   500 12px/1.4 var(--font-mono);
  --t-stat:    700 clamp(36px, 4.5vw, 56px)/1 var(--font-display);
}

/* ============================================================
   SEMANTIC BASE ELEMENTS
   Reference implementation — opt in per project.
   ============================================================ */

.ds-display { font: var(--t-display); letter-spacing: -0.02em; color: var(--fg-1); }
.ds-h1 { font: var(--t-h1); letter-spacing: -0.018em; color: var(--fg-1); }
.ds-h2 { font: var(--t-h2); letter-spacing: -0.012em; color: var(--fg-1); }
.ds-h3 { font: var(--t-h3); letter-spacing: -0.008em; color: var(--fg-1); }
.ds-h4 { font: var(--t-h4); color: var(--fg-1); }
.ds-lead { font: var(--t-lead); color: var(--fg-2); }
.ds-body { font: var(--t-body); color: var(--fg-2); }
.ds-small { font: var(--t-small); color: var(--fg-3); }
.ds-quote { font: var(--t-quote); color: var(--teal-600); letter-spacing: -0.01em; }

/* Eyebrow / kicker — mono, tracked-out, teal. Core brand motif. */
.ds-eyebrow {
  font: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-600);
}

/* Tabular figures for money / counts — always use for tax numbers */
.ds-figures { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Status pills */
.ds-status {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.ds-status--progress { background: var(--amber-100); color: var(--amber-600); }
.ds-status--certified { background: var(--teal-100); color: var(--teal-800); }

/* ============================================================
   DARK THEME — set <html data-theme="dark">
   Remaps the light surfaces to deep navy. The navy hero /
   certification / footer bands already read correctly and are
   left untouched (they use --navy-800/900/950 + white text).
   ============================================================ */
[data-theme="dark"] {
  /* surfaces — deepest page → section base → elevated card */
  --mist:        #081A30;   /* page / tinted sections */
  --paper:       #0E2542;   /* plain sections */
  --bg-surface:  #16335A;   /* cards / inputs / panels (pops on both) */
  --cloud:       #1B3A60;

  /* borders & light tints */
  --line:        #244568;
  --line-strong: #2D5A8C;
  --navy-50:     #16335A;   /* was a pale tint → dark inset */
  --navy-100:    #244568;   /* faint step numbers, etc. */

  /* text */
  --ink:  #EFF4FA;
  --fg-1: #EFF4FA;
  --fg-2: #AEC0D6;
  --fg-3: #7E95AF;

  /* accents — brighten teal used as text/icons on dark */
  --teal-600: #28C0B0;
  --teal-50:  rgba(0,168,150,0.16);
  --accent-quiet: rgba(0,168,150,0.16);

  /* chrome */
  --nav-bg:       rgba(8,22,42,0.82);
  --nav-bg-solid: rgba(8,22,42,0.98);
  --border:       #244568;

  /* shadows — deepen so elevation still reads on dark */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.42), 0 2px 4px rgba(0,0,0,0.30);
  --shadow-lg: 0 14px 32px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.34);
  --shadow-xl: 0 24px 56px rgba(0,0,0,0.58);
}

/* Smooth the flip */
[data-theme] body, [data-theme] section { transition: background-color .3s ease, color .3s ease; }