/* ========================================================================== Agarwood Eco Capital — Design Tokens -------------------------------------------------------------------------- Single source of truth for colour, type, spacing, depth and motion. Every page and the brand-rules page import this file; nothing else should hard-code a colour, font or shadow. STATUS: PALETTE AND FONTS APPLIED Palette and type (Instrument Serif + Azeret Mono) come from the Superdesign draft. Only the Thai font stack is still [PLACEHOLDER]. The rest of the system (contrast checks, shadows, states) derives from the seven palette slots below. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. COLOUR — raw palette (from the Superdesign draft) Seven slots. Keep the roles; swap the values. ------------------------------------------------------------------------ */ --palette-1: #E7E3DA; /* ground — page background */ --palette-2: #DCD7CB; /* ground-2 — raised surfaces, cards */ --palette-3: #C6C2BA; /* hairline — borders (ink at 16% on ground, made solid) */ --palette-4: #5E5A52; /* muted — secondary text. Draft value #6E6A61 failed AA (3.75:1 on surfaces), so darkened to pass */ --palette-5: #1A1917; /* ink — primary text */ --palette-6: #151412; /* deep ink — dark sections, footer */ --palette-accent: #9B3418; /* pigment — links, buttons, focus, key lines */ /* ------------------------------------------------------------------------ 2. COLOUR — semantic roles (light theme) Components use ONLY these names, never the raw palette. ------------------------------------------------------------------------ */ --color-bg: var(--palette-1); --color-surface: var(--palette-2); --color-border: var(--palette-3); --color-text: var(--palette-5); --color-text-muted: var(--palette-4); --color-accent: var(--palette-accent); --color-on-accent: var(--palette-1); /* text placed on accent fills */ --color-focus: var(--palette-accent); /* Dark sections (hero overlay, footer, map) */ --color-accent-on-dark: #D9785A; /* pigment lifted to stay legible on dark grounds (5.95:1) */ --color-bg-inverse: var(--palette-6); --color-text-inverse: var(--palette-1); --color-text-inverse-muted: var(--palette-3); /* Constellation roadmap */ --color-star: var(--palette-accent); /* node dots + joining lines */ --color-star-glow: color-mix(in srgb, var(--palette-accent) 35%, transparent); /* ------------------------------------------------------------------------ 3. TYPOGRAPHY — Instrument Serif + Azeret Mono, as in the Superdesign draft ------------------------------------------------------------------------ */ /* Loaded from Google Fonts in each page's . Neither family has Thai glyphs, so Thai pages switch to --font-thai (see html[lang="th"] below). */ --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; /* headings */ --font-body: "Azeret Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* body/UI */ --font-thai: "Leelawadee UI", "Thonburi", "Tahoma", sans-serif; /* Thai [PLACEHOLDER] */ /* Fluid type scale (min @ 360px → max @ 1440px viewport), matched to the Superdesign draft: small, airy mono text (labels 10.5–11px in capitals, body 13–14px) against large, tight Instrument Serif headings. */ --text-xs: clamp(0.65625rem, 0.65rem + 0.03vw, 0.6875rem); /* 10.5 → 11 labels, buttons, nav */ --text-sm: clamp(0.75rem, 0.74rem + 0.05vw, 0.78125rem); /* 12 → 12.5 captions, small print */ --text-base: clamp(0.8125rem, 0.8rem + 0.06vw, 0.875rem); /* 13 → 14 body */ --text-lg: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem); /* 15 → 17 lead paragraphs */ --text-xl: clamp(1.5rem, 1.42rem + 0.37vw, 1.75rem); /* 24 → 28 card & sub headings */ --text-2xl: clamp(2rem, 1.71rem + 1.3vw, 2.875rem); /* 32 → 46 */ --text-3xl: clamp(2.5rem, 1.92rem + 2.59vw, 4.5rem); /* 40 → 72 section headings */ --text-4xl: clamp(3rem, 2.17rem + 3.7vw, 5.5rem); /* 48 → 88 hero */ --leading-tight: 1.05; --leading-snug: 1.3; --leading-body: 1.75; /* "leading-relaxed" in the draft; mono needs the air */ --leading-thai: 1.8; /* Thai script needs extra line height for tone marks */ --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-body: 0.02em; /* mono body text */ --tracking-wide: 0.16em; /* capitals labels, nav, buttons */ --tracking-logo: 0.18em; /* wordmark lockups */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ------------------------------------------------------------------------ 4. SPACING — 4px base, used for padding, gaps and section rhythm ------------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --section-padding: clamp(var(--space-8), 8vw, var(--space-10)); --gutter: clamp(var(--space-4), 4vw, var(--space-7)); --container-max: 1200px; --measure: 65ch; /* comfortable reading width */ /* ------------------------------------------------------------------------ 5. SHAPE ------------------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; --border-width: 1px; /* ------------------------------------------------------------------------ 6. DEPTH — layered shadows for the "3D-feeling" buttons and cards. Shadow colour is derived from the darkest palette slot so it stays in tune once the brand palette lands. ------------------------------------------------------------------------ */ --shadow-color: color-mix(in srgb, var(--palette-6) 18%, transparent); --shadow-1: 0 1px 2px var(--shadow-color); --shadow-2: 0 1px 2px var(--shadow-color), 0 4px 10px var(--shadow-color); --shadow-3: 0 2px 4px var(--shadow-color), 0 10px 24px var(--shadow-color); /* Button depth: top highlight + bottom edge + soft cast shadow */ --btn-highlight: inset 0 1px 0 color-mix(in srgb, white 35%, transparent); --btn-edge: inset 0 -2px 0 color-mix(in srgb, var(--palette-6) 22%, transparent); --btn-shadow-rest: var(--btn-highlight), var(--btn-edge), var(--shadow-2); --btn-shadow-hover: var(--btn-highlight), var(--btn-edge), var(--shadow-3); --btn-shadow-press: inset 0 2px 4px color-mix(in srgb, var(--palette-6) 25%, transparent); --btn-lift-hover: translateY(-2px); --btn-lift-press: translateY(1px); /* ------------------------------------------------------------------------ 7. MOTION — smooth and subtle. All durations collapse to 0 under prefers-reduced-motion (see bottom of file). ------------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; /* hover, press */ --duration-base: 300ms; /* UI transitions */ --duration-slow: 800ms; /* fade-ups, reveals */ --reveal-distance: 24px; /* fade-up travel */ --parallax-strength: 0.15;/* fraction of scroll applied to parallax layers */ /* ------------------------------------------------------------------------ 8. LAYERS ------------------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-header: 100; --z-overlay: 1000; /* Focus ring — visible on every interactive element (WCAG 2.4.7) */ --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus); } /* Thai language: switch font stack and loosen line height */ html[lang="th"] { --font-display: var(--font-thai); --font-body: var(--font-thai); --leading-body: var(--leading-thai); } /* Reduced motion: keep states, drop movement */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --reveal-distance: 0px; --parallax-strength: 0; --btn-lift-hover: none; --btn-lift-press: none; } }