/* thanakorn. tokens, generated from tokens.json. Do not edit by hand. */
@font-face { font-family: "Geist Variable"; src: url("../fonts/geist-latin-wght-normal.woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Variable"; src: url("../fonts/geist-latin-ext-wght-normal.woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../fonts/IBMPlexSansThai_400Regular.ttf"); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../fonts/IBMPlexSansThai_600SemiBold.ttf"); font-weight: 600 900; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  --background: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --border-strong: #c8cdd5;
  --border-control: #7d8590;
  --ink: #0f0f0e;
  --text-2: #3d4148;
  --muted: #626872;
  --action: #1a6fad;
  --action-hover: #0f5a96;
  --on-action: #ffffff;
  --action-subtle: #eaf3fb;
  --ember: #ec5a2a;
  --ember-text: #c2410c;
  --focus: #1a6fad;
  --dot-past: #0f0f0e;
  --dot-future: #d5d9df;
  --success: #18774f;
  --warning: #a64b06;
  --urgent: #c0392b;
  --success-subtle: #e6f4ee;
  --warning-subtle: #fbf0e4;
  --urgent-subtle: #fbeceb;
  --glass: rgba(255, 255, 255, 0.74);
  --glass-edge: rgba(255, 255, 255, 0.65);
  --wash-paper: #fffdf9;
  --on-field: #0f0f0e;
  --code-bg: #0f0f0e;
  --code-text: #e8eaf0;
  --dawn-1: #ffb98a;
  --dawn-2: #ffb5a9;
  --dawn-3: #feb1c8;
  --dawn-4: #f0affe;
  --lagoon-1: #6ce5b5;
  --lagoon-2: #3fe4ec;
  --lagoon-3: #8ed5fe;
  --lagoon-4: #b6c9fe;
  --canopy-1: #b7d978;
  --canopy-2: #89e29d;
  --canopy-3: #4ae6d6;
  --canopy-4: #4edffe;
  --dusk-1: #ffbb69;
  --dusk-2: #feb6a4;
  --dusk-3: #ffafd4;
  --dusk-4: #c9c2fe;
  --dawn-strong-1: #c16302;
  --dawn-strong-2: #ab58be;
  --lagoon-strong-1: #01976d;
  --lagoon-strong-2: #5a76e4;
  --canopy-strong-1: #6c8e03;
  --canopy-strong-2: #0090a8;
  --dusk-strong-1: #b17000;
  --dusk-strong-2: #8169dd;
  --shadow-sm: 0 1px 3px rgba(15, 20, 30, 0.06);
  --shadow-md: 0 6px 16px rgba(15, 20, 30, 0.10);
  --shadow-glass: 0 12px 40px rgba(15, 20, 30, 0.12);
}

[data-theme="graphite"] {
  --background: #1a1a1a;
  --surface: #212121;
  --surface-2: #2a2a2a;
  --border: #333333;
  --border-strong: #474747;
  --border-control: #969696;
  --ink: #ffffff;
  --text-2: #c6c6c6;
  --muted: #969696;
  --action: #78a9ff;
  --action-hover: #a6c8ff;
  --on-action: #0f0f0e;
  --action-subtle: #1c2a3a;
  --ember: #f56b3f;
  --ember-text: #ff8a5c;
  --focus: #ffffff;
  --dot-past: #ffffff;
  --dot-future: #404040;
  --success: #42be65;
  --warning: #f1c21b;
  --urgent: #ff8389;
  --success-subtle: #1b2e24;
  --warning-subtle: #33290d;
  --urgent-subtle: #3a1f21;
  --glass: rgba(26, 26, 26, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --wash-paper: #1c1b1a;
  --on-field: #ffffff;
  --code-bg: #111111;
  --code-text: #e8eaf0;
  --dawn-1: #8b4500;
  --dawn-2: #9a3326;
  --dawn-3: #953058;
  --dawn-4: #7c3b8b;
  --lagoon-1: #036c4d;
  --lagoon-2: #00686c;
  --lagoon-3: #00638a;
  --lagoon-4: #3d52a8;
  --canopy-1: #4c6500;
  --canopy-2: #006e30;
  --canopy-3: #036961;
  --canopy-4: #046677;
  --dusk-1: #7f4f00;
  --dusk-2: #99351b;
  --dusk-3: #913266;
  --dusk-4: #5c48a2;
  --dawn-strong-1: #ed914c;
  --dawn-strong-2: #d28ce1;
  --lagoon-strong-1: #37c695;
  --lagoon-strong-2: #8aa6fe;
  --canopy-strong-1: #97ba4f;
  --canopy-strong-2: #07bfde;
  --dusk-strong-1: #e29936;
  --dusk-strong-2: #aa9afc;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-glass: 0 12px 40px rgba(0, 0, 0, 0.45);
}

:root {
  --space-01: 2px;
  --space-02: 4px;
  --space-03: 8px;
  --space-04: 12px;
  --space-05: 16px;
  --space-06: 24px;
  --space-07: 32px;
  --space-08: 40px;
  --space-09: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 160px;
  --container: 72rem;
  --measure: 42rem;
  --gutter: 16px;
  --gutter-wide: 32px;
  --header-height: 56px;
  --hairline: 1px;
  --focus-width: 2px;
  --rule-weight: 3px;
  --pixel-cell: 16px;
  --slide-width: 1920px;
  --slide-height: 1080px;
  --slide-gutter: 120px;
  --canvas-portrait: 1350px;
  --canvas-og-w: 1200px;
  --canvas-og-h: 630px;
  --canvas-og-gutter: 72px;
  --canvas-share-gutter: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --duration-fast-01: 70ms;
  --duration-fast-02: 110ms;
  --duration-moderate-01: 150ms;
  --duration-moderate-02: 240ms;
  --duration-slow-01: 400ms;
  --duration-slow-02: 700ms;
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
  --opacity-disabled: 0.38;
  --opacity-grain: 0.22;
  --opacity-paper: 0.3;
  --opacity-halftone: 0.06;
  --opacity-granule: 0.16;
  --blur-glass: 24px;
  --z-header: 40;
  --z-overlay: 50;
  --font-sans: 'Geist Variable', 'IBM Plex Sans Thai', ui-sans-serif, system-ui, sans-serif;
  --font-thai: 'IBM Plex Sans Thai', 'Geist Variable', ui-sans-serif, sans-serif;
  --font-serif: 'IBM Plex Serif', ui-serif, Georgia, 'IBM Plex Sans Thai', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-pixel: 'Pixelify Sans', 'IBM Plex Mono', ui-monospace, monospace;
}

.figure { font-family: var(--font-sans); font-size: 128px; line-height: 1; font-weight: 600; letter-spacing: -0.05em; }
.display { font-family: var(--font-sans); font-size: 72px; line-height: 0.95; font-weight: 600; letter-spacing: -0.04em; }
.headline { font-family: var(--font-sans); font-size: 48px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; }
.heading-1 { font-family: var(--font-sans); font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.heading-2 { font-family: var(--font-sans); font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.heading-3 { font-family: var(--font-sans); font-size: 18px; line-height: 1.35; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 500; }
.serif-body { font-family: var(--font-serif); font-size: 18px; line-height: 1.75; font-weight: 400; }
.serif-quote { font-family: var(--font-serif); font-size: 26px; line-height: 1.4; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.08em; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; font-weight: 400; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; font-weight: 400; }
.pixel-display { font-family: var(--font-pixel); font-size: 48px; line-height: 1.05; font-weight: 600; }
.pixel-label { font-family: var(--font-pixel); font-size: 16px; line-height: 1.3; font-weight: 400; }
.thai-heading { font-family: var(--font-thai); font-size: 24px; line-height: 1.45; font-weight: 600; }
.thai-body { font-family: var(--font-thai); font-size: 16px; line-height: 1.8; font-weight: 400; }