/** * Ateca – Design Tokens (token.css) * ============================================================ * Single source of truth for all CSS custom properties. * * Structure: * 1. Primitive Units * 2. Primitive Colors * 3. Shadows & Blur * 4. Semantic Colors * 5. Semantic Spacing * 6. Semantic Border / Radius * 7. Breakpoints * 8. Semantic Typography * 9. Ateca Extensions * 10. Backward-Compatibility * 11. Component Aliases * * @package Ateca */ /* ============================================================ 1. PRIMITIVE UNITS ============================================================ */ :root { --unit-2: 0.125rem; --unit-4: 0.25rem; --unit-8: 0.5rem; --unit-10: 0.625rem; --unit-12: 0.75rem; --unit-14: 0.875rem; --unit-16: 1rem; --unit-18: 1.125rem; --unit-20: 1.25rem; --unit-24: 1.5rem; --unit-26: 1.625rem; --unit-28: 1.75rem; --unit-32: 2rem; --unit-36: 2.25rem; --unit-40: 2.5rem; --unit-48: 3rem; --unit-56: 3.5rem; --unit-64: 4rem; --unit-72: 4.5rem; --unit-80: 5rem; --unit-88: 5.5rem; --unit-96: 6rem; --unit-104: 6.5rem; --unit-112: 7rem; --unit-120: 7.5rem; } /* ============================================================ 2. PRIMITIVE COLORS ============================================================ */ :root { /* --- Blue scale --- */ --blue-100: #d0d8ff; --blue-200: #a9b7ff; --blue-300: #8196ff; --blue-400: #5a76ff; --blue-500: #3355ff; --blue-600: #2945ce; --blue-700: #1f349d; --blue-800: #16246c; --blue-900: #0c133b; /* --- Brand (Navy) scale --- */ --brand-100: #cccce6; --brand-200: #9999cc; --brand-300: #6666b3; --brand-400: #333399; --brand-500: #000080; --brand-600: #000066; --brand-700: #00004d; --brand-800: #000033; --brand-900: #00001a; /* --- Green scale --- */ --green-100: #c4e7d0; --green-200: #93d4a9; --green-300: #62c081; --green-400: #31ad5a; --green-500: #009933; --green-600: #007c29; --green-700: #005e1f; --green-800: #004116; --green-900: #00230c; /* --- Neutral scale (pure gray) --- */ --neutral-0: #ffffff; --neutral-0-@-0: #ffffff00; --neutral-0-@-1: #ffffff03; --neutral-0-@-5: #ffffff0d; --neutral-0-@-10: #ffffff1a; --neutral-0-@-30: #ffffff4d; --neutral-0-@-50: #ffffff80; --neutral-0-@-70: #ffffffb2; --neutral-50: #f2f2f2; --neutral-100: #e5e5e5; --neutral-150: #d9d9d9; --neutral-200: #cccccc; --neutral-250: #bfbfbf; --neutral-300: #b3b3b3; --neutral-350: #a6a6a6; --neutral-400: #999999; --neutral-450: #8c8c8c; --neutral-500: #808080; --neutral-550: #737373; --neutral-600: #666666; --neutral-650: #595959; --neutral-700: #4c4c4c; --neutral-750: #404040; --neutral-800: #333333; --neutral-850: #262626; --neutral-900: #1a1a1a; --neutral-950: #0d0d0d; --neutral-1000: #000000; --neutral-1000-@-0: #00000000; --neutral-1000-@-1: #00000003; --neutral-1000-@-5: #0000000d; --neutral-1000-@-10: #0000001a; --neutral-1000-@-30: #0000004d; --neutral-1000-@-50: #00000080; --neutral-1000-@-70: #000000b2; /* --- Orange scale --- */ --orange-100: #fce1c7; --orange-200: #f9c998; --orange-300: #f7b06a; --orange-400: #f4983b; --orange-500: #f27f0d; --orange-600: #c4670b; --orange-700: #954e08; --orange-800: #673606; --orange-900: #381d03; /* --- Purple scale --- */ --purple-100: #dcd0ff; --purple-200: #bea9ff; --purple-300: #a181ff; --purple-400: #835aff; --purple-500: #6633ff; --purple-600: #5229ce; --purple-700: #3f1f9d; --purple-800: #2b166c; --purple-900: #180c3b; /* --- Red scale --- */ --red-100: #f9caca; --red-200: #f49e9e; --red-300: #f07272; --red-400: #eb4646; --red-500: #e61a1a; --red-600: #ba1515; --red-700: #8e1010; --red-800: #620b0b; --red-900: #350606; /* --- Gold --- */ --gold-500: #ffd700; } /* ============================================================ 3. SHADOWS & BLUR ============================================================ */ :root { /* Canonical underscore names (original) */ --shadow_L1: 0px 2px 4px rgba(0,0,0,0.1), 0px 0px 2px rgba(0,0,0,0.08); --shadow_L2: 0px 4px 8px rgba(0,0,0,0.1), 0px 0px 4px rgba(0,0,0,0.08); --shadow_L3: 0px 8px 16px rgba(0,0,0,0.1), 0px 0px 6px rgba(0,0,0,0.08); --shadow_L4: 0px 10px 20px rgba(0,0,0,0.1), 0px 0px 8px rgba(0,0,0,0.08); --shadow_L5: 0px 12px 24px rgba(0,0,0,0.1), 0px 0px 10px rgba(0,0,0,0.08); --shadow_L6: 0px 16px 32px rgba(0,0,0,0.1), 0px 0px 12px rgba(0,0,0,0.08); --blur_L1: blur(4px); --blur_L2: blur(56px); /* Dash-case aliases (used in component CSS) */ --shadow-l1: var(--shadow_L1); --shadow-l2: var(--shadow_L2); --shadow-l3: var(--shadow_L3); --shadow-l4: var(--shadow_L4); --shadow-l5: var(--shadow_L5); --shadow-l6: var(--shadow_L6); } /* ============================================================ 4. SEMANTIC COLORS ============================================================ */ :root { /* Gold shorthand */ --gold: var(--gold-500); /* Background */ --background-brand: var(--brand-500); --background-brand-hover: var(--brand-600); --background-brand-pressed: var(--brand-700); --background-brand-subtle: var(--brand-100); --background-disabled: var(--neutral-100); --background-hover: var(--neutral-50); --background-info: var(--blue-500); --background-info-subtle: var(--blue-100); --background-inverse: var(--neutral-900); --background-inverse-static: var(--neutral-900); --background-mono: var(--neutral-900); --background-mono-hover: var(--neutral-800); --background-mono-pressed: var(--neutral-700); --background-negative: var(--red-500); --background-negative-hover: var(--red-600); --background-negative-pressed: var(--red-700); --background-negative-subtle: var(--red-100); --background-neutral: var(--neutral-100); --background-neutral-hover: var(--neutral-150); --background-neutral-pressed: var(--neutral-200); --background-positive: var(--green-500); --background-positive-subtle: var(--green-100); --background-pressed: var(--neutral-100); --background-primary: var(--neutral-0); --background-selected: var(--brand-100); --background-subtle: var(--neutral-50); --background-system-inverse-static: var(--neutral-0); --background-system-static: var(--neutral-1000); --background-warning: var(--orange-500); --background-warning-subtle: var(--orange-100); /* Border */ --border-brand: var(--brand-500); --border-disabled: var(--neutral-200); --border-focus: var(--blue-500); --border-info: var(--blue-500); --border-inverse: var(--neutral-50); --border-mono: var(--neutral-900); --border-negative: var(--red-500); --border-positive: var(--green-500); --border-primary: var(--neutral-300); --border-selected: var(--blue-500); --border-subtle: var(--neutral-100); --border-warning: var(--orange-500); /* Icon */ --icon-brand: var(--brand-500); --icon-disabled: var(--neutral-300); --icon-info: var(--blue-500); --icon-inverse: var(--neutral-50); --icon-inverse-static: var(--neutral-50); --icon-negative: var(--red-500); --icon-positive: var(--green-500); --icon-primary: var(--neutral-900); --icon-primary-static: var(--neutral-900); --icon-selected: var(--brand-500); --icon-subtle: var(--neutral-600); --icon-warning: var(--orange-500); /* Material fills */ --material-chrome-fill: #ffffffbf; --material-chrome-fill---fx: #ffffff00; --material-regular-fill: #ffffff99; --material-regular-fill---fx: #ffffff40; --material-thick-fill: #ffffffd6; --material-thick-fill---fx: #ffffff57; --material-thin-fill: #ffffff0d; --material-thin-fill---fx: #ffffff66; --material-ultathin-fill: #ffffff12; --material-ultathin-fill---fx: #ffffff08; /* Overlay */ --overlay-30: var(--neutral-0-@-30); --overlay-30-inverse: var(--neutral-1000-@-30); --overlay-30-inverse-static: var(--neutral-1000-@-30); --overlay-30-static: var(--neutral-0-@-30); --overlay-70: var(--neutral-0-@-70); --overlay-70-inverse: var(--neutral-1000-@-70); --overlay-70-inverse-static: var(--neutral-1000-@-70); --overlay-70-static: var(--neutral-0-@-70); /* Surface levels */ --surface-l0: var(--neutral-0); --surface-l1: var(--neutral-0); --surface-l2: var(--neutral-0); --surface-l3: var(--neutral-0); --surface-l4: var(--neutral-0); --surface-l5: var(--neutral-0); --surface-l6: var(--neutral-0); /* Text */ --text-brand: var(--brand-500); --text-disabled: var(--neutral-300); --text-link: var(--blue-500); --text-link-hover: var(--blue-600); --text-link-pressed: var(--blue-700); --text-negative: var(--red-600); --text-negative-hover: var(--red-700); --text-negative-pressed: var(--red-800); --text-positive: var(--green-600); --text-primary: var(--neutral-900); --text-primary-inverse: var(--neutral-50); --text-primary-inverse-static: var(--neutral-50); --text-primary-static: var(--neutral-900); --text-secondary: var(--neutral-800); --text-secondary-inverse: var(--neutral-100); --text-secondary-inverse-static:var(--neutral-100); --text-secondary-static: var(--neutral-800); --text-selected: var(--brand-500); --text-tertiary: var(--neutral-600); --text-tertiary-inverse: var(--neutral-200); --text-tertiary-inverse-static: var(--neutral-200); --text-tertiary-static: var(--neutral-600); --text-warning: var(--orange-700); } /* ============================================================ 5. SEMANTIC SPACING ============================================================ */ :root { --space-none: 0rem; --space-2xs: var(--unit-2); /* 0.125rem */ --space-xs: var(--unit-4); /* 0.25rem */ --space-s: var(--unit-8); /* 0.5rem */ --space-m: var(--unit-12); /* 0.75rem */ --space-l: var(--unit-16); /* 1rem */ --space-xl: var(--unit-24); /* 1.5rem */ --space-2xl: var(--unit-32); /* 2rem */ --space-3xl: var(--unit-40); /* 2.5rem */ --space-4xl: var(--unit-48); /* 3rem */ --space-5xl: var(--unit-56); /* 3.5rem */ --space-6xl: var(--unit-64); /* 4rem */ --space-7xl: var(--unit-72); /* 4.5rem */ --space-8xl: var(--unit-80); /* 5rem */ } /* ============================================================ 6. SEMANTIC BORDER / RADIUS ============================================================ */ :root { --border-radius-none: 0rem; --border-radius-xs: var(--unit-4); /* 0.25rem */ --border-radius-s: var(--unit-8); /* 0.5rem */ --border-radius-m: var(--unit-12); /* 0.75rem */ --border-radius-l: var(--unit-16); /* 1rem */ --border-radius-xl: var(--unit-24); /* 1.5rem */ --border-radius-2xl: var(--unit-32); /* 2rem */ --border-radius-3xl: var(--unit-40); /* 2.5rem */ --border-radius-4xl: var(--unit-48); /* 3rem */ --border-radius-5xl: var(--unit-56); /* 3.5rem */ --border-radius-6xl: var(--unit-64); /* 4rem */ --border-radius-pill: 62.4375rem; --border-width-none: 0rem; --border-width-xs: 0.0313rem; --border-width-s: 0.0625rem; --border-width-m: 0.0938rem; --border-width-l: var(--unit-2); /* 0.125rem */ --border-width-xl: var(--unit-4); /* 0.25rem */ --border-width-2xl: var(--unit-8); /* 0.5rem */ } /* ============================================================ 7. BREAKPOINTS ============================================================ */ :root { --mobile-393px: 25.125rem; --tablet-768px: 48rem; --tablet-1024px: 64rem; --desktop-1440px: 90rem; --desktop-1920px: 120rem; } /* ============================================================ 8. SEMANTIC TYPOGRAPHY ============================================================ */ :root { /* Letter-spacing */ --letter-spacing-xs: -0.0625rem; --letter-spacing-s: -0.0313rem; --letter-spacing-none: 0rem; /* Line-height (rem-based originals) */ --line-height-xs: var(--unit-14); --line-height-s: var(--unit-16); --line-height-m: var(--unit-20); --line-height-l: var(--unit-24); --line-height-xl: var(--unit-26); --line-height-2xl: var(--unit-28); --line-height-3xl: var(--unit-32); --line-height-4xl: var(--unit-36); --line-height-5xl: var(--unit-40); --line-height-6xl: var(--unit-48); --line-height-7xl: var(--unit-56); --line-height-8xl: var(--unit-64); --line-height-9xl: var(--unit-72); --line-height-10xl: var(--unit-80); /* Font size scale */ --size-xs: var(--unit-10); /* 0.625rem / 10px */ --size-s: var(--unit-12); /* 0.75rem / 12px */ --size-m: var(--unit-14); /* 0.875rem / 14px */ --size-l: var(--unit-16); /* 1rem / 16px */ --size-xl: var(--unit-18); /* 1.125rem / 18px */ --size-2xl: var(--unit-20); /* 1.25rem / 20px */ --size-3xl: var(--unit-24); /* 1.5rem / 24px */ --size-4xl: var(--unit-28); /* 1.75rem / 28px */ --size-5xl: var(--unit-32); /* 2rem / 32px */ --size-6xl: var(--unit-40); /* 2.5rem / 40px */ --size-7xl: var(--unit-48); /* 3rem / 48px */ --size-8xl: var(--unit-56); /* 3.5rem / 56px */ --size-9xl: var(--unit-64); /* 4rem / 64px */ --size-10xl: var(--unit-72); /* 4.5rem / 72px */ /* Font families */ --family-inter: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --family-roboto: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --family-sf-pro-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Font weights */ --weight-light: 300; --weight-regular: 400; --weight-semi-bold: 600; } /* ============================================================ 9. ATECA EXTENSIONS Motion, Z-index, Layout, Focus, Component tokens ============================================================ */ :root { /* --- Additional letter-spacing (not in original) --- */ --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-caps: 0.08em; /* --- Ratio-based line-heights (aliases for component CSS) --- */ --line-height-tight: 1.15; --line-height-snug: 1.375; --line-height-base: 1.6; --line-height-relaxed: 1.75; /* --- Motion --- */ --ateca-duration-instant: 50ms; --ateca-duration-fast: 150ms; --ateca-duration-normal: 250ms; --ateca-duration-slow: 350ms; --ateca-duration-slower: 500ms; --ateca-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ateca-ease-in: cubic-bezier(0.4, 0, 1, 1); --ateca-ease-out: cubic-bezier(0, 0, 0.2, 1); --ateca-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Z-index ladder --- */ --ateca-z-below: -1; --ateca-z-base: 0; --ateca-z-raised: 10; --ateca-z-overlay: 100; --ateca-z-modal: 200; --ateca-z-toast: 300; --ateca-z-tooltip: 400; /* --- Layout --- */ --ateca-content-width: 1080px; --ateca-wide-width: 1200px; --ateca-full-width: 100%; --ateca-header-height: 4rem; /* --- Focus ring --- */ --ateca-focus-ring: var(--brand-500); --ateca-focus-ring-width: 2px; --ateca-focus-ring-offset: 2px; /* --- Additional mono font --- */ --ateca-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace; /* --- Component: Card --- */ --ateca-card-bg: var(--background-primary); --ateca-card-border: var(--border-primary); --ateca-card-radius: var(--border-radius-xl); --ateca-card-shadow: var(--shadow_L1); --ateca-card-shadow-hover: var(--shadow_L3); --ateca-card-padding: var(--space-xl); /* --- Component: Button --- */ --ateca-btn-height-sm: 32px; --ateca-btn-height-md: 40px; --ateca-btn-height-lg: 52px; --ateca-btn-px-sm: 0.75rem; --ateca-btn-px-md: 1.25rem; --ateca-btn-px-lg: 1.75rem; --ateca-btn-radius: var(--border-radius-m); --ateca-btn-font-weight: var(--weight-semi-bold); /* --- Component: Form / Input --- */ --ateca-input-height: 44px; --ateca-input-bg: var(--background-primary); --ateca-input-border: var(--border-primary); --ateca-input-radius: var(--border-radius-m); --ateca-input-padding-x: var(--space-l); --ateca-input-focus-ring: var(--ateca-focus-ring); --ateca-input-placeholder: var(--text-tertiary); /* --- Component: Navigation --- */ --ateca-nav-height: var(--ateca-header-height); --ateca-nav-bg: var(--background-primary); --ateca-nav-border: var(--border-subtle); --ateca-nav-link-color: var(--text-secondary); --ateca-nav-link-hover: var(--text-primary); --ateca-nav-link-active: var(--brand-600); --ateca-nav-shadow: var(--shadow_L1); /* --- Component: Badge --- */ --ateca-badge-radius: var(--border-radius-pill); --ateca-badge-px: var(--space-s); --ateca-badge-py: var(--space-2xs); --ateca-badge-font-size: var(--size-xs); --ateca-badge-font-weight: var(--weight-semi-bold); } /* ============================================================ 10. BACKWARD-COMPATIBILITY — --ateca-* aliases These keep layout.css / global.css / editor.css working while pointing at the correct original values. ============================================================ */ :root { /* Semantic color aliases */ /* To be corrected - change values to match original variables */ --ateca-bg: var(--background-primary); --ateca-surface: var(--surface-l1); --ateca-surface-alt: var(--neutral-50); --ateca-text: var(--text-primary); --ateca-text-secondary: var(--text-secondary); --ateca-text-muted: var(--text-tertiary); --ateca-text-inverse: var(--text-primary-inverse); --ateca-border: var(--border-primary); --ateca-border-strong: var(--neutral-400); --ateca-brand: var(--brand-600); --ateca-brand-hover: var(--brand-700); --ateca-brand-subtle: var(--background-brand-subtle); --ateca-brand-text: var(--brand-700); /* Shadow aliases */ --ateca-shadow-xs: var(--shadow_L1); --ateca-shadow-s: var(--shadow_L1); --ateca-shadow-m: var(--shadow_L2); --ateca-shadow-l: var(--shadow_L3); --ateca-shadow-xl: var(--shadow_L4); --ateca-shadow-2xl: var(--shadow_L6); --ateca-shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.05); /* Typography aliases */ --ateca-font-sans: var(--family-inter); --ateca-font-size-xs: var(--size-s); /* 0.75rem */ --ateca-font-size-s: var(--size-m); /* 0.875rem */ --ateca-font-size-base: var(--size-l); /* 1rem */ --ateca-font-size-m: var(--size-xl); /* 1.125rem */ --ateca-font-size-l: var(--size-2xl); /* 1.25rem */ --ateca-font-size-xl: var(--size-3xl); /* 1.5rem */ --ateca-font-size-2xl: var(--size-5xl); /* 2rem */ --ateca-font-size-3xl: var(--size-6xl); /* 2.5rem */ --ateca-font-size-4xl: var(--size-7xl); /* 3rem */ --ateca-font-size-5xl: var(--size-9xl); /* 4rem */ --ateca-font-size-6xl: var(--size-10xl); /* 4.5rem */ --ateca-font-weight-light: var(--weight-light); --ateca-font-weight-normal: var(--weight-regular); --ateca-font-weight-medium: 500; /* not in original, kept as-is */ --ateca-font-weight-semibold:var(--weight-semi-bold); --ateca-font-weight-bold: 700; --ateca-font-weight-black: 900; --ateca-letter-spacing-tight: var(--letter-spacing-xs); --ateca-letter-spacing-snug: var(--letter-spacing-s); --ateca-letter-spacing-normal:var(--letter-spacing-none); --ateca-letter-spacing-wide: var(--letter-spacing-wide); --ateca-letter-spacing-wider: var(--letter-spacing-wider); --ateca-letter-spacing-caps: var(--letter-spacing-caps); /* Spacing aliases */ --ateca-space-2xs: var(--space-xs); /* 0.25rem */ --ateca-space-xs: var(--space-s); /* 0.5rem */ --ateca-space-s: var(--space-m); /* 0.75rem */ --ateca-space-m: var(--space-l); /* 1rem */ --ateca-space-l: var(--space-xl); /* 1.5rem */ --ateca-space-xl: var(--space-2xl); /* 2rem */ --ateca-space-2xl: var(--space-4xl); /* 3rem */ --ateca-space-3xl: var(--space-6xl); /* 4rem */ --ateca-space-4xl: var(--space-8xl); /* 5rem */ /* Radius aliases */ --ateca-radius-none: var(--border-radius-none); --ateca-radius-xs: var(--border-radius-xs); --ateca-radius-s: var(--border-radius-s); --ateca-radius-m: var(--border-radius-m); --ateca-radius-l: var(--border-radius-l); --ateca-radius-xl: var(--border-radius-xl); --ateca-radius-2xl: var(--border-radius-2xl); --ateca-radius-3xl: var(--border-radius-3xl); --ateca-radius-full: var(--border-radius-pill); /* Border-width alias */ --ateca-border-width-thin: var(--border-width-s); /* Primitive color aliases (for component CSS that uses --ateca-color-*) */ --ateca-color-brand-50: var(--brand-100); /* closest light tint */ --ateca-color-brand-100: var(--brand-100); --ateca-color-brand-200: var(--brand-200); --ateca-color-brand-300: var(--brand-300); --ateca-color-brand-400: var(--brand-400); --ateca-color-brand-500: var(--brand-500); --ateca-color-brand-600: var(--brand-600); --ateca-color-brand-700: var(--brand-700); --ateca-color-brand-800: var(--brand-800); --ateca-color-brand-900: var(--brand-900); --ateca-color-neutral-0: var(--neutral-0); --ateca-color-neutral-50: var(--neutral-50); --ateca-color-neutral-100: var(--neutral-100); --ateca-color-neutral-200: var(--neutral-200); --ateca-color-neutral-300: var(--neutral-300); --ateca-color-neutral-400: var(--neutral-400); --ateca-color-neutral-500: var(--neutral-500); --ateca-color-neutral-600: var(--neutral-600); --ateca-color-neutral-700: var(--neutral-700); --ateca-color-neutral-800: var(--neutral-800); --ateca-color-neutral-900: var(--neutral-900); /* Status color aliases → original color scales */ --ateca-color-success-50: var(--green-100); --ateca-color-success: var(--green-500); --ateca-color-success-700: var(--green-700); --ateca-color-warning-50: var(--orange-100); --ateca-color-warning: var(--orange-500); --ateca-color-warning-700: var(--orange-700); --ateca-color-error-50: var(--red-100); --ateca-color-error: var(--red-500); --ateca-color-error-700: var(--red-700); --ateca-color-info-50: var(--blue-100); --ateca-color-info: var(--blue-500); --ateca-color-info-700: var(--blue-700); } /* ============================================================ 11. COMPONENT ALIASES (unprefixed) — used in assets/css/components/*.css and assets/css/utilities/*.css ============================================================ */ :root { /* Typography — unprefixed */ --font-family-mono: var(--ateca-font-mono); --font-size-xs: var(--size-s); /* 0.75rem */ --font-size-s: var(--size-m); /* 0.875rem */ --font-size-m: var(--size-l); /* 1rem */ --font-size-l: var(--size-2xl); /* 1.25rem */ --font-size-xl: var(--size-3xl); /* 1.5rem */ --font-weight-normal: var(--weight-regular); --font-weight-medium: 500; --font-weight-semibold: var(--weight-semi-bold); --font-weight-bold: 700; --heading-size-xs: var(--size-l); /* 1rem */ --heading-size-s: var(--size-xl); /* 1.125rem */ --heading-size-xl: var(--size-5xl); /* 2rem */ --heading-size-2xl: var(--size-6xl); /* 2.5rem */ --letter-spacing-tight: var(--letter-spacing-xs); --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.08em; /* Radius — unprefixed */ --radius-s: var(--border-radius-s); --radius-m: var(--border-radius-m); /* Spacing — unprefixed (used in utilities.css) */ /* --space-* already defined in Section 5 */ /* Layout — unprefixed */ --content-max-width: var(--ateca-content-width); --wide-max-width: var(--ateca-wide-width); --section-padding-x: var(--space-xl); /* Focus — unprefixed */ --focus-ring: var(--ateca-focus-ring); --focus-ring-offset: var(--ateca-focus-ring-offset); /* Overlay — unprefixed */ --overlay-brand: var(--neutral-1000-@-30); --overlay-dark: var(--neutral-1000-@-70); /* Text — unprefixed (semantic; already in Sec 4, re-stated for clarity) */ --text-on-brand: var(--neutral-0); /* Border — unprefixed */ --border-default: var(--border-primary); --border-width-s: var(--border-width-s); --border-width-m: var(--border-width-m); --border-width-l: var(--border-width-l); /* Color — unprefixed */ --color-brand-subtle: var(--background-brand-subtle); /* Transition — unprefixed */ --transition-fast: var(--ateca-duration-fast) var(--ateca-ease-out); --transition-base: var(--ateca-duration-normal) var(--ateca-ease-default); /* Z-index — unprefixed */ --z-dropdown: var(--ateca-z-raised); --z-sticky: var(--ateca-z-overlay); --z-modal: var(--ateca-z-modal); /* Nav — unprefixed */ --nav-height: var(--ateca-header-height); --nav-bg: var(--background-primary); --nav-border: var(--border-subtle); --nav-item-color: var(--text-secondary); --nav-item-color-hover: var(--text-primary); --nav-item-padding-x: var(--space-m); --nav-item-padding-y: var(--space-s); --nav-item-radius: var(--border-radius-s); --nav-dropdown-bg: var(--background-primary); --nav-dropdown-radius: var(--border-radius-m); --nav-dropdown-shadow: var(--shadow_L3); --nav-mobile-bg: var(--background-primary); } /* ============================================================ SEMANTIC TYPOGRAPHY FOR DESKTOP (≥ 1440 px) ============================================================ */ @media only screen and (min-width: 1440px) { :root { --breakpoint-width: var(--desktop-1440px); --family-main: var(--family-inter); --heading-2xl-light-letter-spacing: var(--letter-spacing-xs); --heading-2xl-light-size: var(--unit-48); --heading-2xl-light-line-height: var(--unit-56); --heading-2xl-light-weight: var(--weight-light); --heading-2xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-2xl-regular-size: var(--unit-48); --heading-2xl-regular-line-height: var(--unit-56); --heading-2xl-regular-weight: var(--weight-regular); --heading-2xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-2xl-semi-bold-size: var(--unit-48); --heading-2xl-semi-bold-line-height: var(--unit-56); --heading-2xl-semi-bold-weight: var(--weight-semi-bold); --heading-3xl-light-letter-spacing: var(--letter-spacing-xs); --heading-3xl-light-size: var(--unit-56); --heading-3xl-light-line-height: var(--unit-64); --heading-3xl-light-weight: var(--weight-light); --heading-3xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-3xl-regular-size: var(--unit-56); --heading-3xl-regular-line-height: var(--unit-64); --heading-3xl-regular-weight: var(--weight-regular); --heading-3xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-3xl-semi-bold-size: var(--unit-56); --heading-3xl-semi-bold-line-height: var(--unit-64); --heading-3xl-semi-bold-weight: var(--weight-semi-bold); --heading-4xl-light-letter-spacing: var(--letter-spacing-xs); --heading-4xl-light-size: var(--unit-64); --heading-4xl-light-line-height: var(--unit-72); --heading-4xl-light-weight: var(--weight-light); --heading-4xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-4xl-regular-size: var(--unit-64); --heading-4xl-regular-line-height: var(--unit-72); --heading-4xl-regular-weight: var(--weight-regular); --heading-4xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-4xl-semi-bold-size: var(--unit-64); --heading-4xl-semi-bold-line-height: var(--unit-72); --heading-4xl-semi-bold-weight: var(--weight-semi-bold); --heading-5xl-light-letter-spacing: var(--letter-spacing-xs); --heading-5xl-light-size: var(--unit-72); --heading-5xl-light-line-height: var(--unit-80); --heading-5xl-light-weight: var(--weight-light); --heading-5xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-5xl-regular-size: var(--unit-72); --heading-5xl-regular-line-height: var(--unit-80); --heading-5xl-regular-weight: var(--weight-regular); --heading-5xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-5xl-semi-bold-size: var(--unit-72); --heading-5xl-semi-bold-line-height: var(--unit-80); --heading-5xl-semi-bold-weight: var(--weight-semi-bold); --heading-l-light-letter-spacing: var(--letter-spacing-xs); --heading-l-light-size: var(--unit-32); --heading-l-light-line-height: var(--unit-40); --heading-l-light-weight: var(--weight-light); --heading-l-regular-letter-spacing: var(--letter-spacing-xs); --heading-l-regular-size: var(--unit-32); --heading-l-regular-line-height: var(--unit-40); --heading-l-regular-weight: var(--weight-regular); --heading-l-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-l-semi-bold-size: var(--unit-32); --heading-l-semi-bold-line-height: var(--unit-40); --heading-l-semi-bold-weight: var(--weight-semi-bold); --heading-m-light-letter-spacing: var(--letter-spacing-s); --heading-m-light-size: var(--unit-24); --heading-m-light-line-height: var(--unit-32); --heading-m-light-weight: var(--weight-light); --heading-m-regular-letter-spacing: var(--letter-spacing-s); --heading-m-regular-size: var(--unit-24); --heading-m-regular-line-height: var(--unit-32); --heading-m-regular-weight: var(--weight-regular); --heading-m-semi-bold-letter-spacing:var(--letter-spacing-s); --heading-m-semi-bold-size: var(--unit-24); --heading-m-semi-bold-line-height: var(--unit-32); --heading-m-semi-bold-weight: var(--weight-semi-bold); --heading-s-light-letter-spacing: var(--letter-spacing-s); --heading-s-light-size: var(--unit-20); --heading-s-light-line-height: var(--unit-28); --heading-s-light-weight: var(--weight-light); --heading-s-regular-letter-spacing: var(--letter-spacing-s); --heading-s-regular-size: var(--unit-20); --heading-s-regular-line-height: var(--unit-28); --heading-s-regular-weight: var(--weight-regular); --heading-s-semi-bold-letter-spacing:var(--letter-spacing-s); --heading-s-semi-bold-size: var(--unit-20); --heading-s-semi-bold-line-height: var(--unit-28); --heading-s-semi-bold-weight: var(--weight-semi-bold); --heading-xl-light-letter-spacing: var(--letter-spacing-xs); --heading-xl-light-size: var(--unit-40); --heading-xl-light-line-height: var(--unit-48); --heading-xl-light-weight: var(--weight-light); --heading-xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-xl-regular-size: var(--unit-40); --heading-xl-regular-line-height: var(--unit-48); --heading-xl-regular-weight: var(--weight-regular); --heading-xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-xl-semi-bold-size: var(--unit-40); --heading-xl-semi-bold-line-height: var(--unit-48); --heading-xl-semi-bold-weight: var(--weight-semi-bold); --heading-xs-light-letter-spacing: var(--letter-spacing-s); --heading-xs-light-size: var(--unit-16); --heading-xs-light-line-height: var(--unit-24); --heading-xs-light-weight: var(--weight-light); --heading-xs-regular-letter-spacing: var(--letter-spacing-s); --heading-xs-regular-size: var(--unit-16); --heading-xs-regular-line-height: var(--unit-24); --heading-xs-regular-weight: var(--weight-regular); --heading-xs-semi-bold-letter-spacing:var(--letter-spacing-s); --heading-xs-semi-bold-size: var(--unit-16); --heading-xs-semi-bold-line-height: var(--unit-24); --heading-xs-semi-bold-weight: var(--weight-semi-bold); --text-2xl-regular-letter-spacing: var(--letter-spacing-none); --text-2xl-regular-size: var(--unit-24); --text-2xl-regular-line-height: var(--unit-32); --text-2xl-regular-weight: var(--weight-regular); --text-2xl-semi-bold-letter-spacing: var(--letter-spacing-none); --text-2xl-semi-bold-size: var(--unit-24); --text-2xl-semi-bold-line-height: var(--unit-32); --text-2xl-semi-bold-weight: var(--weight-semi-bold); --text-l-regular-letter-spacing: var(--letter-spacing-none); --text-l-regular-size: var(--unit-16); --text-l-regular-line-height: var(--unit-24); --text-l-regular-weight: var(--weight-regular); --text-l-semi-bold-letter-spacing: var(--letter-spacing-none); --text-l-semi-bold-size: var(--unit-16); --text-l-semi-bold-line-height: var(--unit-24); --text-l-semi-bold-weight: var(--weight-semi-bold); --text-m-regular-letter-spacing: var(--letter-spacing-none); --text-m-regular-size: var(--unit-14); --text-m-regular-line-height: var(--unit-20); --text-m-regular-weight: var(--weight-regular); --text-m-semi-bold-letter-spacing: var(--letter-spacing-none); --text-m-semi-bold-size: var(--unit-14); --text-m-semi-bold-line-height: var(--unit-20); --text-m-semi-bold-weight: var(--weight-semi-bold); --text-s-regular-letter-spacing: var(--letter-spacing-none); --text-s-regular-size: var(--unit-12); --text-s-regular-line-height: var(--unit-16); --text-s-regular-weight: var(--weight-regular); --text-s-semi-bold-letter-spacing: var(--letter-spacing-none); --text-s-semi-bold-size: var(--unit-12); --text-s-semi-bold-line-height: var(--unit-16); --text-s-semi-bold-weight: var(--weight-semi-bold); --text-xl-regular-letter-spacing: var(--letter-spacing-none); --text-xl-regular-size: var(--unit-20); --text-xl-regular-line-height: var(--unit-28); --text-xl-regular-weight: var(--weight-regular); --text-xl-semi-bold-letter-spacing: var(--letter-spacing-none); --text-xl-semi-bold-size: var(--unit-20); --text-xl-semi-bold-line-height: var(--unit-28); --text-xl-semi-bold-weight: var(--weight-semi-bold); --text-xs-regular-letter-spacing: var(--letter-spacing-none); --text-xs-regular-size: var(--unit-10); --text-xs-regular-line-height: var(--unit-14); --text-xs-regular-weight: var(--weight-regular); --text-xs-semi-bold-letter-spacing: var(--letter-spacing-none); --text-xs-semi-bold-size: var(--unit-10); --text-xs-semi-bold-line-height: var(--unit-14); --text-xs-semi-bold-weight: var(--weight-semi-bold); --label-l-semi-bold-letter-spacing: var(--letter-spacing-none); --label-l-semi-bold-size: var(--unit-16); --label-l-semi-bold-line-height: var(--unit-24); --label-m-semi-bold-letter-spacing: var(--letter-spacing-none); --label-m-semi-bold-size: var(--unit-14); --label-m-semi-bold-line-height: var(--unit-20); --label-s-semi-bold-letter-spacing: var(--letter-spacing-none); --label-s-semi-bold-size: var(--unit-12); --label-s-semi-bold-line-height: var(--unit-16); } } /* ============================================================ SEMANTIC TYPOGRAPHY FOR MOBILE (≤ 767 px) ============================================================ */ @media only screen and (max-width: 767px) { :root { --breakpoint-width: var(--mobile-393px); --family-main: var(--family-inter); --heading-2xl-light-letter-spacing: var(--letter-spacing-xs); --heading-2xl-light-size: var(--unit-32); --heading-2xl-light-line-height: var(--unit-40); --heading-2xl-light-weight: var(--weight-light); --heading-2xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-2xl-regular-size: var(--unit-32); --heading-2xl-regular-line-height: var(--unit-40); --heading-2xl-regular-weight: var(--weight-regular); --heading-2xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-2xl-semi-bold-size: var(--unit-32); --heading-2xl-semi-bold-line-height: var(--unit-40); --heading-2xl-semi-bold-weight: var(--weight-semi-bold); --heading-3xl-light-letter-spacing: var(--letter-spacing-xs); --heading-3xl-light-size: var(--unit-40); --heading-3xl-light-line-height: var(--unit-48); --heading-3xl-light-weight: var(--weight-light); --heading-3xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-3xl-regular-size: var(--unit-40); --heading-3xl-regular-line-height: var(--unit-48); --heading-3xl-regular-weight: var(--weight-regular); --heading-3xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-3xl-semi-bold-size: var(--unit-40); --heading-3xl-semi-bold-line-height: var(--unit-48); --heading-3xl-semi-bold-weight: var(--weight-semi-bold); --heading-4xl-light-letter-spacing: var(--letter-spacing-xs); --heading-4xl-light-size: var(--unit-48); --heading-4xl-light-line-height: var(--unit-56); --heading-4xl-light-weight: var(--weight-light); --heading-4xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-4xl-regular-size: var(--unit-48); --heading-4xl-regular-line-height: var(--unit-56); --heading-4xl-regular-weight: var(--weight-regular); --heading-4xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-4xl-semi-bold-size: var(--unit-48); --heading-4xl-semi-bold-line-height: var(--unit-56); --heading-4xl-semi-bold-weight: var(--weight-semi-bold); --heading-5xl-light-letter-spacing: var(--letter-spacing-xs); --heading-5xl-light-size: var(--unit-56); --heading-5xl-light-line-height: var(--unit-64); --heading-5xl-light-weight: var(--weight-light); --heading-5xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-5xl-regular-size: var(--unit-56); --heading-5xl-regular-line-height: var(--unit-64); --heading-5xl-regular-weight: var(--weight-regular); --heading-5xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-5xl-semi-bold-size: var(--unit-56); --heading-5xl-semi-bold-line-height: var(--unit-64); --heading-5xl-semi-bold-weight: var(--weight-semi-bold); --heading-l-light-letter-spacing: var(--letter-spacing-xs); --heading-l-light-size: var(--unit-24); --heading-l-light-line-height: var(--unit-32); --heading-l-light-weight: var(--weight-light); --heading-l-regular-letter-spacing: var(--letter-spacing-xs); --heading-l-regular-size: var(--unit-24); --heading-l-regular-line-height: var(--unit-32); --heading-l-regular-weight: var(--weight-regular); --heading-l-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-l-semi-bold-size: var(--unit-24); --heading-l-semi-bold-line-height: var(--unit-32); --heading-l-semi-bold-weight: var(--weight-semi-bold); --heading-m-light-letter-spacing: var(--letter-spacing-s); --heading-m-light-size: var(--unit-20); --heading-m-light-line-height: var(--unit-28); --heading-m-light-weight: var(--weight-light); --heading-m-regular-letter-spacing: var(--letter-spacing-s); --heading-m-regular-size: var(--unit-20); --heading-m-regular-line-height: var(--unit-28); --heading-m-regular-weight: var(--weight-regular); --heading-m-semi-bold-letter-spacing:var(--letter-spacing-s); --heading-m-semi-bold-size: var(--unit-20); --heading-m-semi-bold-line-height: var(--unit-28); --heading-m-semi-bold-weight: var(--weight-semi-bold); --heading-s-light-letter-spacing: var(--letter-spacing-s); --heading-s-light-size: var(--unit-18); --heading-s-light-line-height: var(--unit-26); --heading-s-light-weight: var(--weight-light); --heading-s-regular-letter-spacing: var(--letter-spacing-s); --heading-s-regular-size: var(--unit-18); --heading-s-regular-line-height: var(--unit-26); --heading-s-regular-weight: var(--weight-regular); --heading-s-semi-bold-letter-spacing:var(--letter-spacing-s); --heading-s-semi-bold-size: var(--unit-18); --heading-s-semi-bold-line-height: var(--unit-26); --heading-s-semi-bold-weight: var(--weight-semi-bold); --heading-xl-light-letter-spacing: var(--letter-spacing-xs); --heading-xl-light-size: var(--unit-28); --heading-xl-light-line-height: var(--unit-36); --heading-xl-light-weight: var(--weight-light); --heading-xl-regular-letter-spacing: var(--letter-spacing-xs); --heading-xl-regular-size: var(--unit-28); --heading-xl-regular-line-height: var(--unit-36); --heading-xl-regular-weight: var(--weight-regular); --heading-xl-semi-bold-letter-spacing:var(--letter-spacing-xs); --heading-xl-semi-bold-size: var(--unit-28); --heading-xl-semi-bold-line-height: var(--unit-36); --heading-xl-semi-bold-weight: var(--weight-semi-bold); --heading-xs-light-letter-spacing: var(--letter-spacing-s); --heading-xs-light-size: var(--unit-16); --heading-xs-light-line-height: var(--unit-24); --heading-xs-light-weight: var(--weight-light); --heading-xs-regular-letter-spacing: var(--letter-spacing-s); --heading-xs-regular-size: var(--unit-16); --heading-xs-regular-line-height: var(--unit-24); --heading-xs-regular-weight: var(--weight-regular); --heading-xs-semi-bold-letter-spacing:var(--letter-spacing-s); --heading-xs-semi-bold-size: var(--unit-16); --heading-xs-semi-bold-line-height: var(--unit-24); --heading-xs-semi-bold-weight: var(--weight-semi-bold); --text-2xl-regular-letter-spacing: var(--letter-spacing-none); --text-2xl-regular-size: var(--unit-20); --text-2xl-regular-line-height: var(--unit-28); --text-2xl-regular-weight: var(--weight-regular); --text-2xl-semi-bold-letter-spacing: var(--letter-spacing-none); --text-2xl-semi-bold-size: var(--unit-20); --text-2xl-semi-bold-line-height: var(--unit-28); --text-2xl-semi-bold-weight: var(--weight-semi-bold); --text-xl-regular-letter-spacing: var(--letter-spacing-none); --text-xl-regular-size: var(--unit-18); --text-xl-regular-line-height: var(--unit-26); --text-xl-regular-weight: var(--weight-regular); --text-xl-semi-bold-letter-spacing: var(--letter-spacing-none); --text-xl-semi-bold-size: var(--unit-18); --text-xl-semi-bold-line-height: var(--unit-26); --text-xl-semi-bold-weight: var(--weight-semi-bold); } }