/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter","arguments":[{"variable":"--font-tonira-body","subsets":["latin"],"weight":["400","500","600","700","800"],"display":"swap"}],"variableName":"inter"} ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/ba9851c3c22cd980-s.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(/_next/static/media/21350d82a1f187e9-s.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(/_next/static/media/c5fe6dc8356a8c31-s.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(/_next/static/media/19cfc7226ec3afaa-s.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(/_next/static/media/df0a9ae256c0569c-s.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(/_next/static/media/8e9860b6e62d6359-s.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(/_next/static/media/e4af272ccee01ff0-s.p.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(/_next/static/media/ba9851c3c22cd980-s.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(/_next/static/media/21350d82a1f187e9-s.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(/_next/static/media/c5fe6dc8356a8c31-s.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(/_next/static/media/19cfc7226ec3afaa-s.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(/_next/static/media/df0a9ae256c0569c-s.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(/_next/static/media/8e9860b6e62d6359-s.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(/_next/static/media/e4af272ccee01ff0-s.p.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(/_next/static/media/ba9851c3c22cd980-s.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(/_next/static/media/21350d82a1f187e9-s.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(/_next/static/media/c5fe6dc8356a8c31-s.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(/_next/static/media/19cfc7226ec3afaa-s.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(/_next/static/media/df0a9ae256c0569c-s.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(/_next/static/media/8e9860b6e62d6359-s.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(/_next/static/media/e4af272ccee01ff0-s.p.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(/_next/static/media/ba9851c3c22cd980-s.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(/_next/static/media/21350d82a1f187e9-s.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(/_next/static/media/c5fe6dc8356a8c31-s.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(/_next/static/media/19cfc7226ec3afaa-s.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(/_next/static/media/df0a9ae256c0569c-s.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(/_next/static/media/8e9860b6e62d6359-s.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(/_next/static/media/e4af272ccee01ff0-s.p.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: 800; font-display: swap; src: url(/_next/static/media/ba9851c3c22cd980-s.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: 800; font-display: swap; src: url(/_next/static/media/21350d82a1f187e9-s.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: 800; font-display: swap; src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/_next/static/media/19cfc7226ec3afaa-s.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: 800; font-display: swap; src: url(/_next/static/media/df0a9ae256c0569c-s.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: 800; font-display: swap; src: url(/_next/static/media/8e9860b6e62d6359-s.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: 800; font-display: swap; src: url(/_next/static/media/e4af272ccee01ff0-s.p.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; }@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12% }.__className_48b81b {font-family: 'Inter', 'Inter Fallback';font-style: normal }.__variable_48b81b {--font-tonira-body: 'Inter', 'Inter Fallback' } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Bricolage_Grotesque","arguments":[{"variable":"--font-tonira-display","subsets":["latin"],"weight":["500","700","800"],"display":"swap"}],"variableName":"bricolage"} ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* vietnamese */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/93a6e477e1480c92-s.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/c7e0cf6c760983e7-s.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/9d5a263311222317-s.p.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/93a6e477e1480c92-s.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/c7e0cf6c760983e7-s.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/9d5a263311222317-s.p.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/93a6e477e1480c92-s.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/c7e0cf6c760983e7-s.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/_next/static/media/9d5a263311222317-s.p.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; }@font-face {font-family: 'Bricolage Grotesque Fallback';src: local("Arial");ascent-override: 88.21%;descent-override: 25.61%;line-gap-override: 0.00%;size-adjust: 105.43% }.__className_206af9 {font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback';font-style: normal }.__variable_206af9 {--font-tonira-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback' } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Caveat","arguments":[{"variable":"--font-tonira-script","subsets":["latin"],"weight":["400","700"],"display":"swap"}],"variableName":"caveat"} ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cyrillic-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/e44cdba7d0878bc5-s.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: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/07fccecd6728972a-s.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/486fce9f36bc8f45-s.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: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/46bdd75a3ff56824-s.p.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: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/e44cdba7d0878bc5-s.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: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/07fccecd6728972a-s.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/486fce9f36bc8f45-s.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: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/46bdd75a3ff56824-s.p.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; }@font-face {font-family: 'Caveat Fallback';src: local("Arial");ascent-override: 124.77%;descent-override: 38.99%;line-gap-override: 0.00%;size-adjust: 76.94% }.__className_34a9ff {font-family: 'Caveat', 'Caveat Fallback';font-style: normal }.__variable_34a9ff {--font-tonira-script: 'Caveat', 'Caveat Fallback' } /*!************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/virtari-tokens.css ***! \************************************************************************************************************************************************************************************************************************************************************************/ /* Vendored from @virtari-packages/tokens so frontend can edit tokens locally. */ @import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"); /* Primary sans font: Vazirmatn (Persian/Arabic + Latin) with Inter fallback for Latin polish. */ /* * Colors — four-tier architecture. * * primitives.css Raw scales (12-step neutral + intents, three alpha * families, legacy 50-950). Mode-aware where it makes * sense (12-step), mode-independent where it doesn't * (legacy & always-black/always-white alpha). * * brands/ Brand override layer. Each [data-brand="..."] file * overrides ONLY primitive hues. Defaults to virtari. * * semantic/ Purpose-based aliases (bg, surface, text, icon, * border, interactive states, status intents, * data-viz). Components consume these. * * Component CSS files define their own --{name}-* tokens scoped to * .vds-{name}, referencing semantic tokens with fallbacks. * * Order matters: primitives must load before brands (so brands can * override them) before semantic (so semantic resolves the final values). */ /* * Color primitives entry — re-exports the split structure. * * primitives/neutral.css absolute anchors + 12-step neutral (mode-aware) * primitives/intents.css 12-step intent scales (mode-aware) * primitives/alphas.css black-a, white-a, neutral-a, per-intent-a * * Brand themes (brands/*.css) override these via [data-brand="..."]. */ /* * Primitives barrel — raw color scales (mode-aware 12-step + alphas). * * neutral.css absolute anchors + neutral 1..12 (light/dark/oled) * intents.css primary / success / warning / danger / info / accent 1..12 * alphas.css black-a, white-a, neutral-a, per-intent-a * * Brand themes override these in ../brands/*.css. * Components should consume semantic tokens, not primitives directly. */ @layer tokens { /* * ── Neutral 12-step scale ── * * Hand-tuned OKLCH scale for neutral surfaces, borders and text. * Each step has a specific semantic role (industry-standard 12-step): * * 1 App canvas * 2 Subtle bg (cards on app) * 3 UI element rest * 4 UI element hover * 5 UI element active / pressed * 6 Subtle border * 7 UI border / focus border * 8 Hovered border / strong divider * 9 Solid neutral bg * 10 Solid neutral hover * 11 Low-contrast text * 12 High-contrast text * * Curve is non-linear (perceptually tuned). Steps 1-4 are tight * for surface elevation; 8→9 is the big jump from borders to solids; * 11→12 widens for max text contrast. * * hue 270 = slight cool tint (avoids yellow cast on warm displays) * Dark mode uses higher L for elevation (raised = lighter — modern). */ :root { /* ── Absolute anchors ── * Used by alpha primitives, shadows, scrims, and any component * that truly wants pure black or white regardless of theme. */ --vds-color-white: oklch(1 0 0); --vds-color-black: oklch(0 0 0); /* ── Neutral solids (light, default) ── */ --vds-color-neutral-1: oklch(0.985 0.002 270); --vds-color-neutral-2: oklch(0.975 0.003 270); --vds-color-neutral-3: oklch(0.945 0.004 270); --vds-color-neutral-4: oklch(0.920 0.005 270); --vds-color-neutral-5: oklch(0.890 0.006 270); --vds-color-neutral-6: oklch(0.855 0.007 270); --vds-color-neutral-7: oklch(0.810 0.008 270); --vds-color-neutral-8: oklch(0.745 0.010 270); --vds-color-neutral-9: oklch(0.580 0.014 270); --vds-color-neutral-10: oklch(0.530 0.014 270); --vds-color-neutral-11: oklch(0.430 0.013 270); --vds-color-neutral-12: oklch(0.180 0.012 270); } /* ── Neutral solids (dark) ── */ [data-theme="dark"] { --vds-color-neutral-1: oklch(0.178 0.005 270); --vds-color-neutral-2: oklch(0.210 0.005 270); --vds-color-neutral-3: oklch(0.245 0.006 270); --vds-color-neutral-4: oklch(0.275 0.007 270); --vds-color-neutral-5: oklch(0.305 0.008 270); --vds-color-neutral-6: oklch(0.345 0.009 270); --vds-color-neutral-7: oklch(0.395 0.010 270); --vds-color-neutral-8: oklch(0.460 0.011 270); --vds-color-neutral-9: oklch(0.530 0.013 270); --vds-color-neutral-10: oklch(0.580 0.013 270); --vds-color-neutral-11: oklch(0.720 0.011 270); --vds-color-neutral-12: oklch(0.930 0.008 270); } /* * Optional OLED variant — overrides ONLY canvas to pure black. * Keeps elevation ladder so hierarchy doesn't collapse. * Activate with [data-theme="dark-oled"] on . */ [data-theme="dark-oled"] { --vds-color-neutral-1: oklch(0 0 0); --vds-color-neutral-2: oklch(0.150 0.005 270); --vds-color-neutral-3: oklch(0.200 0.006 270); --vds-color-neutral-4: oklch(0.245 0.007 270); --vds-color-neutral-5: oklch(0.285 0.008 270); --vds-color-neutral-6: oklch(0.330 0.009 270); --vds-color-neutral-7: oklch(0.385 0.010 270); --vds-color-neutral-8: oklch(0.455 0.011 270); --vds-color-neutral-9: oklch(0.525 0.013 270); --vds-color-neutral-10: oklch(0.580 0.013 270); --vds-color-neutral-11: oklch(0.720 0.011 270); --vds-color-neutral-12: oklch(0.945 0.008 270); } } @layer tokens { /* * ── Intent 12-step solid scales ── * * Same step semantics as neutral.css. Each intent has a dedicated hue * tuned for its role (primary CTAs, status indicators, accents). * * primary indigo h=265 brand action * success green h=155 positive feedback * warning amber h=85 caution (intentionally bright) * danger red h=25 destructive / error * info cyan h=210 informational * accent orange h=45 secondary CTA / highlight * * Brand themes override these in packages/tokens/src/brands/*.css. */ :root { /* ── Primary (indigo) — light ── * Steps 9-11 follow the same monotonic-chroma rule as every other * intent: chroma peaks at step 9 (base solid) and decreases toward * step 12. Previously step 10 bumped chroma (0.200 → 0.205), which * at hue 265° read as a perceptual hue shift to purple during hover * since indigo-violet sits right on that hue boundary at high chroma. */ --vds-color-primary-1: oklch(0.985 0.005 265); --vds-color-primary-2: oklch(0.970 0.010 265); --vds-color-primary-3: oklch(0.940 0.020 265); --vds-color-primary-4: oklch(0.905 0.040 265); --vds-color-primary-5: oklch(0.870 0.070 265); --vds-color-primary-6: oklch(0.825 0.110 265); --vds-color-primary-7: oklch(0.770 0.150 265); --vds-color-primary-8: oklch(0.700 0.190 265); --vds-color-primary-9: oklch(0.550 0.200 265); --vds-color-primary-10: oklch(0.500 0.195 265); --vds-color-primary-11: oklch(0.450 0.175 265); --vds-color-primary-12: oklch(0.260 0.140 265); /* ── Success (green) — light ── */ --vds-color-success-1: oklch(0.985 0.005 155); --vds-color-success-2: oklch(0.970 0.012 155); --vds-color-success-3: oklch(0.945 0.022 155); --vds-color-success-4: oklch(0.910 0.040 155); --vds-color-success-5: oklch(0.875 0.065 155); --vds-color-success-6: oklch(0.825 0.095 155); --vds-color-success-7: oklch(0.770 0.125 155); --vds-color-success-8: oklch(0.700 0.155 155); --vds-color-success-9: oklch(0.555 0.170 155); --vds-color-success-10: oklch(0.500 0.165 155); --vds-color-success-11: oklch(0.430 0.140 155); --vds-color-success-12: oklch(0.235 0.090 155); /* ── Warning (amber) — light ── */ --vds-color-warning-1: oklch(0.985 0.005 85); --vds-color-warning-2: oklch(0.975 0.012 85); --vds-color-warning-3: oklch(0.950 0.025 85); --vds-color-warning-4: oklch(0.920 0.045 85); --vds-color-warning-5: oklch(0.885 0.075 85); --vds-color-warning-6: oklch(0.835 0.110 85); --vds-color-warning-7: oklch(0.785 0.140 85); --vds-color-warning-8: oklch(0.725 0.160 85); --vds-color-warning-9: oklch(0.700 0.165 85); --vds-color-warning-10: oklch(0.650 0.155 85); --vds-color-warning-11: oklch(0.500 0.130 85); --vds-color-warning-12: oklch(0.300 0.080 85); /* ── Danger (red) — light ── */ --vds-color-danger-1: oklch(0.985 0.005 25); --vds-color-danger-2: oklch(0.970 0.012 25); --vds-color-danger-3: oklch(0.945 0.025 25); --vds-color-danger-4: oklch(0.910 0.045 25); --vds-color-danger-5: oklch(0.870 0.075 25); --vds-color-danger-6: oklch(0.820 0.110 25); --vds-color-danger-7: oklch(0.760 0.150 25); --vds-color-danger-8: oklch(0.690 0.180 25); --vds-color-danger-9: oklch(0.555 0.200 25); --vds-color-danger-10: oklch(0.500 0.195 25); --vds-color-danger-11: oklch(0.450 0.170 25); --vds-color-danger-12: oklch(0.260 0.110 25); /* ── Info (cyan) — light ── */ --vds-color-info-1: oklch(0.985 0.005 210); --vds-color-info-2: oklch(0.970 0.012 210); --vds-color-info-3: oklch(0.945 0.025 210); --vds-color-info-4: oklch(0.910 0.040 210); --vds-color-info-5: oklch(0.870 0.060 210); --vds-color-info-6: oklch(0.820 0.085 210); --vds-color-info-7: oklch(0.755 0.105 210); --vds-color-info-8: oklch(0.685 0.125 210); --vds-color-info-9: oklch(0.555 0.140 210); --vds-color-info-10: oklch(0.500 0.135 210); --vds-color-info-11: oklch(0.430 0.115 210); --vds-color-info-12: oklch(0.250 0.075 210); /* ── Accent (orange) — light ── */ --vds-color-accent-1: oklch(0.985 0.005 45); --vds-color-accent-2: oklch(0.970 0.015 45); --vds-color-accent-3: oklch(0.945 0.030 45); --vds-color-accent-4: oklch(0.915 0.055 45); --vds-color-accent-5: oklch(0.880 0.085 45); --vds-color-accent-6: oklch(0.830 0.115 45); --vds-color-accent-7: oklch(0.775 0.140 45); --vds-color-accent-8: oklch(0.720 0.160 45); --vds-color-accent-9: oklch(0.665 0.180 45); --vds-color-accent-10: oklch(0.615 0.175 45); --vds-color-accent-11: oklch(0.475 0.140 45); --vds-color-accent-12: oklch(0.275 0.090 45); } /* ── Intent solids — dark mode ── */ [data-theme="dark"] { /* Primary */ --vds-color-primary-1: oklch(0.190 0.020 265); --vds-color-primary-2: oklch(0.215 0.035 265); --vds-color-primary-3: oklch(0.245 0.060 265); --vds-color-primary-4: oklch(0.275 0.085 265); --vds-color-primary-5: oklch(0.310 0.110 265); --vds-color-primary-6: oklch(0.355 0.135 265); --vds-color-primary-7: oklch(0.420 0.160 265); --vds-color-primary-8: oklch(0.500 0.180 265); --vds-color-primary-9: oklch(0.610 0.200 265); --vds-color-primary-10: oklch(0.665 0.195 265); --vds-color-primary-11: oklch(0.760 0.180 265); --vds-color-primary-12: oklch(0.910 0.080 265); /* Success */ --vds-color-success-1: oklch(0.180 0.018 155); --vds-color-success-2: oklch(0.205 0.030 155); --vds-color-success-3: oklch(0.235 0.050 155); --vds-color-success-4: oklch(0.265 0.070 155); --vds-color-success-5: oklch(0.300 0.090 155); --vds-color-success-6: oklch(0.345 0.110 155); --vds-color-success-7: oklch(0.405 0.130 155); --vds-color-success-8: oklch(0.485 0.155 155); --vds-color-success-9: oklch(0.610 0.170 155); --vds-color-success-10: oklch(0.660 0.165 155); --vds-color-success-11: oklch(0.755 0.150 155); --vds-color-success-12: oklch(0.905 0.080 155); /* Warning */ --vds-color-warning-1: oklch(0.180 0.020 85); --vds-color-warning-2: oklch(0.205 0.035 85); --vds-color-warning-3: oklch(0.240 0.055 85); --vds-color-warning-4: oklch(0.275 0.075 85); --vds-color-warning-5: oklch(0.315 0.095 85); --vds-color-warning-6: oklch(0.360 0.115 85); --vds-color-warning-7: oklch(0.420 0.135 85); --vds-color-warning-8: oklch(0.495 0.150 85); --vds-color-warning-9: oklch(0.700 0.155 85); --vds-color-warning-10: oklch(0.745 0.150 85); --vds-color-warning-11: oklch(0.815 0.140 85); --vds-color-warning-12: oklch(0.925 0.085 85); /* Danger */ --vds-color-danger-1: oklch(0.190 0.020 25); --vds-color-danger-2: oklch(0.215 0.035 25); --vds-color-danger-3: oklch(0.245 0.055 25); --vds-color-danger-4: oklch(0.275 0.080 25); --vds-color-danger-5: oklch(0.310 0.105 25); --vds-color-danger-6: oklch(0.355 0.130 25); --vds-color-danger-7: oklch(0.420 0.155 25); --vds-color-danger-8: oklch(0.500 0.180 25); --vds-color-danger-9: oklch(0.620 0.200 25); --vds-color-danger-10: oklch(0.670 0.195 25); --vds-color-danger-11: oklch(0.770 0.175 25); --vds-color-danger-12: oklch(0.910 0.085 25); /* Info */ --vds-color-info-1: oklch(0.185 0.015 210); --vds-color-info-2: oklch(0.210 0.025 210); --vds-color-info-3: oklch(0.240 0.045 210); --vds-color-info-4: oklch(0.270 0.060 210); --vds-color-info-5: oklch(0.305 0.080 210); --vds-color-info-6: oklch(0.350 0.095 210); --vds-color-info-7: oklch(0.410 0.115 210); --vds-color-info-8: oklch(0.490 0.135 210); --vds-color-info-9: oklch(0.620 0.140 210); --vds-color-info-10: oklch(0.670 0.135 210); --vds-color-info-11: oklch(0.760 0.120 210); --vds-color-info-12: oklch(0.905 0.075 210); /* Accent */ --vds-color-accent-1: oklch(0.185 0.020 45); --vds-color-accent-2: oklch(0.215 0.035 45); --vds-color-accent-3: oklch(0.245 0.060 45); --vds-color-accent-4: oklch(0.275 0.085 45); --vds-color-accent-5: oklch(0.315 0.110 45); --vds-color-accent-6: oklch(0.360 0.130 45); --vds-color-accent-7: oklch(0.420 0.150 45); --vds-color-accent-8: oklch(0.500 0.165 45); --vds-color-accent-9: oklch(0.665 0.180 45); --vds-color-accent-10: oklch(0.715 0.175 45); --vds-color-accent-11: oklch(0.795 0.155 45); --vds-color-accent-12: oklch(0.920 0.080 45); } /* * OLED variant — drop step 1 of every intent to match pure-black canvas. * Without this, intent step-1 (L≈0.19) on OLED neutral-1 (L=0) produces * visible banding. Step 2+ keep the regular dark ladder. */ [data-theme="dark-oled"] { --vds-color-primary-1: oklch(0.080 0.015 265); --vds-color-success-1: oklch(0.075 0.012 155); --vds-color-warning-1: oklch(0.080 0.015 85); --vds-color-danger-1: oklch(0.080 0.015 25); --vds-color-info-1: oklch(0.075 0.012 210); --vds-color-accent-1: oklch(0.080 0.015 45); } } @layer tokens { /* * ── Three alpha families ── * * 1. black-a* ALWAYS black, regardless of theme. * Use for: shadows, modal scrims, dialog overlays. * * 2. white-a* ALWAYS white, regardless of theme. * Use for: glass/frost overlays on media, highlights on * dark hero sections, ripples on dark buttons. * * 3. neutral-a* ADAPTIVE — black tint in light, white tint in dark. * Use for: ghost button hover, dividers on colored panels, * interactive overlays where the parent bg is unknown. * * Plus per-intent alpha (primary-a1..12, …) derived from the intent's * own solid-9 step via color-mix. Because the derivation goes through * the runtime primitive, brand themes that override --vds-color-{intent}-9 * automatically flow through every alpha step — no per-brand alpha * overrides required. */ :root { /* ─── Black alpha (always black) ─── */ --vds-color-black-a1: oklch(0 0 0 / 0.05); --vds-color-black-a2: oklch(0 0 0 / 0.10); --vds-color-black-a3: oklch(0 0 0 / 0.15); --vds-color-black-a4: oklch(0 0 0 / 0.20); --vds-color-black-a5: oklch(0 0 0 / 0.30); --vds-color-black-a6: oklch(0 0 0 / 0.40); --vds-color-black-a7: oklch(0 0 0 / 0.50); --vds-color-black-a8: oklch(0 0 0 / 0.60); --vds-color-black-a9: oklch(0 0 0 / 0.70); --vds-color-black-a10: oklch(0 0 0 / 0.80); --vds-color-black-a11: oklch(0 0 0 / 0.90); --vds-color-black-a12: oklch(0 0 0 / 0.95); /* ─── White alpha (always white) ─── */ --vds-color-white-a1: oklch(1 0 0 / 0.05); --vds-color-white-a2: oklch(1 0 0 / 0.10); --vds-color-white-a3: oklch(1 0 0 / 0.15); --vds-color-white-a4: oklch(1 0 0 / 0.20); --vds-color-white-a5: oklch(1 0 0 / 0.30); --vds-color-white-a6: oklch(1 0 0 / 0.40); --vds-color-white-a7: oklch(1 0 0 / 0.50); --vds-color-white-a8: oklch(1 0 0 / 0.60); --vds-color-white-a9: oklch(1 0 0 / 0.70); --vds-color-white-a10: oklch(1 0 0 / 0.80); --vds-color-white-a11: oklch(1 0 0 / 0.90); --vds-color-white-a12: oklch(1 0 0 / 0.95); /* ─── Neutral alpha — light (black tint, industry-tuned) ─── */ --vds-color-neutral-a1: oklch(0 0 0 / 0.012); --vds-color-neutral-a2: oklch(0 0 0 / 0.024); --vds-color-neutral-a3: oklch(0 0 0 / 0.059); --vds-color-neutral-a4: oklch(0 0 0 / 0.090); --vds-color-neutral-a5: oklch(0 0 0 / 0.122); --vds-color-neutral-a6: oklch(0 0 0 / 0.149); --vds-color-neutral-a7: oklch(0 0 0 / 0.192); --vds-color-neutral-a8: oklch(0 0 0 / 0.267); --vds-color-neutral-a9: oklch(0 0 0 / 0.447); --vds-color-neutral-a10: oklch(0 0 0 / 0.486); --vds-color-neutral-a11: oklch(0 0 0 / 0.608); --vds-color-neutral-a12: oklch(0 0 0 / 0.875); /* ─── Per-intent alpha — derived via color-mix from intent-9. Brand-safe: re-theming --vds-color-{intent}-9 propagates. ─── */ --vds-color-primary-a1: color-mix(in oklch, var(--vds-color-primary-9) 2%, transparent); --vds-color-primary-a2: color-mix(in oklch, var(--vds-color-primary-9) 4%, transparent); --vds-color-primary-a3: color-mix(in oklch, var(--vds-color-primary-9) 8%, transparent); --vds-color-primary-a4: color-mix(in oklch, var(--vds-color-primary-9) 12%, transparent); --vds-color-primary-a5: color-mix(in oklch, var(--vds-color-primary-9) 16%, transparent); --vds-color-primary-a6: color-mix(in oklch, var(--vds-color-primary-9) 20%, transparent); --vds-color-primary-a7: color-mix(in oklch, var(--vds-color-primary-9) 26%, transparent); --vds-color-primary-a8: color-mix(in oklch, var(--vds-color-primary-9) 35%, transparent); --vds-color-primary-a9: color-mix(in oklch, var(--vds-color-primary-9) 55%, transparent); --vds-color-primary-a10: color-mix(in oklch, var(--vds-color-primary-9) 62%, transparent); --vds-color-primary-a11: color-mix(in oklch, var(--vds-color-primary-9) 73%, transparent); --vds-color-primary-a12: color-mix(in oklch, var(--vds-color-primary-9) 91%, transparent); --vds-color-success-a1: color-mix(in oklch, var(--vds-color-success-9) 2%, transparent); --vds-color-success-a2: color-mix(in oklch, var(--vds-color-success-9) 4%, transparent); --vds-color-success-a3: color-mix(in oklch, var(--vds-color-success-9) 8%, transparent); --vds-color-success-a4: color-mix(in oklch, var(--vds-color-success-9) 12%, transparent); --vds-color-success-a5: color-mix(in oklch, var(--vds-color-success-9) 16%, transparent); --vds-color-success-a6: color-mix(in oklch, var(--vds-color-success-9) 20%, transparent); --vds-color-success-a7: color-mix(in oklch, var(--vds-color-success-9) 26%, transparent); --vds-color-success-a8: color-mix(in oklch, var(--vds-color-success-9) 35%, transparent); --vds-color-success-a9: color-mix(in oklch, var(--vds-color-success-9) 55%, transparent); --vds-color-success-a10: color-mix(in oklch, var(--vds-color-success-9) 62%, transparent); --vds-color-success-a11: color-mix(in oklch, var(--vds-color-success-9) 73%, transparent); --vds-color-success-a12: color-mix(in oklch, var(--vds-color-success-9) 91%, transparent); --vds-color-warning-a1: color-mix(in oklch, var(--vds-color-warning-9) 3%, transparent); --vds-color-warning-a2: color-mix(in oklch, var(--vds-color-warning-9) 6%, transparent); --vds-color-warning-a3: color-mix(in oklch, var(--vds-color-warning-9) 11%, transparent); --vds-color-warning-a4: color-mix(in oklch, var(--vds-color-warning-9) 16%, transparent); --vds-color-warning-a5: color-mix(in oklch, var(--vds-color-warning-9) 22%, transparent); --vds-color-warning-a6: color-mix(in oklch, var(--vds-color-warning-9) 28%, transparent); --vds-color-warning-a7: color-mix(in oklch, var(--vds-color-warning-9) 36%, transparent); --vds-color-warning-a8: color-mix(in oklch, var(--vds-color-warning-9) 47%, transparent); --vds-color-warning-a9: color-mix(in oklch, var(--vds-color-warning-9) 70%, transparent); --vds-color-warning-a10: color-mix(in oklch, var(--vds-color-warning-9) 77%, transparent); --vds-color-warning-a11: color-mix(in oklch, var(--vds-color-warning-9) 86%, transparent); --vds-color-warning-a12: color-mix(in oklch, var(--vds-color-warning-9) 95%, transparent); --vds-color-danger-a1: color-mix(in oklch, var(--vds-color-danger-9) 2%, transparent); --vds-color-danger-a2: color-mix(in oklch, var(--vds-color-danger-9) 4%, transparent); --vds-color-danger-a3: color-mix(in oklch, var(--vds-color-danger-9) 8%, transparent); --vds-color-danger-a4: color-mix(in oklch, var(--vds-color-danger-9) 12%, transparent); --vds-color-danger-a5: color-mix(in oklch, var(--vds-color-danger-9) 16%, transparent); --vds-color-danger-a6: color-mix(in oklch, var(--vds-color-danger-9) 20%, transparent); --vds-color-danger-a7: color-mix(in oklch, var(--vds-color-danger-9) 26%, transparent); --vds-color-danger-a8: color-mix(in oklch, var(--vds-color-danger-9) 35%, transparent); --vds-color-danger-a9: color-mix(in oklch, var(--vds-color-danger-9) 55%, transparent); --vds-color-danger-a10: color-mix(in oklch, var(--vds-color-danger-9) 62%, transparent); --vds-color-danger-a11: color-mix(in oklch, var(--vds-color-danger-9) 73%, transparent); --vds-color-danger-a12: color-mix(in oklch, var(--vds-color-danger-9) 91%, transparent); --vds-color-info-a1: color-mix(in oklch, var(--vds-color-info-9) 2%, transparent); --vds-color-info-a2: color-mix(in oklch, var(--vds-color-info-9) 4%, transparent); --vds-color-info-a3: color-mix(in oklch, var(--vds-color-info-9) 8%, transparent); --vds-color-info-a4: color-mix(in oklch, var(--vds-color-info-9) 12%, transparent); --vds-color-info-a5: color-mix(in oklch, var(--vds-color-info-9) 16%, transparent); --vds-color-info-a6: color-mix(in oklch, var(--vds-color-info-9) 20%, transparent); --vds-color-info-a7: color-mix(in oklch, var(--vds-color-info-9) 26%, transparent); --vds-color-info-a8: color-mix(in oklch, var(--vds-color-info-9) 35%, transparent); --vds-color-info-a9: color-mix(in oklch, var(--vds-color-info-9) 55%, transparent); --vds-color-info-a10: color-mix(in oklch, var(--vds-color-info-9) 62%, transparent); --vds-color-info-a11: color-mix(in oklch, var(--vds-color-info-9) 73%, transparent); --vds-color-info-a12: color-mix(in oklch, var(--vds-color-info-9) 91%, transparent); --vds-color-accent-a1: color-mix(in oklch, var(--vds-color-accent-9) 3%, transparent); --vds-color-accent-a2: color-mix(in oklch, var(--vds-color-accent-9) 6%, transparent); --vds-color-accent-a3: color-mix(in oklch, var(--vds-color-accent-9) 11%, transparent); --vds-color-accent-a4: color-mix(in oklch, var(--vds-color-accent-9) 16%, transparent); --vds-color-accent-a5: color-mix(in oklch, var(--vds-color-accent-9) 22%, transparent); --vds-color-accent-a6: color-mix(in oklch, var(--vds-color-accent-9) 28%, transparent); --vds-color-accent-a7: color-mix(in oklch, var(--vds-color-accent-9) 36%, transparent); --vds-color-accent-a8: color-mix(in oklch, var(--vds-color-accent-9) 47%, transparent); --vds-color-accent-a9: color-mix(in oklch, var(--vds-color-accent-9) 70%, transparent); --vds-color-accent-a10: color-mix(in oklch, var(--vds-color-accent-9) 77%, transparent); --vds-color-accent-a11: color-mix(in oklch, var(--vds-color-accent-9) 86%, transparent); --vds-color-accent-a12: color-mix(in oklch, var(--vds-color-accent-9) 95%, transparent); } [data-theme="dark"] { /* Neutral alpha — dark (white tint, industry-tuned) */ --vds-color-neutral-a1: oklch(1 0 0 / 0.000); --vds-color-neutral-a2: oklch(1 0 0 / 0.035); --vds-color-neutral-a3: oklch(1 0 0 / 0.070); --vds-color-neutral-a4: oklch(1 0 0 / 0.110); --vds-color-neutral-a5: oklch(1 0 0 / 0.130); --vds-color-neutral-a6: oklch(1 0 0 / 0.170); --vds-color-neutral-a7: oklch(1 0 0 / 0.230); --vds-color-neutral-a8: oklch(1 0 0 / 0.330); --vds-color-neutral-a9: oklch(1 0 0 / 0.390); --vds-color-neutral-a10: oklch(1 0 0 / 0.450); --vds-color-neutral-a11: oklch(1 0 0 / 0.690); --vds-color-neutral-a12: oklch(1 0 0 / 0.930); /* Per-intent alpha — dark: slightly higher opacity steps for vividness. Still color-mix-derived, still brand-safe. */ --vds-color-primary-a1: color-mix(in oklch, var(--vds-color-primary-9) 3%, transparent); --vds-color-primary-a2: color-mix(in oklch, var(--vds-color-primary-9) 6%, transparent); --vds-color-primary-a3: color-mix(in oklch, var(--vds-color-primary-9) 11%, transparent); --vds-color-primary-a4: color-mix(in oklch, var(--vds-color-primary-9) 16%, transparent); --vds-color-primary-a5: color-mix(in oklch, var(--vds-color-primary-9) 22%, transparent); --vds-color-primary-a6: color-mix(in oklch, var(--vds-color-primary-9) 28%, transparent); --vds-color-primary-a7: color-mix(in oklch, var(--vds-color-primary-9) 36%, transparent); --vds-color-primary-a8: color-mix(in oklch, var(--vds-color-primary-9) 47%, transparent); --vds-color-primary-a9: color-mix(in oklch, var(--vds-color-primary-9) 70%, transparent); --vds-color-primary-a10: color-mix(in oklch, var(--vds-color-primary-9) 77%, transparent); --vds-color-primary-a11: color-mix(in oklch, var(--vds-color-primary-9) 86%, transparent); --vds-color-primary-a12: color-mix(in oklch, var(--vds-color-primary-9) 95%, transparent); --vds-color-success-a1: color-mix(in oklch, var(--vds-color-success-9) 3%, transparent); --vds-color-success-a2: color-mix(in oklch, var(--vds-color-success-9) 6%, transparent); --vds-color-success-a3: color-mix(in oklch, var(--vds-color-success-9) 11%, transparent); --vds-color-success-a4: color-mix(in oklch, var(--vds-color-success-9) 16%, transparent); --vds-color-success-a5: color-mix(in oklch, var(--vds-color-success-9) 22%, transparent); --vds-color-success-a6: color-mix(in oklch, var(--vds-color-success-9) 28%, transparent); --vds-color-success-a7: color-mix(in oklch, var(--vds-color-success-9) 36%, transparent); --vds-color-success-a8: color-mix(in oklch, var(--vds-color-success-9) 47%, transparent); --vds-color-success-a9: color-mix(in oklch, var(--vds-color-success-9) 70%, transparent); --vds-color-success-a10: color-mix(in oklch, var(--vds-color-success-9) 77%, transparent); --vds-color-success-a11: color-mix(in oklch, var(--vds-color-success-9) 86%, transparent); --vds-color-success-a12: color-mix(in oklch, var(--vds-color-success-9) 95%, transparent); --vds-color-warning-a1: color-mix(in oklch, var(--vds-color-warning-9) 4%, transparent); --vds-color-warning-a2: color-mix(in oklch, var(--vds-color-warning-9) 8%, transparent); --vds-color-warning-a3: color-mix(in oklch, var(--vds-color-warning-9) 14%, transparent); --vds-color-warning-a4: color-mix(in oklch, var(--vds-color-warning-9) 20%, transparent); --vds-color-warning-a5: color-mix(in oklch, var(--vds-color-warning-9) 28%, transparent); --vds-color-warning-a6: color-mix(in oklch, var(--vds-color-warning-9) 36%, transparent); --vds-color-warning-a7: color-mix(in oklch, var(--vds-color-warning-9) 45%, transparent); --vds-color-warning-a8: color-mix(in oklch, var(--vds-color-warning-9) 56%, transparent); --vds-color-warning-a9: color-mix(in oklch, var(--vds-color-warning-9) 80%, transparent); --vds-color-warning-a10: color-mix(in oklch, var(--vds-color-warning-9) 86%, transparent); --vds-color-warning-a11: color-mix(in oklch, var(--vds-color-warning-9) 92%, transparent); --vds-color-warning-a12: color-mix(in oklch, var(--vds-color-warning-9) 97%, transparent); --vds-color-danger-a1: color-mix(in oklch, var(--vds-color-danger-9) 3%, transparent); --vds-color-danger-a2: color-mix(in oklch, var(--vds-color-danger-9) 6%, transparent); --vds-color-danger-a3: color-mix(in oklch, var(--vds-color-danger-9) 11%, transparent); --vds-color-danger-a4: color-mix(in oklch, var(--vds-color-danger-9) 16%, transparent); --vds-color-danger-a5: color-mix(in oklch, var(--vds-color-danger-9) 22%, transparent); --vds-color-danger-a6: color-mix(in oklch, var(--vds-color-danger-9) 28%, transparent); --vds-color-danger-a7: color-mix(in oklch, var(--vds-color-danger-9) 36%, transparent); --vds-color-danger-a8: color-mix(in oklch, var(--vds-color-danger-9) 47%, transparent); --vds-color-danger-a9: color-mix(in oklch, var(--vds-color-danger-9) 70%, transparent); --vds-color-danger-a10: color-mix(in oklch, var(--vds-color-danger-9) 77%, transparent); --vds-color-danger-a11: color-mix(in oklch, var(--vds-color-danger-9) 86%, transparent); --vds-color-danger-a12: color-mix(in oklch, var(--vds-color-danger-9) 95%, transparent); --vds-color-info-a1: color-mix(in oklch, var(--vds-color-info-9) 3%, transparent); --vds-color-info-a2: color-mix(in oklch, var(--vds-color-info-9) 6%, transparent); --vds-color-info-a3: color-mix(in oklch, var(--vds-color-info-9) 11%, transparent); --vds-color-info-a4: color-mix(in oklch, var(--vds-color-info-9) 16%, transparent); --vds-color-info-a5: color-mix(in oklch, var(--vds-color-info-9) 22%, transparent); --vds-color-info-a6: color-mix(in oklch, var(--vds-color-info-9) 28%, transparent); --vds-color-info-a7: color-mix(in oklch, var(--vds-color-info-9) 36%, transparent); --vds-color-info-a8: color-mix(in oklch, var(--vds-color-info-9) 47%, transparent); --vds-color-info-a9: color-mix(in oklch, var(--vds-color-info-9) 70%, transparent); --vds-color-info-a10: color-mix(in oklch, var(--vds-color-info-9) 77%, transparent); --vds-color-info-a11: color-mix(in oklch, var(--vds-color-info-9) 86%, transparent); --vds-color-info-a12: color-mix(in oklch, var(--vds-color-info-9) 95%, transparent); --vds-color-accent-a1: color-mix(in oklch, var(--vds-color-accent-9) 4%, transparent); --vds-color-accent-a2: color-mix(in oklch, var(--vds-color-accent-9) 8%, transparent); --vds-color-accent-a3: color-mix(in oklch, var(--vds-color-accent-9) 14%, transparent); --vds-color-accent-a4: color-mix(in oklch, var(--vds-color-accent-9) 20%, transparent); --vds-color-accent-a5: color-mix(in oklch, var(--vds-color-accent-9) 28%, transparent); --vds-color-accent-a6: color-mix(in oklch, var(--vds-color-accent-9) 36%, transparent); --vds-color-accent-a7: color-mix(in oklch, var(--vds-color-accent-9) 45%, transparent); --vds-color-accent-a8: color-mix(in oklch, var(--vds-color-accent-9) 56%, transparent); --vds-color-accent-a9: color-mix(in oklch, var(--vds-color-accent-9) 80%, transparent); --vds-color-accent-a10: color-mix(in oklch, var(--vds-color-accent-9) 86%, transparent); --vds-color-accent-a11: color-mix(in oklch, var(--vds-color-accent-9) 92%, transparent); --vds-color-accent-a12: color-mix(in oklch, var(--vds-color-accent-9) 95%, transparent); } } /* * Brand registry. * * Each brand file overrides primitive hues under a [data-brand="..."] * scope. The semantic layer is unchanged — components don't need to know * which brand is active. * * To add a new brand: * 1. Copy _template.css to {your-brand}.css * 2. Fill in the OKLCH overrides * 3. Add an @import for it below * 4. Set at runtime * * Order matters: later imports win in the cascade if scopes collide. */ @layer tokens.brand { /* * ── Virtari (default brand) ── * * Default brand identity. The scales here EXACTLY match the primitives * defaults — this file exists so adding new brands is symmetric, and * so the default can be re-asserted when nesting brand scopes. * * Activated by: (or no data-brand attr) * * To create a new brand, copy _template.css and override the hue/chroma * for primary, accent, and optionally any intent scale. The semantic * layer maps automatically — no component changes required. */ :root, [data-brand="virtari"] { /* No overrides — defaults from primitives/intents.css apply. Brand authors: list your overrides below following the _template.css example. */ } } /* * Color semantic entry — re-exports the split structure. * * semantic/background.css bg, surface, scrim, shadow/highlight tints, color-scheme * semantic/text.css text, link, placeholder, inverse, selection, on-solid * semantic/icon.css icon domain * semantic/border.css border (neutral + per-intent), focus, divider * semantic/interactive.css ring, skeleton, adaptive hover/active overlays * semantic/status.css on-{intent}, {intent}-solid/bg/text + hover/active * semantic/data-viz.css chart-*-muted, chart-*-strong (color-mix-derived) */ /* * Semantic color barrel. * * 1. background.css bg, surface, scrim, shadow-tint, highlight-tint, color-scheme * 2. text.css text, muted/subtle/disabled, link, placeholder, inverse, selection, on-solid * 3. icon.css icon-* * 4. border.css border, muted/strong/subtle/input, focus, divider, per-intent * 5. interactive.css ring, skeleton, hover, active, pressed, selection-bg * 6. status.css on-{intent}, {intent}-solid/bg/text + hover/active variants * 7. data-viz.css chart-*-muted, chart-*-strong (brand-safe via color-mix) */ @layer tokens { /* * ── Background / surface / scrim semantic layer ── * * Canonical home for every neutral-family and overlay-family token. * Values consume the mode-aware 12-step primitives directly, so there * are no `light-dark()` wrappers — primitives already mode-switch. * * Elevation model (applies in both light & dark modes thanks to the * inverted luminance ladder in dark — higher step = lighter in dark, * darker in light): * * bg = canvas (neutral-1) * bg-subtle = muted canvas (neutral-2) * bg-muted = container (neutral-3) * surface = flat surface (neutral-1) * surface-sunken = inset (neutral-2) * surface-raised = elevated (neutral-2) * surface-overlay = popover/menu (neutral-2) * surface-hover = hover state (neutral-3) * surface-active = active state (neutral-4) * surface-selected = primary-tinted (primary-3) * * Overlay/scrim always uses black-alpha regardless of theme — * a white-tinted scrim reads as a highlight, not a dim. */ :root { /* ─── Color-scheme signaling ─── * `light dark` lets the browser honor prefers-color-scheme when the * user hasn't forced a theme via data-theme. light-dark() functions * and form-control rendering both depend on this being set. */ color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"], [data-theme="dark-oled"] { color-scheme: dark; } :root { /* ─── Backgrounds ─── */ --vds-color-bg: var(--vds-color-neutral-1); --vds-color-bg-subtle: var(--vds-color-neutral-2); --vds-color-bg-muted: var(--vds-color-neutral-3); --vds-color-bg-disabled: var(--vds-color-neutral-3); --vds-color-bg-inverse: var(--vds-color-neutral-12); /* ─── Surfaces / elevation ─── */ --vds-color-surface: var(--vds-color-neutral-1); --vds-color-surface-sunken: var(--vds-color-neutral-2); --vds-color-surface-raised: var(--vds-color-neutral-2); --vds-color-surface-overlay: var(--vds-color-neutral-2); --vds-color-surface-hover: var(--vds-color-neutral-3); --vds-color-surface-active: var(--vds-color-neutral-4); --vds-color-surface-selected: var(--vds-color-primary-3); --vds-color-surface-inverse: var(--vds-color-neutral-12); /* ─── Scrim (canonical) ─── Always black alpha — shadows/scrims must not invert in dark. `overlay*` aliases remain in _legacy.css for backwards compat. */ --vds-color-scrim: var(--vds-color-black-a7); --vds-color-scrim-light: var(--vds-color-black-a4); --vds-color-scrim-strong: var(--vds-color-black-a9); /* ─── Shadow tint tokens ─── Drop-in for `box-shadow: 0 1px 3px var(--shadow-tint)` so components don't hardcode `black`. */ --vds-color-shadow-tint-low: var(--vds-color-black-a3); --vds-color-shadow-tint: var(--vds-color-black-a5); --vds-color-shadow-tint-strong: var(--vds-color-black-a7); /* ─── Highlight tints (glass/frost overlays on media) ─── */ --vds-color-highlight-tint: var(--vds-color-white-a3); --vds-color-highlight-tint-strong: var(--vds-color-white-a7); } } @layer tokens { /* * ── Text semantic layer ── * * Canonical home for every text token. Values consume mode-aware * 12-step primitives directly (no `light-dark()` wrappers). * * text = body copy (neutral-12) * text-muted = secondary copy (neutral-11) * text-subtle = low-contrast copy (neutral-9) * text-disabled = disabled copy (neutral-8) * text-placeholder = form placeholders (neutral-9) * text-inverse = text on bg-inverse (neutral-1) * text-link / hover / visited (primary-11/10/12) * text-selection = default selection text * on-solid = text on solid neutral bg (always white) */ :root { /* ─── Core scale ─── */ --vds-color-text: var(--vds-color-neutral-12); --vds-color-text-muted: var(--vds-color-neutral-11); --vds-color-text-subtle: var(--vds-color-neutral-9); --vds-color-text-disabled: var(--vds-color-neutral-8); /* ─── Form placeholders ─── */ --vds-color-text-placeholder: var(--vds-color-neutral-9); /* ─── Hyperlinks ─── */ --vds-color-text-link: var(--vds-color-primary-11); --vds-color-text-link-hover: var(--vds-color-primary-10); --vds-color-text-link-visited: var(--vds-color-primary-12); /* ─── Inverse (text on bg-inverse / surface-inverse) ─── */ --vds-color-text-inverse: var(--vds-color-neutral-1); /* ─── Selection (CSS ::selection text color) ─── */ --vds-color-text-selection: var(--vds-color-text); /* ─── On-solid (text on solid neutral backgrounds) ─── */ --vds-color-on-solid: var(--vds-color-white); } } @layer tokens { /* * ── Icon semantic layer (NEW domain) ── * * Icons need their own scale separate from text: * • Icons sometimes need higher visual weight than body text * (e.g. a status icon should pop, a body paragraph shouldn't) * • Icon-only theming is common (e.g. dim all icons, leave text) * • Status indicators are usually icon-only and need intent colors * * Defaults track text scale, so dropping these into existing * components without overriding still works visually. */ :root { /* ─── Default neutrals ─── */ --vds-color-icon: var(--vds-color-text); --vds-color-icon-muted: var(--vds-color-text-muted); --vds-color-icon-subtle: var(--vds-color-text-subtle); --vds-color-icon-disabled: var(--vds-color-text-disabled); --vds-color-icon-inverse: var(--vds-color-text-inverse); /* ─── Icon on solid intent backgrounds ─── */ --vds-color-icon-on-primary: var(--vds-color-on-primary); --vds-color-icon-on-success: var(--vds-color-on-success); --vds-color-icon-on-warning: var(--vds-color-on-warning); --vds-color-icon-on-danger: var(--vds-color-on-danger); --vds-color-icon-on-info: var(--vds-color-on-info); --vds-color-icon-on-accent: var(--vds-color-on-accent); /* ─── Intent-colored icons (status indicators, alerts) ─── */ --vds-color-icon-primary: var(--vds-color-primary-9); --vds-color-icon-success: var(--vds-color-success-9); --vds-color-icon-warning: var(--vds-color-warning-9); --vds-color-icon-danger: var(--vds-color-danger-9); --vds-color-icon-info: var(--vds-color-info-9); --vds-color-icon-accent: var(--vds-color-accent-9); } } @layer tokens { /* * ── Border semantic layer ── * * Canonical home for every border token. * * border = default UI border (neutral-7) * border-muted = subtle border (neutral-6) * border-subtle = alias of border-muted (neutral-6) * border-strong = strong divider (neutral-8) * border-disabled = disabled element (neutral-5) * border-input = form input border (neutral-7) * border-input-hover = form input on hover (neutral-8) * border-input-focus = form input on focus (primary-9) * border-focus = generic focus border (primary-9) * divider = horiz/vert separator (neutral-a6) * border-{intent} = per-intent border (intent-7) * border-{intent}-strong = per-intent strong (intent-9) */ :root { /* ─── Neutral borders ─── */ --vds-color-border: var(--vds-color-neutral-7); --vds-color-border-muted: var(--vds-color-neutral-6); --vds-color-border-subtle: var(--vds-color-neutral-6); --vds-color-border-strong: var(--vds-color-neutral-8); --vds-color-border-disabled: var(--vds-color-neutral-5); /* ─── Form input borders ─── */ --vds-color-border-input: var(--vds-color-neutral-7); --vds-color-border-input-hover: var(--vds-color-neutral-8); --vds-color-border-input-focus: var(--vds-color-primary-9); /* ─── Focus border ─── */ --vds-color-border-focus: var(--vds-color-primary-9); /* ─── Divider ─── */ --vds-color-divider: var(--vds-color-neutral-a6); /* ─── Per-intent borders ─── */ --vds-color-border-primary: var(--vds-color-primary-7); --vds-color-border-primary-strong: var(--vds-color-primary-9); --vds-color-border-success: var(--vds-color-success-7); --vds-color-border-success-strong: var(--vds-color-success-9); --vds-color-border-warning: var(--vds-color-warning-7); --vds-color-border-warning-strong: var(--vds-color-warning-9); --vds-color-border-danger: var(--vds-color-danger-7); --vds-color-border-danger-strong: var(--vds-color-danger-9); --vds-color-border-info: var(--vds-color-info-7); --vds-color-border-info-strong: var(--vds-color-info-9); --vds-color-border-accent: var(--vds-color-accent-7); --vds-color-border-accent-strong: var(--vds-color-accent-9); } } @layer tokens { /* * ── Interactive semantic layer ── * * Canonical home for focus rings, skeletons, and adaptive hover/active * overlays. The overlays use neutral-a* which resolves to black-tinted * alpha in light mode and white-tinted in dark — so dropping them onto * ANY parent background yields a composited result that matches the * solid neutral scale. */ :root { /* ─── Focus rings ─── */ --vds-color-ring: var(--vds-color-primary-9); --vds-color-ring-offset: var(--vds-color-neutral-1); --vds-color-ring-error: var(--vds-color-danger-9); --vds-color-ring-success: var(--vds-color-success-9); --vds-color-ring-warning: var(--vds-color-warning-9); /* ─── Skeleton / loading ─── */ --vds-color-skeleton: var(--vds-color-neutral-3); --vds-color-skeleton-shimmer: var(--vds-color-neutral-4); /* ─── Adaptive interactive overlays ─── Use these when you don't know what color the parent surface is. */ --vds-color-hover: var(--vds-color-neutral-a3); --vds-color-active: var(--vds-color-neutral-a4); --vds-color-pressed: var(--vds-color-neutral-a5); --vds-color-disabled-overlay: var(--vds-color-neutral-a3); /* ─── Text selection ─── */ --vds-color-selection-bg: var(--vds-color-primary-a4); --vds-color-selection-text: var(--vds-color-text-selection); } } @layer tokens { /* * ── Status (intent) semantic layer ── * * Canonical home for every intent token. Each intent * (primary/success/warning/danger/info/accent) is expanded to full * 12-step role coverage: * * {intent}-bg-subtle app-level intent tint (intent-2) * {intent}-bg component muted bg (intent-3) * {intent}-bg-hover hover on muted bg (intent-4) * {intent}-bg-active active on muted bg (intent-5) * {intent}-solid emphasis bg (CTAs) (intent-9) * {intent}-solid-hover solid hover (intent-10) * {intent}-solid-active solid active (intent-11) * {intent}-text high-contrast text (intent-11) * {intent}-text-muted low-contrast text (intent-10) * on-{intent} text/icon on *-solid (white or neutral-12) * * Legacy aliases (*-emphasis, *-muted, *-muted-text, *-hover, *-active) * live in _legacy.css and point at the canonical names here. */ :root { /* ─── On-colors (text/icon on solid intent backgrounds) ─── * Hand-picked defaults cover every brand tuning within our palette. * The @supports block below upgrades to contrast-color() where the * browser implements CSS Color Module 6 — automatically re-selects * black/white when a brand sets an unexpectedly light/dark intent-9. */ /* Hand-picked per the brand palette — white on all saturated intents * except warning (amber) which needs dark text for readability. * We intentionally do NOT use contrast-color() here: early Chromium * implementations use an OKLCH L=0.5 threshold, which picks black on * brand colors that sit just above that midpoint (e.g. primary-9 at * L=0.550), even though white has demonstrably higher WCAG contrast. */ --vds-color-on-primary: var(--vds-color-white); --vds-color-on-success: var(--vds-color-white); --vds-color-on-warning: var(--vds-color-neutral-12); --vds-color-on-danger: var(--vds-color-white); --vds-color-on-info: var(--vds-color-white); --vds-color-on-accent: var(--vds-color-white); /* ─── Primary ─── */ --vds-color-primary-bg-subtle: var(--vds-color-primary-2); --vds-color-primary-bg: var(--vds-color-primary-3); --vds-color-primary-bg-hover: var(--vds-color-primary-4); --vds-color-primary-bg-active: var(--vds-color-primary-5); --vds-color-primary-solid: var(--vds-color-primary-9); --vds-color-primary-solid-hover: var(--vds-color-primary-10); --vds-color-primary-solid-active: var(--vds-color-primary-11); --vds-color-primary-text: var(--vds-color-primary-11); --vds-color-primary-text-muted: var(--vds-color-primary-10); /* ─── Success ─── */ --vds-color-success-bg-subtle: var(--vds-color-success-2); --vds-color-success-bg: var(--vds-color-success-3); --vds-color-success-bg-hover: var(--vds-color-success-4); --vds-color-success-bg-active: var(--vds-color-success-5); --vds-color-success-solid: var(--vds-color-success-9); --vds-color-success-solid-hover: var(--vds-color-success-10); --vds-color-success-solid-active: var(--vds-color-success-11); --vds-color-success-text: var(--vds-color-success-11); --vds-color-success-text-muted: var(--vds-color-success-10); /* ─── Warning ─── */ --vds-color-warning-bg-subtle: var(--vds-color-warning-2); --vds-color-warning-bg: var(--vds-color-warning-3); --vds-color-warning-bg-hover: var(--vds-color-warning-4); --vds-color-warning-bg-active: var(--vds-color-warning-5); --vds-color-warning-solid: var(--vds-color-warning-9); --vds-color-warning-solid-hover: var(--vds-color-warning-10); --vds-color-warning-solid-active: var(--vds-color-warning-11); --vds-color-warning-text: var(--vds-color-warning-11); --vds-color-warning-text-muted: var(--vds-color-warning-10); /* ─── Danger ─── */ --vds-color-danger-bg-subtle: var(--vds-color-danger-2); --vds-color-danger-bg: var(--vds-color-danger-3); --vds-color-danger-bg-hover: var(--vds-color-danger-4); --vds-color-danger-bg-active: var(--vds-color-danger-5); --vds-color-danger-solid: var(--vds-color-danger-9); --vds-color-danger-solid-hover: var(--vds-color-danger-10); --vds-color-danger-solid-active: var(--vds-color-danger-11); --vds-color-danger-text: var(--vds-color-danger-11); --vds-color-danger-text-muted: var(--vds-color-danger-10); /* ─── Info ─── */ --vds-color-info-bg-subtle: var(--vds-color-info-2); --vds-color-info-bg: var(--vds-color-info-3); --vds-color-info-bg-hover: var(--vds-color-info-4); --vds-color-info-bg-active: var(--vds-color-info-5); --vds-color-info-solid: var(--vds-color-info-9); --vds-color-info-solid-hover: var(--vds-color-info-10); --vds-color-info-solid-active: var(--vds-color-info-11); --vds-color-info-text: var(--vds-color-info-11); --vds-color-info-text-muted: var(--vds-color-info-10); /* ─── Accent ─── */ --vds-color-accent-bg-subtle: var(--vds-color-accent-2); --vds-color-accent-bg: var(--vds-color-accent-3); --vds-color-accent-bg-hover: var(--vds-color-accent-4); --vds-color-accent-bg-active: var(--vds-color-accent-5); --vds-color-accent-solid: var(--vds-color-accent-9); --vds-color-accent-solid-hover: var(--vds-color-accent-10); --vds-color-accent-solid-active: var(--vds-color-accent-11); --vds-color-accent-text: var(--vds-color-accent-11); --vds-color-accent-text-muted: var(--vds-color-accent-10); } } @layer tokens { /* * ── Data visualization semantic layer ── * * Derives muted / strong variants from the canonical chart-{1..8} * primitives via color-mix. Because chart-1..6 alias onto intent * primitives, brand re-tinting automatically propagates to every * variant. chart-4/7/8 are non-intent hues that remain literal. */ :root { /* ─── Muted variants (30% alpha — area fills) ─── */ --vds-color-chart-1-muted: color-mix(in oklch, var(--vds-color-chart-1) 30%, transparent); --vds-color-chart-2-muted: color-mix(in oklch, var(--vds-color-chart-2) 30%, transparent); --vds-color-chart-3-muted: color-mix(in oklch, var(--vds-color-chart-3) 30%, transparent); --vds-color-chart-4-muted: color-mix(in oklch, var(--vds-color-chart-4) 30%, transparent); --vds-color-chart-5-muted: color-mix(in oklch, var(--vds-color-chart-5) 30%, transparent); --vds-color-chart-6-muted: color-mix(in oklch, var(--vds-color-chart-6) 30%, transparent); --vds-color-chart-7-muted: color-mix(in oklch, var(--vds-color-chart-7) 30%, transparent); --vds-color-chart-8-muted: color-mix(in oklch, var(--vds-color-chart-8) 30%, transparent); /* ─── Strong variants (+15% black in light, +15% white in dark) ─── */ --vds-color-chart-1-strong: color-mix(in oklch, var(--vds-color-chart-1), black 15%); --vds-color-chart-2-strong: color-mix(in oklch, var(--vds-color-chart-2), black 15%); --vds-color-chart-3-strong: color-mix(in oklch, var(--vds-color-chart-3), black 15%); --vds-color-chart-4-strong: color-mix(in oklch, var(--vds-color-chart-4), black 15%); --vds-color-chart-5-strong: color-mix(in oklch, var(--vds-color-chart-5), black 15%); --vds-color-chart-6-strong: color-mix(in oklch, var(--vds-color-chart-6), black 15%); --vds-color-chart-7-strong: color-mix(in oklch, var(--vds-color-chart-7), black 15%); --vds-color-chart-8-strong: color-mix(in oklch, var(--vds-color-chart-8), black 15%); } [data-theme="dark"] { --vds-color-chart-1-strong: color-mix(in oklch, var(--vds-color-chart-1), white 15%); --vds-color-chart-2-strong: color-mix(in oklch, var(--vds-color-chart-2), white 15%); --vds-color-chart-3-strong: color-mix(in oklch, var(--vds-color-chart-3), white 15%); --vds-color-chart-4-strong: color-mix(in oklch, var(--vds-color-chart-4), white 15%); --vds-color-chart-5-strong: color-mix(in oklch, var(--vds-color-chart-5), white 15%); --vds-color-chart-6-strong: color-mix(in oklch, var(--vds-color-chart-6), white 15%); --vds-color-chart-7-strong: color-mix(in oklch, var(--vds-color-chart-7), white 15%); --vds-color-chart-8-strong: color-mix(in oklch, var(--vds-color-chart-8), white 15%); } } @layer tokens { :root { --vds-space-0: 0; --vds-space-px: 1px; --vds-space-0-5: 0.125rem; --vds-space-1: 0.25rem; --vds-space-1-5: 0.375rem; --vds-space-2: 0.5rem; --vds-space-2-5: 0.625rem; --vds-space-3: 0.75rem; --vds-space-3-5: 0.875rem; --vds-space-4: 1rem; --vds-space-5: 1.25rem; --vds-space-6: 1.5rem; --vds-space-7: 1.75rem; --vds-space-8: 2rem; --vds-space-9: 2.25rem; --vds-space-10: 2.5rem; --vds-space-11: 2.75rem; --vds-space-12: 3rem; --vds-space-14: 3.5rem; --vds-space-16: 4rem; --vds-space-20: 5rem; --vds-space-24: 6rem; --vds-space-28: 7rem; --vds-space-32: 8rem; --vds-space-36: 9rem; --vds-space-40: 10rem; --vds-space-44: 11rem; --vds-space-48: 12rem; --vds-space-52: 13rem; --vds-space-56: 14rem; --vds-space-60: 15rem; --vds-space-64: 16rem; --vds-space-72: 18rem; --vds-space-80: 20rem; --vds-space-96: 24rem; } } @layer tokens { :root { /* * ── Component Size Scale ── * Shared height ramp for interactive components (buttons, inputs, selects, etc.) * Change these to resize all components globally. * * Size Height Pixels WCAG AA (24px) WCAG AAA (44px) Apple HIG Google MD * ───── ─────── ─────── ─────────────── ──────────────── ────────── ───────── * 2xs 1.5rem 24px ⚠ minimum ✗ ✗ ✗ * xs 1.75rem 28px ✓ ✗ ✗ ✗ * sm 2rem 32px ✓ ✗ ✗ ✗ * md 2.25rem 36px ✓ ✗ ✗ ✗ * lg 2.5rem 40px ✓ ✗ ✗ ✗ * xl 2.75rem 44px ✓ ✓ ✓ (44pt) ✗ * 2xl 3.25rem 52px ✓ ✓ ✓ ✓ (48dp) * 3xl 4rem 64px ✓ ✓ ✓ ✓ */ --vds-size-2xs: 1.5rem; --vds-size-xs: 1.75rem; --vds-size-sm: 2rem; --vds-size-md: 2.25rem; --vds-size-lg: 2.5rem; --vds-size-xl: 2.75rem; --vds-size-2xl: 3.25rem; --vds-size-3xl: 4rem; } } @layer tokens { :root { /* ─── Font weights ─── */ --vds-font-weight-normal: 400; --vds-font-weight-medium: 500; --vds-font-weight-semibold: 600; --vds-font-weight-bold: 700; /* ─── Font families ─── */ --vds-font-sans: "Vazirmatn", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --vds-font-latin: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --vds-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; /* ─── Font sizes ─── */ --vds-text-xs: 0.75rem; --vds-text-sm: 0.875rem; --vds-text-base: 1rem; --vds-text-lg: 1.125rem; --vds-text-xl: 1.25rem; --vds-text-2xl: 1.5rem; --vds-text-3xl: 1.875rem; --vds-text-4xl: 2.25rem; --vds-text-5xl: 3rem; --vds-text-6xl: 3.75rem; /* ─── Line heights ─── */ --vds-leading-none: 1; --vds-leading-tight: 1.25; --vds-leading-snug: 1.375; --vds-leading-normal: 1.5; --vds-leading-relaxed: 1.625; --vds-leading-loose: 2; --vds-control-line-height: 1; --vds-control-line-height-rtl: 1; --vds-control-optical-offset: 0.09375rem; --vds-control-indicator-offset: 0.0625rem; /* ─── Letter spacing ─── */ --vds-tracking-tighter: -0.05em; --vds-tracking-tight: -0.025em; --vds-tracking-normal: 0em; --vds-tracking-wide: 0.025em; --vds-tracking-wider: 0.05em; --vds-tracking-widest: 0.1em; } :where([dir="rtl"]) { --vds-control-line-height: var(--vds-control-line-height-rtl, 1); } } /* * Radii — three-tier architecture. * * primitives.css Raw scale. Change to shift the whole system. * modes.css T-shirt semantic scale + data-radius mode overrides. * components.css Per-component tokens with caps where pill mode would break the component. * * Components should consume: * • a component token (--vds-radius-checkbox, --vds-radius-card, ...) when a cap is required, or * • the t-shirt scale (--vds-radius-sm, --vds-radius-md, ...) / legacy element/surface aliases otherwise. */ @layer tokens { :root { /* * ── Primitive Radius Scale ── * Raw values. Components should not consume these directly — * use the t-shirt scale in modes.css or a component token * from components.css instead. */ --vds-radius-0: 0; --vds-radius-1: 0.125rem; /* 2px */ --vds-radius-2: 0.25rem; /* 4px */ --vds-radius-3: 0.375rem; /* 6px */ --vds-radius-4: 0.5rem; /* 8px */ --vds-radius-5: 0.75rem; /* 12px */ --vds-radius-6: 1rem; /* 16px */ --vds-radius-7: 1.5rem; /* 24px */ --vds-radius-full: 9999px; } } @layer tokens { /* * ── T-shirt semantic scale ── * Purpose-based, mode-reactive tokens. Prefer these in component CSS. * * xs tightest interactive (tiny chips, compact controls) * sm default interactive (button, input, select, toggle, tooltip) * md larger interactive (textarea cap, kbd, small badge) * lg small surface (card, dropdown-menu, popover) * xl large surface (dialog, drawer, toast) * 2xl extra-large surface * full fully rounded (pill/circle) * * ── Modes ── * Set `data-radius` on or any container to switch the personality. * sharp — minimal rounding → enterprise, technical, dense * soft — gentle rounding → default, industry standard (= :root) * round — noticeable rounding → friendly, modern, consumer * pill — fully rounded → playful, bold, marketing * * ── Back-compat aliases ── * --vds-radius-element / --vds-radius-surface / --vds-radius-badge remain * as thin aliases over sm / lg / full so existing components keep working. */ :root { --vds-radius-xs: var(--vds-radius-2); /* 4px */ --vds-radius-sm: var(--vds-radius-3); /* 6px */ --vds-radius-md: var(--vds-radius-4); /* 8px */ --vds-radius-lg: var(--vds-radius-5); /* 12px */ --vds-radius-xl: var(--vds-radius-6); /* 16px */ --vds-radius-2xl: var(--vds-radius-7); /* 24px */ /* Back-compat aliases */ --vds-radius-element: var(--vds-radius-sm); --vds-radius-surface: var(--vds-radius-lg); --vds-radius-badge: var(--vds-radius-full); } /* ── Mode: Sharp ── */ [data-radius="sharp"] { --vds-radius-xs: var(--vds-radius-0); --vds-radius-sm: var(--vds-radius-1); --vds-radius-md: var(--vds-radius-1); --vds-radius-lg: var(--vds-radius-2); --vds-radius-xl: var(--vds-radius-2); --vds-radius-2xl: var(--vds-radius-3); --vds-radius-badge: var(--vds-radius-2); } /* ── Mode: Soft (default — same as :root) ── */ /* ── Mode: Round ── */ [data-radius="round"] { --vds-radius-xs: var(--vds-radius-3); --vds-radius-sm: var(--vds-radius-4); --vds-radius-md: var(--vds-radius-5); --vds-radius-lg: var(--vds-radius-6); --vds-radius-xl: var(--vds-radius-6); --vds-radius-2xl: var(--vds-radius-7); } /* ── Mode: Pill ── */ [data-radius="pill"] { --vds-radius-xs: var(--vds-radius-full); --vds-radius-sm: var(--vds-radius-full); --vds-radius-md: var(--vds-radius-full); --vds-radius-lg: var(--vds-radius-7); --vds-radius-xl: var(--vds-radius-7); --vds-radius-2xl: var(--vds-radius-7); } } @layer tokens { :root { /* * ── Per-component radius tokens (caps) ── * Only components that break under certain modes get a dedicated token. * Pattern: min(, ). * min() lets global modes shrink the value (sharp) but never exceed the cap, * so pill mode can't turn a checkbox into a radio or bloat a dialog. * * Components NOT listed here keep using the generic t-shirt scale * or the element/surface/badge aliases — intentional. */ /* Checkbox — cap at primitive-4 (8px) so it never reads as a radio. * Must use a primitive, not --vds-radius-md: in pill mode md→9999px so * min(9999px, 9999px) would be no cap at all. */ --vds-radius-checkbox: min(var(--vds-radius-element), var(--vds-radius-4)); /* Checkbox card — follow card radius family (xl cap) so card-style * selections match sibling surfaces like Card / Alert / Toast. */ --vds-radius-checkbox-card: var(--vds-radius-card); /* Textarea — cap at lg (12px) so big multi-line corners stay readable */ --vds-radius-textarea: min(var(--vds-radius-element), var(--vds-radius-lg)); /* Kbd (keyboard key cap) — cap at primitive-4 (8px) so it keeps a key-like shape * and works with the bottom-border-width trick used for depth */ --vds-radius-kbd: min(var(--vds-radius-element), var(--vds-radius-4)); /* Chip — follow Badge: pill in every mode except sharp (slight corner). * Kept as a separate alias so future themes can diverge chip from badge. */ --vds-radius-chip: var(--vds-radius-badge); /* Floating content panels with list-based content — * cap at xl (16px / 24px in pill) so they stay readable: pill mode makes * the popover noticeably rounder, but never a full circle. * (Popover / DropdownMenu intentionally stay on --vds-radius-surface, * which tops out at 2xl=24px in pill — acceptable for those panels.) */ --vds-radius-select-content: min(var(--vds-radius-element), var(--vds-radius-xl)); --vds-radius-tooltip: min(var(--vds-radius-element), var(--vds-radius-4)); /* Alert (banner-style container) — cap at xl (16px), matches card/toast */ --vds-radius-alert: min(var(--vds-radius-md), var(--vds-radius-xl)); /* Large containers — cap at xl (16px) so pill mode doesn't bloat them */ --vds-radius-card: min(var(--vds-radius-surface), var(--vds-radius-xl)); --vds-radius-dialog: min(var(--vds-radius-surface), var(--vds-radius-xl)); --vds-radius-alert-dialog: min(var(--vds-radius-surface), var(--vds-radius-xl)); --vds-radius-drawer: min(var(--vds-radius-surface), var(--vds-radius-xl)); --vds-radius-toast: min(var(--vds-radius-surface), var(--vds-radius-xl)); /* Data table — cap at primitive-4 (8px). The inner cells can't round, * so the outer container radius is purely decorative. Anything above 8px * creates visible wedges where the sticky-header divider and scrollbar * meet the rounded corners. Must use primitive: --vds-radius-md→9999px in pill. */ --vds-radius-data-table: min(var(--vds-radius-surface), var(--vds-radius-4)); /* Radio card — follow card radius family (xl cap) so card-style * selections match sibling surfaces and the checkbox card. */ --vds-radius-radio-card: var(--vds-radius-card); /* Segmented radio — cap at primitive-4 (8px). Outer group keeps a clean corner * but inner segment dividers would blur if pill-mode rounded them too much. */ --vds-radius-segmented: min(var(--vds-radius-element), var(--vds-radius-4)); /* Nav item — cap at primitive-5 (12px) so pill radius mode rounds items * noticeably but never turns them into full capsules in the sidebar. * data-variant="pill" on