/* Theme tokens (scale-ready, shared across all CSS files) */

:root,
:root[data-theme="light"] {
  --text-50: #e5f5ff;
  --text-100: #ccebff;
  --text-200: #99d6ff;
  --text-300: #66c2ff;
  --text-400: #33adff;
  --text-500: #0099ff;
  --text-600: #007acc;
  --text-700: #005c99;
  --text-800: #003d66;
  --text-900: #001f33;
  --text-950: #000f1a;

  --background-50: #e5f5ff;
  --background-100: #ccebff;
  --background-200: #99d6ff;
  --background-300: #66c2ff;
  --background-400: #33adff;
  --background-500: #0099ff;
  --background-600: #007acc;
  --background-700: #005c99;
  --background-800: #003d66;
  --background-900: #001f33;
  --background-950: #000f1a;

  --primary-50: #e6f5fe;
  --primary-100: #cdeafe;
  --primary-200: #9bd6fd;
  --primary-300: #69c1fc;
  --primary-400: #37adfb;
  --primary-500: #0598fa;
  --primary-600: #047ac8;
  --primary-700: #035b96;
  --primary-800: #023d64;
  --primary-900: #011e32;
  --primary-950: #010f19;

  --secondary-50: #fffde5;
  --secondary-100: #fffbcc;
  --secondary-200: #fff799;
  --secondary-300: #fff266;
  --secondary-400: #ffee33;
  --secondary-500: #ffea00;
  --secondary-600: #ccbb00;
  --secondary-700: #998c00;
  --secondary-800: #665e00;
  --secondary-900: #332f00;
  --secondary-950: #1a1700;

  --accent-50: #ffe5f5;
  --accent-100: #ffcceb;
  --accent-200: #ff99d6;
  --accent-300: #ff66c2;
  --accent-400: #ff33ad;
  --accent-500: #ff0099;
  --accent-600: #cc007a;
  --accent-700: #99005c;
  --accent-800: #66003d;
  --accent-900: #33001f;
  --accent-950: #1a000f;
}

:root[data-theme="dark"] {
  --text-50: #000f1a;
  --text-100: #001f33;
  --text-200: #003d66;
  --text-300: #005c99;
  --text-400: #007acc;
  --text-500: #0099ff;
  --text-600: #33adff;
  --text-700: #66c2ff;
  --text-800: #99d6ff;
  --text-900: #ccebff;
  --text-950: #e5f5ff;

  --background-50: #000f1a;
  --background-100: #001f33;
  --background-200: #003d66;
  --background-300: #005c99;
  --background-400: #007acc;
  --background-500: #0099ff;
  --background-600: #33adff;
  --background-700: #66c2ff;
  --background-800: #99d6ff;
  --background-900: #ccebff;
  --background-950: #e5f5ff;

  --primary-50: #010f19;
  --primary-100: #011e32;
  --primary-200: #023d64;
  --primary-300: #035b96;
  --primary-400: #047ac8;
  --primary-500: #0598fa;
  --primary-600: #37adfb;
  --primary-700: #69c1fc;
  --primary-800: #9bd6fd;
  --primary-900: #cdeafe;
  --primary-950: #e6f5fe;

  --secondary-50: #1a1700;
  --secondary-100: #332f00;
  --secondary-200: #665e00;
  --secondary-300: #998c00;
  --secondary-400: #ccbb00;
  --secondary-500: #ffea00;
  --secondary-600: #ffee33;
  --secondary-700: #fff266;
  --secondary-800: #fff799;
  --secondary-900: #fffbcc;
  --secondary-950: #fffde5;

  --accent-50: #1a000f;
  --accent-100: #33001f;
  --accent-200: #66003d;
  --accent-300: #99005c;
  --accent-400: #cc007a;
  --accent-500: #ff0099;
  --accent-600: #ff33ad;
  --accent-700: #ff66c2;
  --accent-800: #ff99d6;
  --accent-900: #ffcceb;
  --accent-950: #ffe5f5;
}

/* Semantic aliases for current UI */
:root {
  --color-bg: var(--background-50);
  --color-surface: var(--background-100);
  --color-surface-raised: var(--background-200);
  --color-text: var(--text-900);
  --color-text-muted: var(--text-700);
  --color-heading: var(--text-950);
  --color-border: var(--background-300);
  --color-primary: var(--primary-600);
  --color-primary-contrast: #ffffff;
  --color-accent: var(--accent-500);
  --color-focus: var(--primary-500);
  --color-shell-accent: var(--secondary-700);
  --theme-nav-desktop-bg: var(--background-100);
  --theme-nav-desktop-menu-text: var(--text-900);
  --theme-nav-desktop-menu-hover: var(--secondary-700);
  --theme-nav-desktop-menu-active: var(--primary-600);
  --theme-nav-menu-active: var(--theme-nav-desktop-menu-active);
  --theme-nav-desktop-dropdown-bg: var(--background-100);
  --theme-nav-desktop-dropdown-border: var(--background-300);
  --theme-nav-desktop-submenu-text: var(--text-900);
  --theme-nav-desktop-submenu-hover: var(--secondary-700);
  --theme-nav-desktop-submenu-hover-bg: var(--background-200);
  --theme-nav-mobile-bg: var(--background-100);
  --theme-nav-mobile-menu-text: var(--text-900);
  --theme-nav-mobile-menu-hover: var(--secondary-700);
  --theme-nav-mobile-menu-active: var(--primary-600);
  --theme-nav-mobile-dropdown-bg: var(--background-200);
  --theme-nav-mobile-dropdown-border: var(--background-400);
  --theme-nav-mobile-submenu-text: var(--text-900);
  --theme-nav-mobile-submenu-hover: var(--secondary-700);
  --theme-nav-mobile-submenu-hover-bg: var(--background-300);
  --theme-site-bg: var(--background-50);
  --theme-body-text: var(--text-900);
  --theme-h1-color: var(--text-950);
  --theme-h2-color: var(--text-950);
  --theme-h3-color: var(--text-900);
  --theme-h4-color: var(--text-900);
  --theme-h5-color: var(--text-900);
  --theme-h6-color: var(--text-900);
  --theme-heading-7-color: var(--text-800);
  --theme-card-bg: var(--color-surface);
  --theme-card-raised-bg: var(--color-surface-raised);
  --theme-card-border: var(--color-border);
  --theme-card-text: var(--color-text);
  --theme-btn-primary-bg: var(--color-primary);
  --theme-btn-primary-border: var(--color-primary);
  --theme-btn-primary-text: var(--color-primary-contrast);
  --theme-btn-primary-hover-bg: var(--primary-700);
  --theme-btn-primary-hover-border: var(--primary-700);
  --theme-btn-primary-hover-text: var(--color-primary-contrast);
  --theme-form-bg: var(--theme-card-bg);
  --theme-form-border: var(--theme-card-border);
  --theme-form-input-bg: var(--background-50);
  --theme-form-input-text: var(--text-900);
  --theme-form-input-border: var(--background-300);
  --theme-form-textarea-bg: var(--theme-form-input-bg);
  --theme-form-textarea-text: var(--theme-form-input-text);
  --theme-form-textarea-border: var(--theme-form-input-border);
  --theme-form-select-bg: var(--theme-form-input-bg);
  --theme-form-select-text: var(--theme-form-input-text);
  --theme-form-select-border: var(--theme-form-input-border);
  --theme-form-checkbox-accent: var(--primary-600);
  --theme-form-radio-accent: var(--primary-600);
  --theme-form-date-bg: var(--theme-form-input-bg);
  --theme-form-date-text: var(--theme-form-input-text);
  --theme-form-date-border: var(--theme-form-input-border);
  --theme-feed-filter-bg: var(--background-50);
  --theme-feed-filter-border: var(--background-300);
  --theme-feed-filter-text: var(--text-900);
  --theme-feed-filter-active-bg: var(--background-200);
  --theme-feed-filter-active-border: var(--primary-600);
  --theme-feed-filter-active-text: var(--primary-700);
  --theme-feed-filter-chip-bg: var(--background-50);
  --theme-feed-filter-chip-border: var(--background-300);
  --theme-feed-filter-chip-text: var(--text-700);
  --theme-feed-filter-chip-hover-bg: var(--background-100);
  --theme-feed-filter-chip-hover-border: var(--primary-500);
  --theme-feed-filter-chip-hover-text: var(--primary-700);
  --theme-feed-filter-reset-text: var(--primary-600);
  --theme-feed-filter-reset-hover: var(--secondary-700);
  --theme-feed-category-badge-bg: var(--accent-500);
  --theme-feed-category-badge-text: var(--background-50);
  --theme-link-base: var(--color-primary);
  --theme-link-default: var(--theme-link-base);
  --theme-link-hover: var(--color-shell-accent);
  --theme-link-active: var(--primary-700);
  --theme-link-visited: var(--accent-700);
  --theme-footer-link-color: var(--color-text);

  --font-body: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Anuphan", system-ui, -apple-system, "Noto Sans Thai", sans-serif;
  --font-hint: "Sarabun", "Noto Sans Thai", Georgia, serif;
  --font-sans: var(--font-body);
  --font-line-height-body: 1.65;
  --font-line-height-heading: 1.28;
  --font-size-step--1: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem);
  --font-size-step--2: 0.75rem;
  --font-size-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.05rem);
  --font-size-step-1: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --font-size-step-2: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --font-size-step-3: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);

  /* Typography type scale (overridden by runtime theme from admin) */
  --type-card-title-font-size: var(--font-size-step-1);
  --type-card-title-font-weight: 600;
  --type-card-excerpt-font-size: var(--font-size-step--1);
  --type-card-excerpt-font-weight: 400;
  --type-button-font-size: var(--font-size-step--1);
  --type-button-font-weight: 600;
  --type-feed-filter-link-font-size: var(--font-size-step--1);
  --type-feed-filter-link-font-weight: 500;
  --type-feed-filter-chip-font-size: var(--font-size-step--2);
  --type-feed-filter-chip-font-weight: 500;
  --type-feed-filter-reset-font-size: var(--font-size-step--2);
  --type-feed-filter-reset-font-weight: 600;
  --type-feed-category-badge-font-size: var(--font-size-step--1);
  --type-feed-category-badge-font-weight: 500;
  --type-form-input-font-size: var(--font-size-step-0);
  --type-form-input-font-weight: 400;
  --type-form-textarea-font-size: var(--font-size-step-0);
  --type-form-textarea-font-weight: 400;
  --type-form-select-font-size: var(--font-size-step-0);
  --type-form-select-font-weight: 400;
  --type-form-date-font-size: var(--font-size-step-0);
  --type-form-date-font-weight: 400;
  --type-form-check-label-font-size: var(--font-size-step-0);
  --type-form-check-label-font-weight: 400;
  --type-h1-font-size: var(--font-size-step-3);
  --type-h1-font-weight: 700;
  --type-h2-font-size: var(--font-size-step-2);
  --type-h2-font-weight: 600;
  --type-h3-font-size: var(--font-size-step-2);
  --type-h3-font-weight: 600;
  --type-h4-font-size: var(--font-size-step-1);
  --type-h4-font-weight: 600;
  --type-h5-font-size: var(--font-size-step-1);
  --type-h5-font-weight: 600;
  --type-h6-font-size: var(--font-size-step-0);
  --type-h6-font-weight: 600;
  --type-h7-font-size: var(--font-size-step-0);
  --type-h7-font-weight: 600;
  --type-nav-main-font-size: var(--font-size-step-0);
  --type-nav-main-font-weight: 500;
  --type-nav-sub-font-size: var(--font-size-step--1);
  --type-nav-sub-font-weight: 500;
  --type-footer-nav-font-size: var(--font-size-step--1);
  --type-footer-nav-font-weight: 500;
  --type-form-hint-font-size: var(--font-size-step--2);
  --type-form-hint-font-weight: 400;

  --gf-family-0: var(--font-body);
  --gf-family-1: var(--font-body);
  --gf-family-2: var(--font-body);
  --gf-family-3: var(--font-body);

  --type-card-title-font-family: var(--font-heading);
  --type-card-excerpt-font-family: var(--font-body);
  --type-button-font-family: var(--font-body);
  --type-feed-filter-link-font-family: var(--font-body);
  --type-feed-filter-chip-font-family: var(--font-body);
  --type-feed-filter-reset-font-family: var(--font-body);
  --type-feed-category-badge-font-family: var(--font-body);
  --type-form-input-font-family: var(--font-body);
  --type-form-textarea-font-family: var(--font-body);
  --type-form-select-font-family: var(--font-body);
  --type-form-date-font-family: var(--font-body);
  --type-form-check-label-font-family: var(--font-body);
  --type-h1-font-family: var(--font-heading);
  --type-h2-font-family: var(--font-heading);
  --type-h3-font-family: var(--font-heading);
  --type-h4-font-family: var(--font-heading);
  --type-h5-font-family: var(--font-heading);
  --type-h6-font-family: var(--font-heading);
  --type-h7-font-family: var(--font-heading);
  --type-nav-main-font-family: var(--font-body);
  --type-nav-sub-font-family: var(--font-body);
  --type-footer-nav-font-family: var(--font-body);
  --type-form-hint-font-family: var(--font-hint);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 31, 51, 0.08);
  --measure: 65ch;
  --header-height: 64px;

  /* Layout tokens (overridden by theme runtime when set in admin) */
  --layout-content-max-width: 1200px;
  --layout-page-padding-inline: var(--space-4);
  --layout-article-grid-gap: var(--space-5);
  --layout-article-card-min: 280px;
  --layout-card-body-padding: var(--space-4);
  --layout-card-body-gap: var(--space-3);
  --layout-form-max-width: 640px;
  --layout-header-position: sticky;
  --layout-z-sticky-header: 50;
  --layout-z-overlay: 240;
  --layout-z-dropdown: 60;
  --layout-z-mobile-bottom: 70;
}