@jirawatpyk/aura-tokens 4.4.1

package/GOVERNANCE.md

@@ -0,0 +1,87 @@
+# GOVERNANCE.md — AURA Design System
+
+## Versioning
+
+Semver `MAJOR.MINOR.PATCH`:
+
+- **MAJOR** — a breaking token rename.
+- **MINOR** — a new component or token.
+- **PATCH** — a colour fix or docs.
+
+## Breaking changes
+
+1. Deprecate for one minor version before removing.
+2. Ship a migration guide.
+3. Announce in `#aura-changelog`.
+
+## Contribution flow
+
+1. Open a Proposal in Figma (a branch).
+2. Pass the a11y checklist: contrast, focus, keyboard.
+3. Open a PR on the `@aura/tokens` repo.
+4. It must pass token-lint (no hardcoded colour), the contrast check (WCAG AA) and visual regression (Chromatic).
+5. Two Design System Leads review.
+6. Merge → auto-publish to npm and Figma.
+
+## Token naming
+
+`--aura-[tier]-[category]-[name]-[scale]-[state]` — e.g. `--aura-bg-surface-hover`, `--aura-fg-primary`, `--aura-button-bg-primary-hover`.
+
+## Never
+
+- Raw hex in code — semantic tokens only.
+- A new colour without a Proposal.
+- Creative tokens (brutal shadow, grain) in a Data Table.
+
+## Adoption
+
+- Track semantic-token use vs hardcoded values; target above 90%.
+- Track Figma detaches.
+
+## Decisions (4.1)
+
+Made by the design-system owner in one pass, instead of separate Proposals. Each change is marked ADDED in its token note.
+
+- **Status palette adopted.** Four tones (neutral, progress, ready, blocked). `aura-red-700` is the only warm hue for state, chosen dark so Ready (lime-200) and Blocked differ by lightness (5.5:1), not only by hue.
+- **Alert palette adopted.** Info (violet), success (lime), warning (amber), danger (red), each with its own fill, edge and text for light and dark. Amber is limited to warning.
+- **Lucide adopted** as the only icon set, 52 icons. New icons come from Lucide unchanged.
+- **Focus ring adopted**: 2px violet, 2px offset, on every interactive element.
+- **`aura-fg-tertiary` raised** to zinc-500 (light) and a new zinc-450 (dark) so it passes AA. A PATCH-level colour fix; nothing is renamed.
+- **Creative shadow themed**: ink in light, violet-400 in dark.
+- **Dark primary button** follows the Storybook story (white fill); dark hover is zinc-200.
+- **Overlay elevation added**: `aura-shadow-overlay`, `aura-bg-scrim` and the `aura-z-*` scale, for dialogs, toasts and tooltips only.
+- **Form tokens added**: `aura-bg-input`, `aura-bg-input-disabled`, `aura-fg-danger`, `aura-border-danger`, `aura-border-control`, `aura-input-height`.
+- **Textures adopted** as Creative-only: mesh and 4% grain.
+- **Table tokens adopted**: `aura-bg-selected` (opaque in dark), `aura-bg-skeleton`, `aura-table-select-width`, `aura-control-sm`; the header uses `aura-fg-secondary` instead of 60% opacity.
+- **Fonts** stay on Google Fonts (no self-hosted files) until a team needs offline use.
+
+## Decisions (4.2)
+
+- **React package**: components are now a real ES-module package, `@aura/react` (ESM per file with `'use client'`, CJS, TypeScript types, SSR-safe). The `window.Aura` bundle is generated from the same source, so the artifact, Storybook and apps run identical code.
+- **Breakpoints adopted**: `aura-bp-sm/md/lg/xl` = 640 / 768 / 1024 / 1280, mobile-first, matching Tailwind's defaults so utility classes and components agree.
+- **Layout tokens added**: `aura-container-max` (1280), `aura-container-narrow` (720), `aura-drawer-sm/md/lg` (360/480/640), `aura-cal-cell` (36), `aura-popover-max-height` (320).
+- **`aura-z-dialog` lowered to 900** (was 1100) so menus and pickers opened inside dialogs and drawers show on top. A value change, not a rename.
+- **Buddhist era by default**: dates display in Thai with พ.ศ. years; data stays ISO. Typed years ≥ 2400 are read as พ.ศ.
+- **Week starts Sunday** in calendars (Thai convention); `weekStartsOn={1}` per team.
+- **Thai UI strings** through `AuraProvider locale="th"`; English stays the default so 4.1 screens don't change.
+- **Pilot rule**: a component isn't "done" until it has been used on the pilot page at 390px and 1440px and passes its axe and keyboard checks.
+
+## Decisions (4.3)
+
+- **`aura-fg-positive` added** (lime-800 light, lime-300 dark; ≥7:1). Only for good-news numbers, always with a trending icon and a sign.
+- **Change tone is separate from direction** in Stat: more cancellations is up and negative.
+- **Times are 24-hour `HH:mm`** in data and on screen. Typed 12-hour input is accepted and converted.
+- **Uploads stay in the app**: FileUpload validates and shows progress; sending, retries and storage belong to the product.
+- **Seven Lucide icons added** (59 total): clock, trending-up, trending-down, image, paperclip, cloud-upload, file.
+- **Tablet rule**: every DataTable on a page used at 820px sets `hideBelow` on secondary columns rather than scrolling sideways.
+- **Grid focus**: controls inside DataTable cells leave the Tab order (APG grid); Enter enters a cell, Escape leaves it.
+
+## Decisions (4.4)
+
+- **AURA is for every project.** Project-specific needs (recurring bookings, a scheduling calendar) are built in the project, not in the system. A component joins AURA when at least two projects need it.
+- **Brand is a theme layer.** `createTheme` / `aura-theme` / `ThemeStyle` re-map brand-carrying tokens; meaning colours never follow the brand. A theme that fails a contrast check fails the build.
+- **Every component forwards its ref** to its real DOM element.
+- **Three pilots are the acceptance test**: admin (Orders, Thai), form-heavy (Settings, English, react-hook-form), Creative (Launch, re-branded). A change ships when all three pass axe in both themes at 390/820/1440px.
+- **Textures are always light**: Surface forces light-theme tokens inside.
+- **Distribution**: one GitHub repository (Jirawatpyk/Aura-design) publishing `@jirawatpyk/aura-tokens` and `@jirawatpyk/aura-react` to GitHub Packages; projects install a version, never copy files.
+

package/LICENSE

@@ -0,0 +1,30 @@
+MIT License
+
+Copyright (c) 2026 Jirawatpyk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+Icons: path data from Lucide (https://lucide.dev), ISC License.
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part
+of Feather (MIT). All other copyright (c) for Lucide are held by Lucide
+Contributors 2022. Permission to use, copy, modify, and/or distribute this
+software for any purpose with or without fee is hereby granted, provided that
+the above copyright notice and this permission notice appear in all copies.

package/README.md

@@ -0,0 +1,82 @@
+# AURA Design System 4.4 — `@jirawatpyk/aura-tokens` (imported as `@aura/tokens`)
+
+Enterprise Standard, Human Creative. Tokens, Tailwind preset, Figma variables a contrast check and token lint. The components live in `../react` (`@aura/react`); `components/` here is a synced copy of their `window.Aura` bundle for `<script>`-tag use.
+
+## What's inside
+
+| File | What |
+|---|---|
+| `tokens.json` | **Source of truth.** 3-tier: primitive → semantic (light/dark) → component, plus spacing, radius, shadow (per theme), size, motion, opacity, z-index, typography. |
+| `aura.css` | Every token as a CSS variable. Light on `:root` / `[data-theme="light"]`, dark on `.dark` / `[data-theme="dark"]`. **Generated.** |
+| `aura-fonts.css` | The Google Fonts `@import` (Fraunces, Inter, JetBrains Mono, Noto Sans Thai). Kept separate so a network that blocks Google can't break `aura.css`. **Generated.** |
+| `tailwind.config.ts` + `tailwind.tokens.cjs` | Tailwind theme wired to the variables (`bg-bg-surface`, `text-fg-danger`, `rounded-aura-xl`, `shadow-aura-overlay` …). The `.cjs` is **generated**. |
+| `figma-variables.csv` | 204 variables: all colours in both modes (aliases kept), spacing, radius and sizes. **Generated.** |
+| `components/` | `aura.bundle.js` (sets `window.Aura`), `aura.components.css`, `index.d.ts`. |
+| `eslint-plugin-aura.js` | `aura/no-hardcoded-color`: hex, rgb()/hsl() and Tailwind `bg-[#…]` classes. |
+| `scripts/build-tokens.js` | Rebuilds the generated files from `tokens.json`. |
+| `scripts/a11y-check.js` | Checks 94 text/ground pairs in both themes (WCAG AA). |
+| `scripts/lint-tokens.js` | Fails on hard-coded colours (a file that must hold them says `aura-lint: allow-colours` with a reason). |
+
+## ใช้งาน (5 นาที)
+
+```bash
+# public on npmjs; internal projects can use GitHub Packages instead (see the repository README)
+npm install @aura/tokens@npm:@jirawatpyk/aura-tokens @aura/react@npm:@jirawatpyk/aura-react
+```
+
+```tsx
+// app/layout.tsx
+import '@aura/tokens/aura-fonts.css'       // Google Fonts (or use the <link> tags below instead)
+import '@aura/tokens/aura.css'             // tokens
+import '@aura/react/styles.css'            // component styles (with @aura/react)
+```
+
+```html
+<!-- Preferred: load the fonts from <head> instead of aura-fonts.css — faster, and a blocked host fails quietly -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&family=Noto+Sans+Thai:wght@400;500;600&display=swap">
+```
+
+Dark theme: put `class="dark"` (or `data-theme="dark"`) on `<html>`.
+
+### Tailwind
+
+```ts
+// tailwind.config.ts — copy this file, or spread the maps from '@aura/tokens/tailwind'
+```
+
+```tsx
+// ❌ ห้าม
+<div className="bg-[#18181b] text-white">
+// ✅ ต้อง
+<div className="bg-bg-surface-strong text-fg-inverted rounded-aura-xl p-aura-6">
+```
+
+### Components
+
+The bundle is a classic script that reads `window.React` / `window.ReactDOM` and sets `window.Aura`:
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+;(window as any).React = React; (window as any).ReactDOM = ReactDOM
+import '@aura/tokens/components.js'
+const { Button, TextField, DataTable, Dialog, toast, Toaster } = (window as any).Aura
+```
+
+Types for every component are in `components/index.d.ts`.
+
+## Changing a token
+
+1. Edit `tokens.json` (never `aura.css`, `tailwind.tokens.cjs` or the CSV).
+2. `npm run build:tokens` (regenerates the generated files).
+3. `npm run a11y` (every text/ground pair in both themes must pass AA).
+4. Open a PR; see `GOVERNANCE.md`.
+
+## Build & publish
+
+```bash
+npm run build      # build:tokens + contrast check + dist/
+npm publish        # to your private registry
+```

package/aura-fonts.css

@@ -0,0 +1,2 @@
+/* AURA fonts from Google Fonts: Fraunces 600, Inter 400/500/600, JetBrains Mono 400, Noto Sans Thai 400/500/600. GENERATED. */
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&family=Noto+Sans+Thai:wght@400;500;600&display=swap");

package/aura.css

@@ -0,0 +1,242 @@
+/* AURA v4.4.1 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
+
+:root, [data-theme="light"] {
+  --aura-violet-50: #f5f3ff;
+  --aura-violet-100: #ede9fe;
+  --aura-violet-200: #ddd6fe;
+  --aura-violet-300: #c4b5fd;
+  --aura-violet-400: #a78bfa;
+  --aura-violet-500: #8b5cf6;
+  --aura-violet-600: #7c3aed;
+  --aura-violet-700: #6d28d9;
+  --aura-violet-800: #5b21b6;
+  --aura-violet-900: #4c1d95;
+  --aura-zinc-0: #ffffff;
+  --aura-zinc-50: #fafafa;
+  --aura-zinc-100: #f4f4f5;
+  --aura-zinc-200: #e4e4e7;
+  --aura-zinc-300: #d4d4d8;
+  --aura-zinc-400: #a1a1aa;
+  --aura-zinc-450: #8e8e97;
+  --aura-zinc-500: #71717a;
+  --aura-zinc-600: #52525b;
+  --aura-zinc-700: #3f3f46;
+  --aura-zinc-800: #27272a;
+  --aura-zinc-900: #18181b;
+  --aura-zinc-950: #08080a;
+  --aura-lime-50: #f7fee7;
+  --aura-lime-100: #ecfccb;
+  --aura-lime-200: #d9f99d;
+  --aura-lime-300: #bef264;
+  --aura-lime-400: #a3e635;
+  --aura-lime-500: #84cc16;
+  --aura-lime-600: #65a30d;
+  --aura-lime-800: #3f6212;
+  --aura-red-50: #fef2f2;
+  --aura-red-200: #fecaca;
+  --aura-red-300: #fca5a5;
+  --aura-red-400: #f87171;
+  --aura-red-700: #b91c1c;
+  --aura-amber-50: #fffbeb;
+  --aura-amber-200: #fde68a;
+  --aura-amber-300: #fcd34d;
+  --aura-amber-800: #92400e;
+  --aura-ink: #08080a;
+  --aura-white: #ffffff;
+  --aura-bg-surface: var(--aura-zinc-0);
+  --aura-bg-surface-hover: var(--aura-zinc-50);
+  --aura-bg-surface-strong: var(--aura-zinc-900);
+  --aura-bg-canvas: var(--aura-zinc-50);
+  --aura-bg-inverted: var(--aura-zinc-900);
+  --aura-fg-primary: var(--aura-zinc-900);
+  --aura-fg-secondary: var(--aura-zinc-600);
+  --aura-fg-tertiary: var(--aura-zinc-500);
+  --aura-fg-inverted: var(--aura-zinc-0);
+  --aura-fg-accent: var(--aura-violet-700);
+  --aura-border-default: var(--aura-zinc-200);
+  --aura-border-strong: var(--aura-zinc-900);
+  --aura-border-subtle: var(--aura-zinc-100);
+  --aura-accent-dot: var(--aura-lime-200);
+  --aura-accent-violet: var(--aura-violet-700);
+  --aura-accent-lime: var(--aura-lime-200);
+  --aura-focus-ring: var(--aura-violet-700);
+  --aura-mesh-from: var(--aura-violet-400);
+  --aura-mesh-to: var(--aura-lime-200);
+  --aura-mesh-ground: var(--aura-white);
+  --aura-on-texture: var(--aura-ink);
+  --aura-grain: var(--aura-ink);
+  --aura-status-neutral-bg: var(--aura-zinc-100);
+  --aura-status-neutral-fg: var(--aura-zinc-700);
+  --aura-status-progress-bg: var(--aura-violet-100);
+  --aura-status-progress-fg: var(--aura-violet-800);
+  --aura-status-ready-bg: var(--aura-lime-200);
+  --aura-status-ready-fg: var(--aura-ink);
+  --aura-status-blocked-bg: var(--aura-red-700);
+  --aura-status-blocked-fg: var(--aura-white);
+  --aura-bg-selected: var(--aura-violet-50);
+  --aura-border-control: var(--aura-zinc-500);
+  --aura-bg-skeleton: var(--aura-zinc-100);
+  --aura-fg-danger: var(--aura-red-700);
+  --aura-border-danger: var(--aura-red-700);
+  --aura-bg-input: var(--aura-zinc-0);
+  --aura-bg-input-disabled: var(--aura-zinc-50);
+  --aura-bg-scrim: rgba(8,8,10,0.48);
+  --aura-alert-info-bg: var(--aura-violet-50);
+  --aura-alert-info-fg: var(--aura-violet-800);
+  --aura-alert-info-border: var(--aura-violet-200);
+  --aura-alert-success-bg: var(--aura-lime-50);
+  --aura-alert-success-fg: var(--aura-lime-800);
+  --aura-alert-success-border: var(--aura-lime-200);
+  --aura-alert-warning-bg: var(--aura-amber-50);
+  --aura-alert-warning-fg: var(--aura-amber-800);
+  --aura-alert-warning-border: var(--aura-amber-200);
+  --aura-alert-danger-bg: var(--aura-red-50);
+  --aura-alert-danger-fg: var(--aura-red-700);
+  --aura-alert-danger-border: var(--aura-red-200);
+  --aura-fg-positive: var(--aura-lime-800);
+  --aura-button-primary-bg: var(--aura-zinc-900);
+  --aura-button-primary-fg: var(--aura-zinc-0);
+  --aura-button-primary-bg-hover: var(--aura-zinc-800);
+  --aura-button-creative-bg: var(--aura-white);
+  --aura-button-creative-border: var(--aura-zinc-900);
+  --aura-card-border: var(--aura-zinc-200);
+  --aura-shadow-enterprise: 0 1px 2px rgba(0,0,0,0.05);
+  --aura-shadow-overlay: 0 16px 48px rgba(8,8,10,0.16), 0 2px 8px rgba(8,8,10,0.08);
+  --aura-shadow-creative: 4px 4px 0px #18181b;
+  --aura-shadow-creative-hover: 6px 6px 0px #18181b;
+  --aura-card-shadow-creative: 8px 8px 0px #18181b;
+}
+
+.dark, [data-theme="dark"] {
+  --aura-bg-surface: var(--aura-zinc-900);
+  --aura-bg-surface-hover: var(--aura-zinc-800);
+  --aura-bg-surface-strong: var(--aura-zinc-0);
+  --aura-bg-canvas: var(--aura-zinc-950);
+  --aura-bg-inverted: var(--aura-zinc-0);
+  --aura-fg-primary: var(--aura-zinc-0);
+  --aura-fg-secondary: var(--aura-zinc-400);
+  --aura-fg-tertiary: var(--aura-zinc-450);
+  --aura-fg-inverted: var(--aura-zinc-900);
+  --aura-fg-accent: var(--aura-violet-300);
+  --aura-border-default: rgba(255,255,255,0.1);
+  --aura-border-strong: var(--aura-zinc-0);
+  --aura-border-subtle: rgba(255,255,255,0.06);
+  --aura-accent-violet: var(--aura-violet-400);
+  --aura-focus-ring: var(--aura-violet-400);
+  --aura-bg-selected: #2c283a;
+  --aura-border-control: var(--aura-zinc-400);
+  --aura-bg-skeleton: var(--aura-zinc-800);
+  --aura-fg-danger: var(--aura-red-400);
+  --aura-border-danger: var(--aura-red-400);
+  --aura-bg-input: var(--aura-zinc-900);
+  --aura-bg-input-disabled: var(--aura-zinc-950);
+  --aura-bg-scrim: rgba(0,0,0,0.64);
+  --aura-alert-info-bg: #2c283a;
+  --aura-alert-info-fg: var(--aura-violet-300);
+  --aura-alert-info-border: #514674;
+  --aura-alert-success-bg: #27311a;
+  --aura-alert-success-fg: var(--aura-lime-300);
+  --aura-alert-success-border: #436019;
+  --aura-alert-warning-bg: #372b19;
+  --aura-alert-warning-fg: var(--aura-amber-300);
+  --aura-alert-warning-border: #704e15;
+  --aura-alert-danger-bg: #361e21;
+  --aura-alert-danger-fg: var(--aura-red-300);
+  --aura-alert-danger-border: #6e2a2b;
+  --aura-fg-positive: var(--aura-lime-300);
+  --aura-button-primary-bg: var(--aura-zinc-0);
+  --aura-button-primary-fg: var(--aura-zinc-900);
+  --aura-button-primary-bg-hover: var(--aura-zinc-200);
+  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
+  --aura-shadow-creative: 4px 4px 0px #a78bfa;
+  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;
+  --aura-card-shadow-creative: 8px 8px 0px #a78bfa;
+  color-scheme: dark;
+}
+
+:root {
+  --aura-space-0: 0px;
+  --aura-space-1: 4px;
+  --aura-space-2: 8px;
+  --aura-space-3: 12px;
+  --aura-space-4: 16px;
+  --aura-space-5: 20px;
+  --aura-space-6: 24px;
+  --aura-space-8: 32px;
+  --aura-space-10: 40px;
+  --aura-space-12: 48px;
+  --aura-space-16: 64px;
+  --aura-card-padding: 24px;
+  --aura-radius-xs: 4px;
+  --aura-radius-sm: 8px;
+  --aura-radius-md: 12px;
+  --aura-radius-lg: 16px;
+  --aura-radius-xl: 20px;
+  --aura-radius-2xl: 24px;
+  --aura-radius-full: 9999px;
+  --aura-radius-squircle: 20px;
+  --aura-card-radius: 20px;
+  --aura-button-radius: 9999px;
+  --aura-button-height: 44px;
+  --aura-icon-sm: 16px;
+  --aura-icon-md: 20px;
+  --aura-icon-lg: 24px;
+  --aura-focus-ring-width: 2px;
+  --aura-focus-ring-offset: 2px;
+  --aura-table-select-width: 40px;
+  --aura-control-sm: 32px;
+  --aura-input-height: 44px;
+  --aura-switch-width: 36px;
+  --aura-switch-height: 20px;
+  --aura-avatar-sm: 24px;
+  --aura-avatar-md: 32px;
+  --aura-avatar-lg: 40px;
+  --aura-dialog-sm: 400px;
+  --aura-dialog-md: 560px;
+  --aura-dialog-lg: 720px;
+  --aura-sidenav-width: 240px;
+  --aura-tooltip-max: 240px;
+  --aura-drawer-sm: 360px;
+  --aura-drawer-md: 480px;
+  --aura-drawer-lg: 640px;
+  --aura-container-max: 1280px;
+  --aura-container-narrow: 720px;
+  --aura-cal-cell: 36px;
+  --aura-popover-max-height: 320px;
+  --aura-bp-sm: 640px;
+  --aura-bp-md: 768px;
+  --aura-bp-lg: 1024px;
+  --aura-bp-xl: 1280px;
+  --aura-grain-opacity: 0.04;
+  --aura-disabled-opacity: 0.5;
+  --aura-z-menu: 1000;
+  --aura-z-dialog: 900;
+  --aura-z-toast: 1200;
+  --aura-z-tooltip: 1300;
+  --aura-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --aura-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --aura-duration-fast: 150ms;
+  --aura-duration-base: 250ms;
+  --aura-duration-slow: 400ms;
+  --aura-duration-spin: 800ms;
+  --aura-duration-pulse: 1400ms;
+  --aura-duration-toast: 5000ms;
+  --aura-duration-tooltip: 400ms;
+  --font-display: "Fraunces", "Noto Sans Thai", serif;
+  --font-sans: "Inter", "Noto Sans Thai", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --font-thai: "Noto Sans Thai", sans-serif;
+}
+
+.aura-text-display { font-family: var(--font-display); font-size: 72px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
+.aura-text-h1 { font-family: var(--font-display); font-size: 36px; font-weight: 600; }
+.aura-text-h2 { font-family: var(--font-sans); font-size: 24px; font-weight: 600; }
+.aura-text-h3 { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 600; }
+.aura-text-body { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; font-weight: 400; }
+.aura-text-button-label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; }
+.aura-text-table-cell { font-family: var(--font-sans); font-size: 13px; font-weight: 400; }
+.aura-text-pill-label { font-family: var(--font-sans); font-size: 11px; font-weight: 400; }
+.aura-text-label { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: 500; }
+.aura-text-caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 400; }
+.aura-text-mono { font-family: var(--font-mono); font-size: 12px; }