/* ============================================================ DRAHENIX — DESIGN TOKENS One file: fonts, colors (light/dark), type scale, spacing, radius, shadow. Import this before any other stylesheet. Adapted from the Lumine app (color.js, fontMap.js) for web — not copied 1:1. Differences on purpose: - Fewer Bricolage Grotesque weights (Lumine ships Bold only; web adds ExtraBold for hero-scale headings). - Noto Sans gets a fuller weight range (Lumine's Regular/Bold/ ExtraBold/Black skips 500 and 600, which the web needs for labels, buttons and nav that sit between body and bold). - No Noto Serif / Devanagari here — those are Lumine's in-app reading and Hindi-locale faces, not part of the web's system. - Font sizes are fixed px, not run through a mobile fs() scale function — the web doesn't need device-width scaling. ============================================================ */ /* ---- 1. Load fonts ---- Google Fonts CDN. To self-host instead (like the app bundles its own .ttf files), swap this @import for local @font-face rules pointing at /fonts/. */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Noto+Sans:wght@400;500;600;700;800&family=Noto+Sans+Mono:wght@400&display=swap'); :root { /* ---- 2. Font families ---- */ --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --font-sans: "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Noto Sans Mono", ui-monospace, Consolas, monospace; /* ---- 3. Font weights ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ---- 4. Type scale — Display (Bricolage Grotesque) ---- Hero lines, H1–H3, big stat numbers. */ --text-display-xl-size: 56px; --text-display-xl-line: 60px; /* Hero H1: landings, Wallet education screen */ --text-display-lg-size: 40px; --text-display-lg-line: 46px; /* Page H1: About Us, project titles, "Welcome back" */ --text-display-md-size: 28px; --text-display-md-line: 34px; /* Section H2: "What NIX is", card group headers */ --text-display-sm-size: 22px; --text-display-sm-line: 28px; /* H3: sub-section titles, modal titles */ /* ---- 5. Type scale — Text (Noto Sans) ---- Paragraphs, nav, buttons, table cells, labels. */ --text-body-lg-size: 18px; --text-body-lg-line: 28px; /* Lead paragraph under a hero or H1 */ --text-body-size: 16px; --text-body-line: 26px; /* Default body copy, list items */ --text-body-sm-size: 14px; --text-body-sm-line: 22px; /* Helper text, timestamps, form hints */ --text-label-size: 14px; --text-label-line: 18px; /* Nav links, button labels, tab labels */ --text-caption-size: 12px; --text-caption-line: 16px; /* Eyebrows, stat sub-labels — pair with .caption class for uppercase + tracking */ /* ---- 6. Color: neutrals (the 4 primitives) ---- */ --white: #FFFFFF; --gray-light: #D6DEE8; --gray-medium: #66798D; --gray-dark: #13171B; /* ---- 7. Color: functional roles (light theme = default) ---- */ --surface: var(--white); --surface-alt: var(--gray-light); --border: rgba(102, 121, 141, 0.35); --ink: var(--gray-dark); --ink-muted: var(--gray-medium); /* ---- 8. Color: brand ---- */ --brand-teal: #0E4163; /* institutional voice: editorial headings, links */ --accent: #0057D9; /* the one action color: primary buttons, active states */ --ink-on-accent: #FFFFFF; /* text/icons on a filled brand-teal or accent surface */ --dracode: #3C95EE; /* ---- 9. Color: semantic status ---- */ --success: #1E9E6B; --warning: #E8720E; /* stays more orange than token-points's gold on purpose */ --error: #D6293B; /* stays truer red than token-astro's pink on purpose */ --info: #7C5CFC; /* ---- 10. Color: project / token identity ---- */ --token-points: #FFBE00; --token-astro: #FD477F; --token-gem: #0b050d; /* light theme; overridden to #e4e4e4 in dark theme below */ /* ---- 11. Radius ---- */ --radius-sm: 8px; /* inputs, small chips */ --radius-md: 12px; /* cards, dropdowns, modals */ --radius-lg: 20px; /* hero media, large feature cards */ --radius-pill: 999px; /* buttons, badges, tabs */ /* ---- 12. Spacing ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; --space-12: 96px; /* section breathing room on long pages */ /* ---- 13. Shadow ---- */ --shadow: 0 8px 24px rgba(15, 18, 22, 0.12); } /* ---- 14. Dark theme overrides ---- Toggle by setting data-theme="dark" on (JS), or let it follow the OS automatically via prefers-color-scheme below. */ [data-theme="dark"] { --surface: var(--gray-dark); --surface-alt: #20262C; /* one lightness step above gray-dark — the single derived shade in this system, so cards can lift off the page in dark mode */ --ink: var(--white); --token-gem: #e4e4e4; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } /* Follows the OS setting automatically, unless a data-theme attribute is explicitly set (so a manual toggle always wins). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: var(--gray-dark); --surface-alt: #20262C; --ink: var(--white); --token-gem: #e4e4e4; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } } /* ---- 14b. Phone type scale (below 768px) ---- Smaller on phones. The hero H1 has its own size (--home-hero-title-size-sm) and stays; H2 (display-md) is 26px so it sits further from it. Label and caption keep their size. The header and its tab bar use their own tokens (section 16) and never follow this. */ @media (max-width: 767px) { :root { --text-display-lg-size: 30px; --text-display-lg-line: 36px; --text-display-md-size: 26px; --text-display-md-line: 32px; --text-display-sm-size: 18px; --text-display-sm-line: 24px; --text-body-lg-size: 15px; --text-body-lg-line: 24px; --text-body-size: 14px; --text-body-line: 22px; --text-body-sm-size: 12px; --text-body-sm-line: 18px; } } /* ============================================================ 15. Type style utility classes Ready-made classes combining family + size + line-height + weight, so you don't have to assemble them by hand every time. ============================================================ */ .display-xl, .display-lg, .display-md, .display-sm { font-family: var(--font-display); font-weight: var(--weight-bold); margin: 0; } .display-xl { font-size: var(--text-display-xl-size); line-height: var(--text-display-xl-line); font-weight: var(--weight-extrabold); } .display-lg { font-size: var(--text-display-lg-size); line-height: var(--text-display-lg-line); } .display-md { font-size: var(--text-display-md-size); line-height: var(--text-display-md-line); } .display-sm { font-size: var(--text-display-sm-size); line-height: var(--text-display-sm-line); font-weight: var(--weight-semibold); } .body-lg, .body, .body-sm, .label, .caption { font-family: var(--font-sans); margin: 0; } .body-lg { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); font-weight: var(--weight-regular); } .body { font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--weight-regular); } .body-sm { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); font-weight: var(--weight-regular); } .label { font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: var(--weight-semibold); } .caption { font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; } /* ============================================================ 16. Header — tokens for (assets/js/site-header.js) Values the header needs that the scales above don't cover. They are deliberately NOT overridden by the dark theme: the header sits on a dark hero in every theme until the site-wide light/dark work lands. ============================================================ */ :root { --header-ink-muted: #778494; /* current item; today's .on colour (--gray-medium is #66798D). Hover uses --accent */ --header-surface: color-mix(in srgb, var(--gray-medium) 35%, transparent); /* theme/language pills and their selected segment */ --header-submenu-shadow: 0 0 25px rgba(14, 65, 99, 0.2); /* Projects dropdown; softer and bluer than --shadow */ --header-link-size: 21px; /* top-level links; between body-lg (18) and display-sm (22) */ --header-sublink-size: 18px; /* Apps sub-links in the panel; fixed, so the phone type scale (14b) leaves it alone */ --header-icon-size: 24px; /* Material Symbols optical size 24, as loaded */ --header-burger-size: 30px; /* hamburger + close icons */ --header-logo-width: 183px; /* logo.svg has only a viewBox, so it needs an explicit width */ --header-logo-width-sm: 120px; /* logo width below 576px */ --header-submenu-min-width: 150px; /* Projects dropdown */ --header-tabbar-height: 64px; /* phone bottom tab bar (tab + padding above and below); pages get this much bottom padding */ --header-tabbar-padding-y: 6px; /* tab bar padding, top and bottom */ --header-tabbar-item-height: 52px; /* tap target of one tab (icon + label) */ --header-tabbar-chip-width: 44px; /* active container around the icon only (fully rounded) */ --header-tabbar-chip-height: 32px; --header-tabbar-label-gap: 5px; /* container to label */ --header-tabbar-icon-size: 21px; /* tab icons, height (the header bar uses --header-icon-size, 24px) */ --header-tabbar-icon-size-points: 22px; /* Points tab icon */ --header-tabbar-icon-size-about: 22px; /* About tab icon, height */ --header-tabbar-label-size: 10px; /* tab labels; below the type scale (caption is 12px) to fit six tabs */ --header-tabbar-label-line: 12px; --header-tabbar-icon-about-width: calc(var(--header-tabbar-icon-size-about) * 28 / 24); /* its SVG is 28:24, ≈25.7px at 22px tall */ --header-lang-pill-padding-sm: 2px; /* EN/ES pill on phones: 28px tall (--space-1 from 768px up) */ --header-lang-button-size-sm: 24px; /* EN/ES buttons on phones: circles, 24 × 24 */ --header-lang-text-size-sm: 10px; /* EN/ES text on phones, inside the 24px circle */ --header-overlay: color-mix(in srgb, var(--gray-dark) 70%, transparent); /* dims the page behind the Apps sheet and the tablet menu */ --header-sheet-link-size: 16px; /* app names in the phone Apps sheet (the bar's links are --header-link-size) */ --header-sheet-link-line: 24px; --header-drawer-padding-end: var(--space-12); /* room to the right of the menu in the tablet drawer */ } /* ============================================================ 17. Footer — tokens for (assets/js/site-footer.js) Values the scales above don't cover. Like the header, the footer is always dark for now and does not follow the theme tokens. ============================================================ */ :root { --footer-tick-width: 34px; /* accent tick above the tagline */ --footer-tick-height: 4px; --footer-icon-size: 20px; /* social icons */ --footer-rule: color-mix(in srgb, var(--gray-medium) 35%, transparent); /* 1px line above the legal bar */ --footer-mark-width: clamp(560px, 80vw, 1200px); /* background logo mark */ --footer-mark-opacity: 0.1; } /* ============================================================ 18. Home — tokens for assets/css/home.css ============================================================ */ :root { --home-hero-subtitle-ink: color-mix(in srgb, var(--white) 65%, transparent); /* subtitle on the --gray-dark hero */ --hero-padding-top: 150px; /* .hm-hero from 992px: clears the full desktop header (home, about) */ --hero-padding-bottom: 40px; --hero-padding-bottom-sm: var(--space-8); /* .hm-hero below 768px: space under the hero text (style.css left 107px) */ --home-hero-title-size-sm: 32px; /* hero H1 below 768px (style.css sets 40px) */ --home-closing-mark-height: 112px; /* phoenix sketch above the closing line */ --home-row-icon-size: 40px; /* Points / Wallet / Merchant Portal icons in the "How it's different" list */ } /* ============================================================ 19. About — tokens for assets/css/about.css ============================================================ */ :root { --about-narrow-width: 640px; /* centred reading column: Mission & Vision, story, section headers */ --about-team-width: 760px; /* the people rows, centred */ --about-member-photo-size: 92px; /* square team photos in the people rows */ --about-member-social-size: 20px; /* social icons in the people rows */ } /* ============================================================ 20. Points — tokens for assets/css/points.css ============================================================ */ :root { --points-content-width: 760px; /* reading column for the text-led sections */ --points-wallet-width: 360px; /* illustrative Wallet card */ --points-hero-icon-size: 250px; /* Points icon in the hero, from 992px (hidden below) */ --points-hero-gap-max: 200px; /* widest gap between the hero text and that icon (wide screens) */ --points-hero-mark-size: 260px; /* below 992px the icon is a background mark: its size, */ --points-hero-mark-bleed: 80px; /* how far it runs past the right edge of the screen, */ --points-hero-mark-top: 0px; /* its offset from the top of the hero text, */ --points-hero-mark-opacity: 0.25; /* and how faint it is (the footer wordmark is faint too) */ --points-hero-text-inset-sm: 64px; /* below 992px the hero text stops this far before the right edge */ --points-dracode-logo-width: 360px; /* Dracode logo on its card (the logo is horizontal, 610 x 100) */ } /* ============================================================ 21. Section index — tokens for assets/css/section-index.css (points.html, privacy-policy.html, terms.html) ============================================================ */ :root { --section-index-offset: 80px; /* anchored sections stop below the sticky section index */ --section-index-arrow-zone: 56px; /* width of each arrow area (button + fade) over the chip row */ } @media (max-width: 767px) { :root { --section-index-offset: 56px; /* phones: the chip row is slimmer (section-index.css) */ } } /* ============================================================ 22. Legal pages — tokens for assets/css/legal.css ============================================================ */ :root { --legal-content-width: 760px; /* reading column of privacy-policy.html and terms.html */ --legal-top-size: 48px; /* round "back to top" button */ --legal-top-size-sm: 40px; /* the same button on phones (visible circle) */ --legal-top-hit: 48px; /* its tap target at any size */ --legal-top-rest: var(--space-6); /* where it comes to rest above the footer */ } /* ============================================================ 23. App pages — tokens for assets/css/app-page.css (plusreal.html; Lunaria and Lumine will share them) ============================================================ */ :root { --app-hero-media-width: 250px; /* app icon on the right of the hero, from 992px */ --app-hero-media-radius: 20%; /* its corners: 50px at 250px, and the same shape at the phone size */ --app-hero-media-offset: 13px; /* from 992px: its top this far below the top of the app name */ --app-hero-media-offset-md: 10px; /* tablets (768-991px): the same, for the small icon */ --app-hero-media-gap-md: var(--space-6); /* tablets (768-991px): space between that icon and the app name (phones: space-4) */ --app-hero-media-size-md: 135px; /* tablets (768-991px): the icon beside the app name and the category */ --app-hero-media-size-sm: 75px; /* phones, 561-767px */ --app-hero-media-size-xs: 70px; /* phones up to 560px, where the app name takes two lines again */ --app-hero-title-gap-wide: 5px; /* app name's bottom margin from 1600px (one line); 992-1599px keeps style.css's 15px */ --app-hero-title-gap-md: 15px; /* the same margin on tablets (768-991px; style.css has 26px) and up to 575px (20px) */ --app-fact-icon-size: 16px; /* Material Symbols in the hero: the category pill and each store-fact label */ --app-badge-height: 48px; /* Google Play badge in the hero and the closing */ --app-discord-icon-size: 22px; /* Discord mark beside "Join us on Discord" */ --app-hero-rule: color-mix(in srgb, var(--gray-medium) 35%, transparent); /* 1px line above the store facts */ --app-facts-width: 560px; /* the store facts row (downloads, released), desktop */ --app-lead-icon-size: 56px; /* the token icon beside the intro note of a token section */ --app-row-mask-size: 30px; /* a one-ink SVG icon in those rows (masked in --accent), the same visual size */ --app-row-symbol-size: 30px; /* Material Symbols in the What-it-is rows (40px box, as home rows) */ --app-video-play-size: 72px; /* round play button on the video cover */ --app-shot-height: 320px; /* screenshots in the strip (their width follows their proportions) */ --app-strip-button-size: 32px; /* previous / next buttons of a strip (thin circle, in the section's title row) */ --app-strip-progress-height: 3px; /* progress bar under a strip */ --app-viewer-backdrop: color-mix(in srgb, var(--gray-dark) 94%, transparent); /* image viewer behind the image */ --app-viewer-button-size: 48px; /* its round close / previous / next buttons (touch-size target) */ --app-option-width: 144px; /* a cover in the picker strip */ --app-option-width-square: 96px; /* a square option (signs, palettes) in a picker strip */ --app-option-width-small: 72px; /* a small option: twelve fit in one row of the 970px container (signs) */ --app-option-width-group: 56px; /* a thumbnail in a grouped picker (palettes: six per row in a half column) */ --app-option-group-inset: 6px; /* the palette image inside that thumbnail, so it reads a little smaller than its ring */ --app-option-width-compact: 64px; /* a square option in a compact picker (palettes, beside another column) */ --app-phone-width: 260px; /* the phone mockup (10:16) beside a picker (Lunaria palettes) */ --app-phone-frame: 6px; /* its dark frame */ --app-phone-radius: 36px; /* its corners, rounded like a modern phone */ --app-phone-pad-top: 28px; /* space above the title card (white) */ --app-phone-pad: 16px; /* side and bottom padding of the screen */ --app-phone-gap: 14px; /* between the title card, the card and the button */ --app-phone-title-height: 64px; /* the title card; the palette colour starts at its middle */ --app-phone-button-height: 36px; /* the button near the bottom */ --app-phone-date-width: 34px; /* the day tab on the card's left */ --app-panel-stack-width: 240px; /* the image of a stacked panel (palettes) */ --app-band-logo-height: 44px; /* the logo heading a dark band (Lunaria Premium) */ --app-feature-icon-size: 40px; /* icon of a feature in a dark band */ --app-panel-text-width: 42ch; /* the text under a panel's name (signs' descriptions) */ --app-builder-card-width: 440px; /* the builder's dark result card beside the traits (Lumine), desktop */ --app-builder-card-bg: #0c060b; /* that card: the black the crystal renders sit on, so they blend into it */ --app-builder-hero-width: 360px; /* the crystal on that card */ --app-builder-letters-height: 72px; /* the type's letters (an image) under it */ --app-trait-icon-size: 52px; /* the icon of a trait option (assets/images/lumine/traits, 24px grid) */ --app-trait-icon-size-sm: 40px; /* the same on phones */ --app-card-media-width: 40%; /* the image block on the right of a card (Lunaria Beyond) */ --app-card-media-min-height: 240px; /* such a card's height, so the image has room */ --app-next-art-width: 380px; /* the illustration beside the coming-soon block (Lumine) */ --app-step-art-zoom: 1.2; /* a step illustration drawn small in its canvas, shown larger (PlusReal step 3) */ --app-reading-width: 560px; /* the sample reading card and the coming-soon block (Lumine) */ --app-areas-width: 340px; /* the growth areas column beside the sample thought */ --app-area-min-height: 44px; /* one area block (they grow to share the sample's height) */ --app-reading-icon-size: 24px; /* a layer's icon and the Gems mark */ --app-reading-line-height: 8px; /* the drawn text lines of the free layer */ --app-type-tile-ratio: 1440 / 408; /* a type tile: half the height of the zoomH close-up's own proportions */ --app-type-tile-shade: rgba(11, 5, 13, 0.15); /* the shade under the letters on a type tile (--token-gem at 15%) */ --app-panel-wide-width: 440px; /* the wide cover of a panel beside its text, from 768px (signs' illustrations) */ --app-option-ring-room: 6px; /* space kept around the strip for the chosen cover's ring (3px + 2px offset) */ --app-cover-ratio: 480 / 584; /* game covers (1440 x 1750 renders) */ --app-tag-size: 48px; /* the version tag on a game cover's corner (power-ups, timed) */ --app-tag-icon-size: 30px; --app-tag-offset: 12px; --app-panel-cover-width: 320px; /* the chosen cover beside its instructions, from 768px */ --app-howto-icon-width: 240px; /* the instruction card beside its step (1152 x 720 cards) */ --app-howto-icon-width-sm: 320px; /* tablets (768-991px): the card above its step, at most this wide (phones: full width) */ --app-howto-text-width: 30ch; /* desktop: the step text beside its card, at most this wide */ } @media (max-width: 767px) { :root { --app-badge-height: 44px; --app-video-play-size: 56px; --app-shot-height: 240px; --app-option-width: 112px; --app-howto-icon-width: 160px; } } /* ============================================================ 24. Lunaria signs — symbol and background colours (the app's own palette) Used by lunaria.html: each sign's symbol (a white mask, coloured with --sign-*-ink) on --sign-*-bg. ============================================================ */ :root { --sign-aries-ink: #d21b1f; --sign-aries-bg: #ffe3af; --sign-taurus-ink: #50584d; --sign-taurus-bg: #c6ae92; --sign-gemini-ink: #426a9e; --sign-gemini-bg: #c08ed5; --sign-cancer-ink: #7ead6d; --sign-cancer-bg: #353654; --sign-leo-ink: #e47542; --sign-leo-bg: #79140e; --sign-virgo-ink: #a52141; --sign-virgo-bg: #a4b7a3; --sign-libra-ink: #f198cc; --sign-libra-bg: #4e81b3; --sign-scorpio-ink: #16151d; --sign-scorpio-bg: #7f265c; --sign-sagittarius-ink: #ffd157; --sign-sagittarius-bg: #54bec3; --sign-capricorn-ink: #d6bda9; --sign-capricorn-bg: #363e64; --sign-aquarius-ink: #1fbbb9; --sign-aquarius-bg: #05498c; --sign-pisces-ink: #3a3167; --sign-pisces-bg: #6eb36e; } /* ============================================================ 25. Lunaria palettes — the four shades of each palette in the app (lunaria.html phone mockup) Which shade each part of the screen uses comes from the app's theme, set per palette in lunaria.html. ============================================================ */ :root { --pal-aura-100: #a1b6c9; --pal-aura-200: #d5dbe3; --pal-aura-300: #ffd9c0; --pal-aura-400: #f7f4ea; --pal-luna-100: #ff4984; --pal-luna-200: #6d4ea0; --pal-luna-300: #ffc142; --pal-luna-400: #ffe5bb; --pal-orion-100: #4422c7; --pal-orion-200: #ffbd44; --pal-orion-300: #200f55; --pal-orion-400: #d3d4d9; --pal-stella-100: #22787e; --pal-stella-200: #ff5440; --pal-stella-300: #ffda49; --pal-stella-400: #efefdf; --pal-aries-100: #d21b1f; --pal-aries-200: #990012; --pal-aries-300: #ffe3af; --pal-aries-400: #f0ede4; --pal-taurus-100: #50584d; --pal-taurus-200: #a65865; --pal-taurus-300: #c6ae92; --pal-taurus-400: #ede2de; --pal-gemini-100: #83c2c4; --pal-gemini-200: #c08ed5; --pal-gemini-300: #426a9e; --pal-gemini-400: #ede6de; --pal-cancer-100: #353654; --pal-cancer-200: #7bb9d3; --pal-cancer-300: #7ead6d; --pal-cancer-400: #e7e9e6; --pal-leo-100: #e47542; --pal-leo-200: #79140e; --pal-leo-300: #d0b6a0; --pal-leo-400: #f2e9df; --pal-virgo-100: #a4b7a3; --pal-virgo-200: #3f481f; --pal-virgo-300: #a52141; --pal-virgo-400: #d0d5cf; --pal-libra-100: #4e81b3; --pal-libra-200: #e4e8e7; --pal-libra-300: #f198cc; --pal-libra-400: #cadce0; --pal-scorpio-100: #9089b4; --pal-scorpio-200: #7f265c; --pal-scorpio-300: #16151d; --pal-scorpio-400: #e1cfe1; --pal-sagittarius-100: #54bec3; --pal-sagittarius-200: #ffd157; --pal-sagittarius-300: #8068ae; --pal-sagittarius-400: #e2e2f3; --pal-capricorn-100: #363e64; --pal-capricorn-200: #d6bda9; --pal-capricorn-300: #8f8282; --pal-capricorn-400: #dee0df; --pal-aquarius-100: #1fbbb9; --pal-aquarius-200: #192c54; --pal-aquarius-300: #05498c; --pal-aquarius-400: #e2eaec; --pal-pisces-100: #6eb36e; --pal-pisces-200: #3a3167; --pal-pisces-300: #366da5; --pal-pisces-400: #d0dad1; --pal-fire-100: #ffa86d; --pal-fire-200: #fd6937; --pal-fire-300: #d83a56; --pal-fire-400: #ffd166; --pal-water-100: #3266a4; --pal-water-200: #c8e3e7; --pal-water-300: #6aabd2; --pal-water-400: #e5eff5; --pal-earth-100: #4c3a32; --pal-earth-200: #c4b29a; --pal-earth-300: #a3b18a; --pal-earth-400: #d3e4cd; --pal-air-100: #adc0d0; --pal-air-200: #557c9a; --pal-air-300: #c6e2e8; --pal-air-400: #e4e8ea; --pal-premium-100: #1e1d1c; --pal-premium-200: #fafafa; --pal-premium-300: #e5e5e5; --pal-premium-400: #ffbe00; }