/* ============================================================================ HyKr Build Challenge 2026 - design tokens Single source of truth for color and type across index.html, mvp-submission.html and confidentiality-policy.html. FIGMA DESIGN THEME. Light, two-column, transparent ground so the host page shows through. Values sampled from ss/ex-1.png. Three tiers, and it matters which one you edit: 1. PALETTE raw colors. Editing one moves every component still pointing at it. 2. DERIVED gradients, translucency and shadows, mixed from the palette with color-mix() so they follow it. 3. COMPONENTS one token per component role and state. Every rule in the three pages reads from this tier and never from the two above. Repoint one to recolor exactly one component; give it a literal to detach it entirely. Recolor the whole site from tier 1. Recolor one thing from tier 3. ========================================================================= */ :root { /* ========================================================== 1. PALETTE ========================================================== */ /* ---- Brand ---- */ --deep-purple: #02225b; /* focus borders, checked states, links */ --brand-gradient-top: #025899; /* opening stop of the brand gradient */ --brand-blue: #2b39ff; /* applications-closed button and link */ --brand-blue-dark: #1f2bd6; /* closed-button hover */ --brand-blue-pale: #ece9fd; /* closed-card ground */ --orange-primary: #ff6423; /* primary action */ --orange-light: #ff8450; /* primary button hover, link hover */ --focus-tint: #230759; /* focus ring and checked-option wash */ --yellow: #fce348; /* part of the brand set; currently unreferenced */ /* ---- Semantic ---- */ --green: #10b981; /* completed step, success */ --red: #ef4444; /* required, invalid, over limit */ /* ---- Neutrals (warm ramp) ---- */ --white: #ffffff; --off-white: #faf9f7; --gray-50: #f8f7f6; --gray-100: #f0eeec; --gray-200: #e4e1dd; --gray-300: #d1ccc5; --gray-400: #a8a29e; --gray-500: #78716c; --gray-600: #57534e; --gray-700: #44403c; --gray-800: #292524; --gray-900: #1c1917; --shadow: #000000; /* base for cast shadows only */ /* ---- Amber (policy notice) ---- */ --amber-50: #fff7ed; --amber-200: #fed7aa; --amber-800: #9a3412; /* ========================================================== 2. DERIVED - mixed from the palette above ========================================================== */ /* ---- Gradients ---- */ --gradient-brand: linear-gradient( 180deg, var(--brand-gradient-top) 0%, var(--deep-purple) 100% ); /* ---- Translucency over the brand gradient ---- */ --on-dark-05: color-mix(in srgb, var(--white) 5%, transparent); --on-dark-10: color-mix(in srgb, var(--white) 10%, transparent); --on-dark-20: color-mix(in srgb, var(--white) 20%, transparent); --on-dark-30: color-mix(in srgb, var(--white) 30%, transparent); --on-dark-40: color-mix(in srgb, var(--white) 40%, transparent); --on-dark-50: color-mix(in srgb, var(--white) 50%, transparent); --on-dark-70: color-mix(in srgb, var(--white) 70%, transparent); --on-dark-80: color-mix(in srgb, var(--white) 80%, transparent); /* ---- Washes and shadows ---- */ --focus-ring: color-mix(in srgb, var(--focus-tint) 10%, transparent); --option-checked: color-mix(in srgb, var(--focus-tint) 5%, transparent); --red-wash: color-mix(in srgb, var(--red) 10%, transparent); --scrim: color-mix(in srgb, var(--gray-900) 85%, transparent); --glow-action: color-mix(in srgb, var(--orange-primary) 30%, transparent); --glow-action-strong: color-mix(in srgb, var(--orange-primary) 40%, transparent); --shadow-brand: color-mix(in srgb, var(--brand-blue) 8%, transparent); --shadow-card: color-mix(in srgb, var(--shadow) 4%, transparent); --shadow-overlay: color-mix(in srgb, var(--shadow) 25%, transparent); /* ========================================================== 3. COMPONENTS - what the pages actually reference ========================================================== */ /* ---- Shell - Page ground and default text ---- */ --app-bg: transparent; --app-text: #3c3c3c; --content-bg: transparent; --doc-bg: var(--gray-50); /* ---- Brand panel - Sidebar on the form pages, header on the policy page ---- */ --sidebar-bg: var(--white); --sidebar-title: #000000; --sidebar-subtitle: #3c3c3c; --header-body: var(--on-dark-80); --sidebar-rule: var(--on-dark-10); --sidebar-stat-bg: var(--on-dark-05); --sidebar-stat-value: var(--orange-primary); --sidebar-stat-label: var(--on-dark-50); --sidebar-footer-text: var(--on-dark-70); --sidebar-footer-link: var(--orange-primary); --sidebar-footer-link-hover: var(--orange-light); /* ---- Progress rail - Step markers and their three states ---- The registration form now carries this tracker horizontally above the fields, on --content-bg, so these default to values that read on a light ground. mvp-submission.html still shows its rail on the dark sidebar and scopes the on-dark values back over these. */ --step-connector: var(--gray-200); --step-connector-done: var(--green); --step-bg: var(--white); --step-border: var(--gray-300); --step-number: var(--gray-500); --step-bg-active: var(--orange-primary); --step-border-active: var(--orange-primary); --step-number-active: var(--white); --step-bg-done: var(--green); --step-border-done: var(--green); --step-number-done: var(--white); --step-label: var(--gray-500); --step-label-current: var(--gray-900); --step-desc: var(--gray-400); /* ---- Form header - Step title and lede ---- */ --form-heading: var(--gray-900); --form-lede: var(--gray-600); /* ---- Shell v2 - the two-column Figma layout ---- */ --panel-bg: #fef7f3; --step-numeral: #ffb591; --step-title: #3c3c3c; --step-sub: #5d5c5b; --progress-fill: var(--orange-primary); --progress-track: var(--white); /* ---- Page ground, every form, framed or not. hykr.studio's own dark background, oklch(16% .012 250) -- black to the eye, and the exact value the site paints, so an embed sits flush on the site's default theme. The two panels stay light on top of it, which is how the Figma exports show them: cards floating on a dark canvas. Note the site also ships a light theme; these forms deliberately do not follow it, so a light-mode visitor sees black here either way. ---- */ --page-bg: #090e12; --page-foot: #8b9096; --page-foot-link: #d8d5d0; --page-logo: #ffffff; /* ---- Card - The white panel every section sits on ---- */ --card-bg: var(--white); --card-border: transparent; --card-shadow: var(--shadow-card); --card-title: var(--orange-primary); /* ---- Brief - Long explanatory copy inside a card (the EIR video brief) ---- */ --brief-body: var(--gray-600); --brief-lead: var(--gray-800); --brief-rule: var(--gray-200); /* ---- Fields - Inputs, selects and textareas in every state ---- */ --field-label: #616161; --field-required: var(--orange-primary); --field-text: var(--gray-800); --field-bg: var(--white); --field-border: #ececec; --field-bg-focus: var(--white); --field-border-focus: var(--orange-primary); --field-ring-focus: var(--focus-ring); --field-border-error: var(--red); --field-error-text: var(--red); --field-hint: var(--gray-500); --count-text: var(--gray-400); --count-warning: var(--orange-primary); --count-error: var(--red); /* ---- Options - Theme, role and radio choices ---- */ --option-bg: var(--white); --option-border: #ececec; --option-border-hover: var(--gray-300); --option-bg-checked: var(--option-checked); --option-border-checked: var(--orange-primary); --option-name: var(--gray-800); --option-category: var(--gray-500); --radio-border: var(--gray-300); --radio-border-checked: var(--orange-primary); --radio-dot: var(--orange-primary); /* ---- Consent - Checkboxes and terms copy ---- */ --checkbox-accent: var(--orange-primary); --terms-text: var(--gray-700); --terms-link: var(--orange-primary); /* ---- Buttons - Form navigation and its two button styles ---- */ --nav-rule: transparent; --btn-primary-bg: var(--white); --btn-primary-bg-hover: var(--orange-primary); --btn-primary-border: var(--orange-primary); --btn-primary-text: var(--orange-primary); --btn-primary-text-hover: var(--white); --btn-primary-glow: var(--glow-action); --btn-primary-glow-hover: var(--glow-action-strong); --btn-secondary-bg: var(--white); --btn-secondary-text: #616161; --btn-secondary-border: #ececec; --btn-secondary-border-hover: var(--gray-400); /* ---- Success - Submission confirmation and next steps ---- */ --success-icon-bg: var(--green); --success-icon-mark: var(--white); --success-heading: var(--gray-900); --success-body: var(--gray-600); --nextsteps-bg: var(--white); --nextsteps-title: var(--gray-800); --nextstep-chip-bg: var(--gray-100); --nextstep-chip-text: var(--gray-600); --nextstep-title: var(--gray-800); --nextstep-body: var(--gray-500); /* ---- Review list - The read-back summary on the MVP form ---- */ --review-label: var(--gray-700); --review-value: var(--gray-800); /* ---- Access overlay - The gate on the MVP submission page ---- */ --overlay-scrim: var(--scrim); --overlay-card-bg: var(--white); --overlay-card-shadow: var(--shadow-overlay); --overlay-icon-bg: var(--red-wash); --overlay-icon-mark: var(--red); --overlay-heading: var(--gray-900); --overlay-body: var(--gray-600); /* ---- Applications closed - The closed-round screen on the registration form ---- */ --closed-bg: var(--off-white); --closed-text: var(--gray-900); --closed-heading: var(--deep-purple); --closed-card-bg: var(--brand-blue-pale); --closed-card-shadow: var(--shadow-brand); --closed-card-icon: var(--deep-purple); --closed-card-title: var(--gray-900); --closed-card-body: var(--gray-800); --closed-btn-bg: var(--brand-blue); --closed-btn-text: var(--white); --closed-btn-bg-hover: var(--brand-blue-dark); --closed-link: var(--brand-blue); /* ---- Policy document - Confidentiality page body copy and notice ---- */ --doc-link: var(--deep-purple); --doc-link-hover: var(--orange-primary); --doc-back: var(--gray-600); --doc-back-hover: var(--deep-purple); --doc-h2: var(--gray-900); --doc-h3: var(--gray-800); --doc-body: var(--gray-700); --doc-strong: var(--gray-900); --doc-meta: var(--gray-500); --doc-meta-rule: var(--gray-200); --notice-bg: var(--amber-50); --notice-border: var(--amber-200); --notice-text: var(--amber-800); /* ========================================================== Type ========================================================== */ --font-display: Stacksansheadline, Georgia, sans-serif; --font-body: Stacksanstext, Georgia, sans-serif; }