/* ============================================================
   Pints AI Design System — global CSS entry point.
   Consumers link THIS one file. Import order = cascade order.
   Keep this file as @import lines only.
   ============================================================ */
/* ============================================================
   Pints AI — Fonts
   ------------------------------------------------------------
   Brand faces (Guidelines v3.0 §09):
     · Aspekta            — PRIMARY family across web, PDF and PPT.
                            Only the fallback stack changes per medium.
     · Newsreader         — editorial serif/italic accent (web)
     · Palatino Linotype  — editorial accent (PDF / PPT)

   v3 consolidated typography to a single primary family. DM Sans
   (PDF) and Century Gothic (PPT) are retired; --font-doc and
   --font-ppt now resolve to Aspekta with medium-specific fallbacks.

   ⚠ FONT STATUS
   · Aspekta            → self-hosted from /fonts (uploaded).
   · Palatino Linotype  → self-hosted from /fonts (uploaded).
   · Newsreader         → Google Fonts CDN.
   · Inter              → CDN, web fallback for Aspekta only.
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/font-0da7232b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/font-09a8a00b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/font-7b7f842a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/font-e313f76c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/font-828c7338.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/font-b6cb29ed.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/font-ebb93c92.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-0da7232b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-09a8a00b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-7b7f842a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-e313f76c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-828c7338.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-b6cb29ed.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-ebb93c92.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-0da7232b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-09a8a00b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-7b7f842a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-e313f76c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-828c7338.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-b6cb29ed.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-ebb93c92.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/font-0da7232b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/font-09a8a00b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/font-7b7f842a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/font-e313f76c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/font-828c7338.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/font-b6cb29ed.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/font-ebb93c92.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/font-0da7232b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/font-09a8a00b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/font-7b7f842a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/font-e313f76c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/font-828c7338.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/font-b6cb29ed.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/font-ebb93c92.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-d814e1ed.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-0822b44d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-815da1ae.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-d814e1ed.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-0822b44d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-815da1ae.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-7c2fea53.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-c9b2d55c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/font-aeebf8bb.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-7c2fea53.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-c9b2d55c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/font-aeebf8bb.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* — Aspekta (self-hosted, uploaded weights) — */
@font-face { font-family: "Aspekta"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/font-31c17c9e.ttf") format("truetype"); }
@font-face { font-family: "Aspekta"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/font-74898596.ttf") format("truetype"); }
@font-face { font-family: "Aspekta"; font-style: normal; font-weight: 450; font-display: swap; src: url("../assets/fonts/font-f68a71dd.ttf") format("truetype"); }
@font-face { font-family: "Aspekta"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/font-8e615c46.ttf") format("truetype"); }
@font-face { font-family: "Aspekta"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/font-f71e07b6.ttf") format("truetype"); }
@font-face { font-family: "Aspekta"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/font-a574dd9f.ttf") format("truetype"); }

/* — Palatino Linotype (self-hosted, uploaded) — */
@font-face { font-family: "Palatino Linotype"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/font-3d4eaede.ttf") format("truetype"); }
@font-face { font-family: "Palatino Linotype"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/font-5411f820.ttf") format("truetype"); }
@font-face { font-family: "Palatino Linotype"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/font-5ea43606.ttf") format("truetype"); }
@font-face { font-family: "Palatino Linotype"; font-style: italic; font-weight: 700; font-display: swap; src: url("../assets/fonts/font-ccfe9fa8.ttf") format("truetype"); }

:root {
  /* Web — primary sans */
  --font-sans: "Aspekta", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Web — editorial serif/italic accent. Headings/subheadings only, never body. */
  --font-serif: "Newsreader", "Georgia", "Times New Roman", serif;
  /* PDF / designed documents — same family, print-safe fallbacks. Embed on export. */
  --font-doc: "Aspekta", "Helvetica Neue", Arial, sans-serif;
  /* PDF / PPT editorial accent */
  --font-doc-serif: "Palatino Linotype", "Palatino", "Book Antiqua", Georgia, serif;
  /* Editable client PPT — Aspekta must be installed; Arial is the safe substitute. */
  --font-ppt: "Aspekta", Arial, sans-serif;
}

/* ============================================================
   Pints AI — Color System
   Dark-first enterprise palette. Mint-led, rare orange.
   Source: Pints AI Brand Guidelines v3.0, §06–08, §16
   Usage ratio: ~75% dark/neutral · 15% light · 8% mint · 2% orange
   v3 changes: dark neutrals cooled to match the light system,
   data-viz rebalanced (blue-shifted teal, lifted chroma on
   slate/sand/plum), Info Blue moved into the slate family.
   ============================================================ */
:root {
  /* — Brand & core neutrals — */
  --color-deep-carbon:       #121212; /* deepest bg, hero, cinematic dark */
  --color-pints-ink:         #1E1E1E; /* main dark bg: website, decks, panels */
  --color-graphite-surface:  #252927; /* cards, blocks, UI containers (v3 cooled) */
  --color-elevated-graphite: #343A37; /* borders, dividers, secondary panels (v3 cooled) */
  --color-off-white:         #F6FBF8; /* primary light bg & primary text on dark */
  --color-light-mist:        #EDF1EF; /* light-mode cards / raised modules */
  --color-mist-grey:         #DDE5E0; /* light dividers, hairlines, row banding */
  --color-pale-mint:         #CFE8DF; /* soft highlight bg, callout fills, tints */
  --color-muted-text:        #A9B2AD; /* captions/metadata ON DARK */
  --color-muted-text-light:  #5F6762; /* captions/metadata ON LIGHT — AA-safe on off-white AND on Light Mist cards (5.1:1) */

  /* — Brand accent — */
  --color-pints-mint: #00C18B; /* primary accent, CTAs, active nodes, proof */
  --color-deep-mint:  #1E8C6C; /* hover, mint-as-text on light, focus ring */
  --color-deepest-mint: #16674F; /* SMALL mint text on light (<16px) — AA 4.5:1 floor */

  /* — Accent fill — flat mint for buttons / primary actions — */
  --accent-fill:       #00C18B; /* @kind color */
  --accent-fill-hover: #00A87A; /* deeper mint, same hue @kind color */

  /* — Accent gradient — legacy green gradient (kept for existing surfaces) — */
  --accent-gradient:       linear-gradient(160deg, #00C18B 0%, #03B784 55%, #06AE7E 100%); /* @kind color */
  --accent-gradient-hover: linear-gradient(160deg, #06AE7E 0%, #059F74 60%, #04956D 100%); /* @kind color */

  /* — Brand mark slate (from logo icon) — */
  --color-brand-slate:       #517B84; /* secondary tone in Pints mark on light */
  --color-brand-slate-light: #7FACB5; /* mark slate on dark surfaces */
  --color-brand-ink:         #0D2022; /* primary tone in Pints mark (logo source) */

  /* — Semantic / status — */
  --color-success:      #2E9E63; /* passed checks, compliant, completed */
  --color-warning:      #E8923A; /* Signal Orange — warnings, exceptions */
  --color-warning-text: #C2701F; /* orange as text on light — AA at >=18.66px or bold */
  --color-warning-text-small: #9A5715; /* SMALL orange text on light (<16px) — AA 4.5:1 floor */
  --color-critical:     #E5484D; /* errors, failures, rejections, flagged */
  --color-info:         #5C87C4; /* neutral informational, tooltips (v3, slate family) */

  /* — Data visualization (fixed series order: Mint → Teal → Slate → Sand → Plum) — */
  --chart-1: #00C18B; /* Chart Mint  — primary/most-important series */
  --chart-2: #2E9BB5; /* Chart Teal  (v3 blue-shifted) */
  --chart-3: #7189B8; /* Chart Slate */
  --chart-4: #D2A55F; /* Chart Sand  (darken to #B0813C on light) */
  --chart-5: #A46FB8; /* Chart Plum  (darken to #8A579E on light) */
  --chart-4-light: #B0813C;
  --chart-5-light: #8A579E;
  --chart-grid-dark:  #343A37;
  --chart-grid-light: #DDE5E0;

  /* ============================================================
     Semantic aliases — DARK MODE (default surface logic)
     ============================================================ */
  --bg-base:        var(--color-pints-ink);
  --bg-deepest:     var(--color-deep-carbon);
  --surface-card:   var(--color-graphite-surface);
  --surface-raised: var(--color-elevated-graphite);
  --border-subtle:  var(--color-elevated-graphite);
  --border-strong:  #464E4A;

  --text-primary:   var(--color-off-white);
  --text-secondary: var(--color-muted-text);
  --text-muted:     var(--color-muted-text);
  --text-accent:    var(--color-pints-mint);
  --text-accent-small: var(--color-pints-mint); /* mint labels < 16px */

  --accent:         var(--color-pints-mint);
  --accent-hover:   var(--color-deep-mint);
  --accent-on:      var(--color-pints-ink); /* label on mint fill */
  --button-fill:       var(--accent-fill);
  --button-fill-hover: var(--accent-fill-hover);
  --focus-ring:     var(--color-deep-mint);
}

/* ============================================================
   LIGHT MODE — defined system, not an inversion (§07).
   Apply [data-theme="light"] to a section/page wrapper.
   ============================================================ */
[data-theme="light"] {
  --bg-base:        var(--color-off-white);
  --bg-deepest:     var(--color-off-white);
  --surface-card:   var(--color-light-mist);
  --surface-raised: var(--color-light-mist);
  --border-subtle:  var(--color-mist-grey);
  --border-strong:  #C4CEC8;

  --text-primary:   var(--color-pints-ink);
  --text-secondary: var(--color-muted-text-light);
  --text-muted:     var(--color-muted-text-light);
  --text-accent:    var(--color-deep-mint);   /* mint text on light = Deep Mint */
  --text-accent-small: var(--color-deepest-mint); /* small mint labels need Deepest Mint for AA */

  --accent:         var(--color-pints-mint);  /* mint FILL stays #00C18B */
  --accent-hover:   var(--color-deep-mint);
  --accent-on:      var(--color-pints-ink);
  --button-fill:       var(--accent-fill);
  --button-fill-hover: var(--accent-fill-hover);
  --focus-ring:     var(--color-deep-mint);

  /* data-viz on light: sand + plum darken, grid lightens (§16) */
  --chart-4: #B0813C;
  --chart-5: #8A579E;

  /* elevation on light — shadows lift instead of sink */
  --shadow-card:   0 1px 2px rgba(18,30,24,0.06);
  --shadow-raised: 0 10px 30px rgba(18,30,24,0.09);
}

/* ============================================================
   DARK MODE as an explicit opt-in — same aliases as :root, so a
   dark band can nest inside a light-first page (and vice versa).
   ============================================================ */
[data-theme="dark"] {
  --bg-base:        var(--color-pints-ink);
  --bg-deepest:     var(--color-deep-carbon);
  --surface-card:   var(--color-graphite-surface);
  --surface-raised: var(--color-elevated-graphite);
  --border-subtle:  var(--color-elevated-graphite);
  --border-strong:  #464E4A;

  --text-primary:   var(--color-off-white);
  --text-secondary: var(--color-muted-text);
  --text-muted:     var(--color-muted-text);
  --text-accent:    var(--color-pints-mint);
  --text-accent-small: var(--color-pints-mint);

  --accent:         var(--color-pints-mint);
  --accent-hover:   var(--color-deep-mint);
  --accent-on:      var(--color-pints-ink);
  --focus-ring:     var(--color-deep-mint);

  --chart-4: #D2A55F;
  --chart-5: #A46FB8;
  --shadow-card:   0 1px 2px rgba(0,0,0,0.3);
  --shadow-raised: 0 8px 24px rgba(0,0,0,0.35);
}

/* ============================================================
   Pints AI — Typography Scale
   Locked type scales (Guidelines v3.0 §10). Web in px, PDF and
   PPT in pt, each paired with line-height + tracking.
   Pick from the scale; never improvise an in-between size.
   Floors: 16px web body · 10.5pt PDF body · 14pt PPT body.
   One primary family (Aspekta) across all three media (§09).
   ============================================================ */
:root {
  /* — Weights (numeric, no ambiguity) — */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* — Web type scale: size / line-height / tracking — */
  --type-display-size: 72px;  --type-display-lh: 1.05; --type-display-track: -1.5px;
  --type-h1-size:      56px;  --type-h1-lh:      1.10; --type-h1-track:      -1px;
  --type-h2-size:      40px;  --type-h2-lh:      1.15; --type-h2-track:      -0.5px;
  --type-h3-size:      28px;  --type-h3-lh:      1.25; --type-h3-track:      -0.25px;
  --type-h4-size:      20px;  --type-h4-lh:      1.40; --type-h4-track:      0;
  --type-body-size:    16px;  --type-body-lh:    1.55; --type-body-track:    0;
  --type-small-size:   14px;  --type-small-lh:   1.45; --type-small-track:   0.1px;
  --type-label-size:   12px;  --type-label-lh:   1.30; --type-label-track:   1.2px;

  /* — PDF / one-pager scale (pt) — */
  --type-pdf-cover-size: 32pt;   --type-pdf-cover-lh: 1.10; --type-pdf-cover-track: -0.4pt;
  --type-pdf-h1-size:    20pt;   --type-pdf-h1-lh:    1.20; --type-pdf-h1-track:    -0.2pt;
  --type-pdf-h2-size:    15pt;   --type-pdf-h2-lh:    1.25; --type-pdf-h2-track:    0;
  --type-pdf-body-size:  10.5pt; --type-pdf-body-lh:  1.40; --type-pdf-body-track:  0;
  --type-pdf-caption-size: 8.5pt; --type-pdf-caption-lh: 1.30; --type-pdf-caption-track: 0.3pt;
  --type-pdf-stat-size:  28pt;   --type-pdf-stat-lh:  1.05; --type-pdf-stat-track:  -0.4pt;

  /* — PPT scale (pt, 13.3 × 7.5in slide) — */
  --type-ppt-divider-size: 40pt; /* section divider */
  --type-ppt-title-size:   32pt; /* slide title, one line where possible */
  --type-ppt-subhead-size: 20pt;
  --type-ppt-body-size:    16pt; /* never below 14pt */
  --type-ppt-caption-size: 11pt;
  --type-ppt-stat-size:    48pt; /* proof-point hero, 40–54pt */
}

/* ------------------------------------------------------------
   Optional utility classes — apply the locked scale directly.
   Headlines use the sans ("Aspekta") face; editorial accents
   use the serif. One serif/italic emphasis per headline (§09).
   ------------------------------------------------------------ */
.t-display { font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--type-display-size); line-height: var(--type-display-lh); letter-spacing: var(--type-display-track); }
.t-h1 { font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--type-h1-size); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-track); }
.t-h2 { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-track); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--type-h3-size); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-track); }
.t-h4 { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-h4-size); line-height: var(--type-h4-lh); letter-spacing: var(--type-h4-track); }
.t-body { font-family: var(--font-sans); font-weight: var(--weight-regular);
  font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-track); }
.t-small { font-family: var(--font-sans); font-weight: var(--weight-regular);
  font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: var(--type-small-track); }
.t-label { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-track);
  text-transform: uppercase; }
.t-editorial { font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-medium); }

/* ============================================================
   Pints AI — Spacing, Radius, Elevation, Motion (Guidelines §14, §18, §19)
   8px system. Web baseline grid = 8px (4px sub-grid for fine type).
   ============================================================ */
:root {
  /* — 8px spacing scale — */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* — Mapped use cases (§14) — */
  --pad-card:        var(--space-6);  /* 24 — card/module padding (32 for hero) */
  --pad-card-hero:   var(--space-8);  /* 32 */
  --gap-block:       var(--space-4);  /* 16 — gap between elements in a block */
  --gap-tight:       var(--space-3);  /* 12 — label+value pairs */
  --gap-cards:       var(--space-6);  /* 24 — between cards/proof blocks */
  --gap-icon-label:  var(--space-2);  /* 8  — inline icon + text */
  --space-under-head:var(--space-4);  /* 16 — below a headline */
  --space-group:     var(--space-12); /* 48 — between content groups */
  --section-pad:     var(--space-24); /* 96 — section top/bottom (128 hero) */
  --section-pad-hero:var(--space-32); /* 128 */

  /* — Layout — */
  --content-max:     1280px; /* 1200–1280 max content width */
  --margin-desktop:  64px;   /* desktop margin minimum */
  --gutter:          24px;   /* 12-col gutter */

  /* — Border radius — cards are SQUARE (locked) — */
  /* House rule: every card / panel / module / diagram node has sharp corners.
     Buttons are square too; radius survives only on pills. */
  --radius-sharp:   0px;
  --radius-card:    var(--radius-sharp); /* website cards / UI mockups */
  --radius-ppt:     var(--radius-sharp); /* PPT + slide cards */
  --radius-node:    var(--radius-sharp); /* diagram nodes */
  --radius-panel:   var(--radius-sharp); /* panels, callouts, modules */
  --radius-button:  var(--radius-sharp); /* buttons / chips (everywhere) */
  --radius-pdf:     var(--radius-sharp); /* PDF modules */
  --radius-pill:    999px;

  /* — Borders — */
  --border-width: 1px;

  /* — Elevation — restrained. Dark UI leans on borders, not big shadows. */
  --shadow-card:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-raised: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-mint-glow: inset 0 4px 4px -2px rgba(0,193,139,0.7); /* hero node inner glow */
  --shadow-panel-edge: 4px 4px 4px rgba(255,255,255,0.1);       /* subtle light edge */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* — Motion — locked easing + timing (§18–19) — */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */ /* reveals / entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */ /* state changes */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);       /* @kind other */ /* exits (faster) */

  --dur-micro:    150ms; /* @kind other */ /* micro-interactions 120–200ms */
  --dur-ui:       400ms; /* @kind other */ /* UI reveal 300–600 */
  --dur-section:  750ms; /* @kind other */ /* section transition 600–900 */
  --stagger:      100ms; /* @kind other */ /* sequential stagger 80–120ms */

  /* — Touch target — */
  --target-min: 44px;
}

/* ============================================================
   Pints AI — base element defaults.
   Dark-first. Sets body surface, text, link, focus, selection.
   Specimen cards & kits inherit a credible baseline from here.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-accent); text-decoration: none; }

::selection { background: rgba(0,193,139,0.28); color: var(--color-off-white); }

/* Default visible focus ring (§08/§19) — 2px Deep Mint, 2px offset */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Reduced motion, keyed to the site's own switch rather than to the OS
   preference directly (§19, amended 21 Aug 2026).

   WHY THIS IS NOT AN @media BLOCK. Motion is bypassed by client instruction
   (DIRECTION.md rule 5): the OS preference sets no default, and the PAUSE
   MOTION chip is the control. That bypass is implemented in JavaScript — the
   head script patches window.matchMedia and stamps html[data-motion]. CSS
   media queries are evaluated by the ENGINE and cannot be patched, so as a
   raw @media this rule went on firing for every visitor with Reduce Motion
   on: JavaScript believed motion was live, the stylesheet froze every
   animation and transition on the page, and the two never agreed. It is what
   broke the platform diagram's flows in production.

   Keyed to the attribute, both paths land in the same place. */
:root[data-motion="still"] *,
:root[data-motion="still"] *::before,
:root[data-motion="still"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}