/* ============================================================
   macro.one DESIGN SYSTEM — tokens + base (self-contained).
   Concatenation of the handoff bundle's tokens/{fonts,colors,
   typography,spacing,base}.css. Consumers link this one file.
   ============================================================ */

/* ============================================================
   FONT FACES — Kanit is the ONLY typeface (brand TTFs, shipped).
   ============================================================ */
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 200; font-display: swap; src: url("../assets/fonts/Kanit-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/Kanit-Light.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/Kanit-Regular.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/Kanit-Italic.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/Kanit-Medium.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/Kanit-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/Kanit-Bold.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 700; font-display: swap; src: url("../assets/fonts/Kanit-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/Kanit-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/Kanit-Black.ttf") format("truetype"); }

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  --orange-700: #C84A00; --orange-600: #E85700; --orange-500: #FF6304;
  --orange-400: #FF8638; --orange-300: #F6B26B; --orange-200: #FBD3AC;
  --orange-100: #FCEBDB; --orange-050: #FEF7F0;

  --black: #000000; --ink-900: #1A1916; --ink-800: #2D2D2D; --ink-700: #3A3733;
  --ink-600: #54504A; --ink-500: #6E685E;
  --brown-600: #575047;

  --sand-700: #8C8472; --sand-600: #9C9381; --sand-500: #B7AE96; --sand-400: #CEC1A0;
  --sand-300: #E3D9BC; --sand-200: #F0EADA; --sand-100: #F7F2E8;

  --ink-950: #100F0D; --dark-ground: #14130F; --dark-raised: #1C1B17; --dark-sunk: #0C0B09;
  --dark-line: rgba(247, 242, 232, 0.12); --dark-line-strong: rgba(247, 242, 232, 0.22);
  --on-dark-strong: #FBF8F2; --on-dark-muted: #A8A294; --on-dark-faint: #6E685E;

  --gray-500: #8A8A8A; --gray-400: #B5B5B2; --gray-300: #D8D6D0; --gray-200: #E9E8E4;
  --gray-100: #F4F3F0; --white: #FFFFFF;

  --positive: #2E7D5B; --negative: #C0492B; --caution: #C98A2E;

  /* Semantic aliases */
  --surface-page: var(--white); --surface-raised: var(--white); --surface-subtle: var(--gray-100);
  --surface-sand: var(--sand-100); --surface-callout: var(--orange-100);
  --surface-inverse: var(--ink-800); --surface-brand: var(--orange-500);

  --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-500);
  --text-faint: var(--sand-600); --text-on-dark: var(--white); --text-on-brand: var(--white);
  --text-accent: var(--orange-500); --text-secondary: var(--brown-600); --text-deck: var(--brown-600);
  --text-doc: var(--black);

  --border-hairline: var(--gray-300); --border-strong: var(--ink-800);
  --border-accent: var(--orange-500); --border-sand: var(--sand-300);

  --action-bg: var(--orange-500); --action-bg-hover: var(--orange-600); --action-bg-active: var(--orange-700);
  --action-fg: var(--white); --focus-ring: var(--orange-500);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-display: "Kanit", "Poppins", system-ui, sans-serif;
  --font-body:    "Kanit", "Poppins", system-ui, sans-serif;
  --font-mono:    "Kanit", ui-monospace, "SFMono-Regular", monospace;

  --w-thin: 100; --w-extralight: 200; --w-light: 300; --w-regular: 400; --w-medium: 500;
  --w-semibold: 600; --w-bold: 700; --w-extrabold: 800; --w-black: 900;

  --fs-display-xl: 5.25rem; --fs-display: 4rem; --fs-h1: 3rem; --fs-h2: 2.125rem;
  --fs-h3: 1.5rem; --fs-h4: 1.1875rem; --fs-lead: 1.375rem; --fs-body: 1.0625rem;
  --fs-small: 0.9375rem; --fs-caption: 0.8125rem; --fs-overline: 0.75rem;

  --ls-display: -0.02em; --ls-heading: -0.01em; --ls-body: 0; --ls-overline: 0.16em; --ls-mono: 0.02em;

  --lh-tight: 1.02; --lh-snug: 1.15; --lh-heading: 1.2; --lh-body: 1.6; --lh-relaxed: 1.7;
}

/* ============================================================
   SPACING, RADII, SHADOW, LAYOUT, MOTION
   ============================================================ */
:root {
  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;

  --radius-none: 0; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;

  --border-thin: 1px; --border-rule: 2px; --border-thick: 3px;

  --shadow-none: none; --shadow-default: none;
  --shadow-overlay: 0 8px 28px rgba(26, 25, 22, 0.12);
  --shadow-focus: 0 0 0 3px rgba(255, 99, 4, 0.35);

  --content-max: 1200px; --measure: 64ch; --gutter: var(--space-6);

  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--w-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--w-semibold); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; }
strong { font-weight: var(--w-semibold); color: var(--text-strong); }
small { font-size: var(--fs-small); }

/* ============================================================
   PAGE LOADER — pitch-black splash with a breathing orange elephant.
   Lives in this render-blocking file so the black paints before any
   page content; loader.js fades it out on load and re-shows it on
   internal page navigation.
   ============================================================ */
.m1w-loader { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .55s cubic-bezier(0, 0, .2, 1); }
.m1w-loader.is-hidden { opacity: 0; pointer-events: none; }
.m1w-loader__glow { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 99, 4, .28), transparent 65%); filter: blur(24px); animation: m1w-ld-breathe 2.4s ease-in-out infinite alternate; }
.m1w-loader__logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.m1w-loader__logo img { width: 104px; height: auto; filter: drop-shadow(0 0 26px rgba(255, 99, 4, .5)); animation: m1w-ld-bob 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
.m1w-loader__word { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: #FBF8F2; animation: m1w-ld-fade 1.8s ease-in-out infinite alternate; }
.m1w-loader__word span { color: var(--orange-500); }
@keyframes m1w-ld-breathe { from { opacity: .45; transform: scale(.88); } to { opacity: 1; transform: scale(1.1); } }
@keyframes m1w-ld-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } }
@keyframes m1w-ld-fade { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .m1w-loader__glow, .m1w-loader__logo img, .m1w-loader__word { animation: none; }
}