/* ========================================================================== DIGIHELIX DESIGN SYSTEM — LAYER 1: TOKENS Derived from digihelix_brandbook.pdf (§2.0 colour, §3.0 typography). Nothing in this file is site-specific. Reuse it for any DigiHelix product. ========================================================================== */ /* -------------------------------------------------------------------------- 1.0 TYPEFACES Brandbook §3.0: Open Sauce Sans (EN) + Pridi (TH). Pridi is loaded only when Thai content is added — see DESIGN-SYSTEM.md. -------------------------------------------------------------------------- */ @font-face { font-family: "Open Sauce Sans"; src: url("../fonts/open-sauce-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sauce Sans"; src: url("../fonts/open-sauce-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sauce Sans"; src: url("../fonts/open-sauce-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --dh-font-sans: "Open Sauce Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --dh-font-thai: "Pridi", "Open Sauce Sans", serif; /* ------------------------------------------------------------------------ 2.0 PRIMITIVE COLOUR — brandbook tint ramps (10–100) Tint N = brand colour mixed with N% opacity against pure white, matching the swatch strips on brandbook pp.16–17. ---------------------------------------------------------------------- */ /* 2.1 Blue — key colour #0063A6 (C100 M62 Y7 K0 / R0 G99 B166) */ --dh-blue-10: #e6eff6; --dh-blue-20: #cce0ed; --dh-blue-30: #b3d0e4; --dh-blue-40: #99c1db; --dh-blue-50: #80b1d3; --dh-blue-60: #66a1ca; --dh-blue-70: #4d92c1; --dh-blue-80: #3382b8; --dh-blue-90: #1a73af; --dh-blue-100: #0063a6; /* Darker step for hover/pressed states — not in the book, derived. */ --dh-blue-120: #004f85; /* 2.2 Blacky — key colour #231F20 (K100 / R35 G31 B32) */ --dh-black-10: #e9e9e9; --dh-black-20: #d3d2d2; --dh-black-30: #bdbcbc; --dh-black-40: #a7a6a6; --dh-black-50: #918f90; --dh-black-60: #7b7979; --dh-black-70: #656263; --dh-black-80: #4f4c4d; --dh-black-90: #393536; --dh-black-100: #231f20; /* 2.3 Pure white — key colour */ --dh-white: #ffffff; /* 2.4 Secondary — grey #939598, yellow #E1B93C (brandbook §2.1) */ --dh-grey-100: #939598; --dh-grey-40: #d4d5d6; --dh-yellow-100: #e1b93c; --dh-yellow-40: #f3e3b1; /* ------------------------------------------------------------------------ 3.0 SEMANTIC COLOUR Always use these in components — never a primitive directly. ---------------------------------------------------------------------- */ --dh-bg: var(--dh-white); --dh-bg-subtle: #f5f5f4; /* page-tint used across the brandbook */ --dh-bg-inverse: var(--dh-black-100); --dh-bg-accent: var(--dh-blue-100); --dh-ink: var(--dh-black-100); --dh-ink-muted: var(--dh-black-70); /* 5.7:1 on white */ --dh-ink-faint: var(--dh-black-50); /* decorative / large text only */ --dh-ink-inverse: var(--dh-white); --dh-ink-inverse-muted: var(--dh-black-30); --dh-accent: var(--dh-blue-100); /* 6.2:1 on white */ --dh-accent-hover: var(--dh-blue-120); --dh-accent-on-dark: var(--dh-blue-60); /* 5.9:1 on blacky — never use blue-100 on dark */ --dh-highlight: var(--dh-yellow-100); /* accents only, never body text */ --dh-rule: var(--dh-black-20); /* the thin brandbook divider */ --dh-rule-strong: var(--dh-black-100); --dh-rule-inverse: rgba(255, 255, 255, 0.18); --dh-scrim: rgba(35, 31, 32, 0.28); --dh-focus: var(--dh-blue-100); --dh-focus-inverse: var(--dh-blue-40); /* ------------------------------------------------------------------------ 4.0 TYPE SCALE Brandbook §3.1: titles = Bold, letterspace +25 (0.025em). Body sits at 0.01em — the full +25 hurts long-form reading. ---------------------------------------------------------------------- */ --dh-text-display: clamp(2rem, 5.5vw, 4.5rem); --dh-text-h1: clamp(2.125rem, 4.5vw, 3.25rem); --dh-text-h2: clamp(1.625rem, 3vw, 2.25rem); --dh-text-h3: clamp(1.1875rem, 1.6vw, 1.375rem); --dh-text-lead: clamp(1.0625rem, 1.4vw, 1.25rem); --dh-text-body: 1.0625rem; --dh-text-small: 0.9375rem; --dh-text-label: 0.75rem; --dh-leading-tight: 0.98; --dh-leading-snug: 1.2; --dh-leading-body: 1.65; --dh-track-display: 0.02em; --dh-track-title: 0.025em; /* brandbook +25 */ --dh-track-body: 0.01em; --dh-track-label: 0.14em; /* small caps eyebrows */ --dh-weight-regular: 400; --dh-weight-semi: 600; --dh-weight-bold: 700; /* ------------------------------------------------------------------------ 5.0 SPACE — 4px base, used for every margin, padding and gap ---------------------------------------------------------------------- */ --dh-space-1: 0.25rem; /* 4 */ --dh-space-2: 0.5rem; /* 8 */ --dh-space-3: 0.75rem; /* 12 */ --dh-space-4: 1rem; /* 16 */ --dh-space-5: 1.5rem; /* 24 */ --dh-space-6: 2rem; /* 32 */ --dh-space-7: 3rem; /* 48 */ --dh-space-8: 4rem; /* 64 */ --dh-space-9: 6rem; /* 96 */ --dh-space-10: 8rem; /* 128 */ /* ------------------------------------------------------------------------ 6.0 LAYOUT Brandbook logo grid is 5.8 : 3 — the same ratio drives the label column (~1fr) against the content column (~2fr) on wide screens. ---------------------------------------------------------------------- */ --dh-container: 74rem; /* 1184px */ --dh-container-narrow: 46rem; /* long-form reading measure */ --dh-gutter: var(--dh-space-5); --dh-header-height: 4.5rem; --dh-section-y: clamp(4rem, 9vw, 8rem); /* ------------------------------------------------------------------------ 7.0 SHAPE, ELEVATION, MOTION The brand is square. Radius is reserved for pills and nothing else. ---------------------------------------------------------------------- */ --dh-radius-0: 0; --dh-radius-pill: 999px; --dh-shadow-1: 0 1px 2px rgba(35, 31, 32, 0.06), 0 8px 24px rgba(35, 31, 32, 0.06); --dh-shadow-2: 0 2px 4px rgba(35, 31, 32, 0.08), 0 16px 40px rgba(35, 31, 32, 0.10); --dh-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dh-duration: 180ms; /* 8.0 Logo — minimum digital size, brandbook §1.4 */ --dh-logo-min-width: 85px; } @media (prefers-reduced-motion: reduce) { :root { --dh-duration: 1ms; } }