/* ==========================================================================
   Donaloop design tokens
   Ported from public/design/donaloop-design-system/project/tokens/*.css
   Loaded after jaidee-style.css / jaidee-responsive.css so these values are
   available everywhere, and so later rules in donaloop-chrome.css can use them.
   SUBSTITUTION NOTE: no Donaloop brand font files exist yet — Plus Jakarta Sans
   + Noto Sans Thai stand in for them. Swap the @import below when real files
   arrive; nothing else in this file needs to change.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap");

:root {
	/* Brand navy */
	--navy-950: #04193b; --navy-900: #06285a; --navy-800: #08346f; --navy-700: #0b4295;
	--navy-600: #1155b8; --navy-500: #2a6fd4; --navy-400: #5a91e0; --navy-300: #86b0e6;
	--navy-200: #b3cdf0; --navy-100: #d6e4f7; --navy-50: #eef4fc;
	/* Brand orange */
	--orange-800: #8f4f08; --orange-700: #b8660d; --orange-600: #d97b12; --orange-500: #f18e1c;
	--orange-400: #f7a94b; --orange-300: #fabf78; --orange-200: #fcd9a6; --orange-100: #fde9cd; --orange-50: #fef4e6;
	/* Ink */
	--ink-900: #000000; --ink-800: #14181f; --ink-700: #252b36; --ink-600: #454b57;
	--ink-500: #5e6572; --ink-400: #767d8a; --ink-300: #a3a9b4; --ink-200: #cfd4dc;
	--ink-100: #e7eaef; --ink-50: #f5f6f8; --white: #ffffff;
	/* Sand */
	--sand-100: #f9ece0; --sand-50: #fdf7ef;
	/* Semantic status */
	--green-600: #177f4e; --green-500: #1f9d63; --green-100: #d8f0e3;
	--amber-500: #f0ad4e; --amber-100: #fcedd4;
	--red-600: #b62f2f; --red-500: #d94141; --red-100: #fadcdc;

	/* Semantic aliases */
	--brand-primary: var(--navy-700); --brand-primary-hover: var(--navy-800); --brand-primary-active: var(--navy-900);
	--brand-accent: var(--orange-500); --brand-accent-hover: var(--orange-600); --brand-accent-active: var(--orange-700);
	--text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-subtle: var(--ink-400);
	--text-on-dark: var(--white); --text-on-dark-muted: var(--navy-100); --text-on-accent: var(--white);
	--text-link: var(--navy-700); --text-link-hover: var(--orange-600);
	--surface-page: var(--white); --surface-card: var(--white); --surface-muted: var(--ink-50); --surface-sand: var(--sand-50);
	--surface-invert: var(--navy-700); --surface-black: var(--ink-900);
	--border-subtle: var(--ink-100); --border-default: var(--ink-200); --border-strong: var(--ink-300); --border-invert: rgba(255,255,255,.28);
	--focus-ring: var(--orange-400);
	--status-pending-fg: var(--navy-700); --status-pending-bg: var(--navy-50);
	--status-cleared-fg: var(--orange-700); --status-cleared-bg: var(--orange-50);
	--status-requested-fg: #8a5a06; --status-requested-bg: var(--amber-100);
	--status-paid-fg: var(--green-600); --status-paid-bg: var(--green-100);
	--status-rejected-fg: var(--red-600); --status-rejected-bg: var(--red-100);

	/* Type */
	--font-display: "Plus Jakarta Sans", "Noto Sans Thai", -apple-system, "Segoe UI", sans-serif;
	--font-text: "Plus Jakarta Sans", "Noto Sans Thai", -apple-system, "Segoe UI", sans-serif;
	--font-thai: "Noto Sans Thai", "Plus Jakarta Sans", sans-serif;
	--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
	--fs-display-xl: 64px; --fs-display-lg: 54px; --fs-display-md: 40px; --fs-h2: 30px; --fs-h3: 24px; --fs-h4: 20px; --fs-h5: 18px;
	--fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-micro: 12px; --fs-label: 12px;
	--lh-tight: 1.05; --lh-display: 1.12; --lh-heading: 1.25; --lh-body: 1.6; --lh-loose: 1.75; --lh-thai: 1.9;
	--ls-display: -0.02em; --ls-normal: 0; --ls-label: 0.08em; --ls-wide: 0.14em;

	/* Spacing (4px scale) + section rhythm carried over from jaideeapp's .page-section-* */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
	--space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 100px;
	--section-y-sm: 50px; --section-y: 100px; --section-gap: 30px; --block-gap: 30px;
	--container-max: 1140px; --container-pad: 15px; --gutter: 30px; --sidebar-w: 270px;
	--control-h-sm: 34px; --control-h: 44px; --control-h-lg: 54px;

	/* Radius / shadow / motion */
	--radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-circle: 50%;
	--border-width: 1px; --border-width-thick: 2px; --rule-width: 4px;
	--shadow-xs: 0 1px 2px rgba(6,40,90,.08);
	--shadow-sm: 0 2px 6px rgba(6,40,90,.10);
	--shadow-md: 0 6px 18px rgba(6,40,90,.12);
	--shadow-lg: 0 16px 40px rgba(6,40,90,.16);
	--shadow-accent: 0 8px 20px rgba(241,142,28,.28);
	--overlay-scrim: rgba(4,25,59,.62);
	--blur-panel: blur(12px);
	--ease-out: cubic-bezier(.2,.7,.3,1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --press-scale: .985;
}

html, body {
	font-family: var(--font-text) !important;
}
:lang(th), :lang(th) p, :lang(th) li, :lang(th) span, :lang(th) div {
	line-height: var(--lh-thai);
}