/* ===================================================== BRIBLOCK FRAMEWORK — Design Token System Version: 1.0.0 Built: 2026-04-23 01:49:19 UTC Prefix: --ob- Source: tokens/ (6 files) Do not edit this file directly. Edit source files in tokens/ and run: npm run build ===================================================== */ /* ============================================================= BRIBLOCK FRAMEWORK — COLOR TOKENS File: tokens/colors.css Prefix: --ob- Format: HSL → hsl(H S% L%) HOW TO EDIT: - Each palette has its own block. - Change only the H (hue), S (saturation), or L (lightness). - The transparent series reference the 500 stop — update the hsl() values there too if you change the base hue. - Run `npm run build` after any change to regenerate dist/. ============================================================= */ :root { /* ----------------------------------------------------------- PRIMARY Role: Main brand color. CTAs, highlights, key accents. Base hue: 345 (rose-red) | Base stop: 500 ----------------------------------------------------------- */ --ob-primary-50: hsl(206.7 24.7% 92%); --ob-primary-100: hsl(206.7 24.7% 84%); --ob-primary-200: hsl(206.7 24.7% 67.9%); --ob-primary-300: hsl(206.7 24.7% 51.9%); --ob-primary-400: hsl(206.7 44.2% 35.8%); --ob-primary-500: hsl(206.7 100% 19.8%); /* ← Base */ --ob-primary-600: hsl(206.7 100% 15.8%); --ob-primary-700: hsl(206.7 100% 11.9%); --ob-primary-800: hsl(206.7 100% 7.9%); --ob-primary-900: hsl(206.7 100% 4%); --ob-primary-950: hsl(206.7 100% 2%); --ob-primary-trans-90: hsl(206.7 100% 19.8% / 0.9); --ob-primary-trans-80: hsl(206.7 100% 19.8% / 0.8); --ob-primary-trans-70: hsl(206.7 100% 19.8% / 0.7); --ob-primary-trans-60: hsl(206.7 100% 19.8% / 0.6); --ob-primary-trans-50: hsl(206.7 100% 19.8% / 0.5); --ob-primary-trans-40: hsl(206.7 100% 19.8% / 0.4); --ob-primary-trans-20: hsl(206.7 100% 19.8% / 0.2); --ob-primary-trans-10: hsl(206.7 100% 19.8% / 0.1); --ob-primary-trans-5: hsl(206.7 100% 19.8% / 0.05); --ob-primary-trans-1: hsl(206.7 100% 19.8% / 0.01); /* ----------------------------------------------------------- SECONDARY Role: Dark backgrounds, navbars, elevated dark surfaces. Base hue: 240 (deep indigo-blue) | Base stop: 500 ----------------------------------------------------------- */ --ob-secondary-50: hsl(145.7 47.1% 96.2%); --ob-secondary-100: hsl(145.7 47.1% 92.4%); --ob-secondary-200: hsl(145.7 47.1% 84.9%); --ob-secondary-300: hsl(145.7 47.1% 77.3%); --ob-secondary-400: hsl(145.7 47.1% 69.8%); --ob-secondary-500: hsl(145.7 47.1% 62.2%); /* ← Base */ --ob-secondary-600: hsl(145.7 28.6% 49.8%); --ob-secondary-700: hsl(145.7 28.6% 37.3%); --ob-secondary-800: hsl(145.7 28.6% 24.9%); --ob-secondary-900: hsl(145.7 28.6% 12.4%); --ob-secondary-950: hsl(145.7 28.6% 6.2%); --ob-secondary-trans-90: hsl(145.7 47.1% 62.2% / 0.9); --ob-secondary-trans-80: hsl(145.7 47.1% 62.2% / 0.8); --ob-secondary-trans-70: hsl(145.7 47.1% 62.2% / 0.7); --ob-secondary-trans-60: hsl(145.7 47.1% 62.2% / 0.6); --ob-secondary-trans-50: hsl(145.7 47.1% 62.2% / 0.5); --ob-secondary-trans-40: hsl(145.7 47.1% 62.2% / 0.4); --ob-secondary-trans-20: hsl(145.7 47.1% 62.2% / 0.2); --ob-secondary-trans-10: hsl(145.7 47.1% 62.2% / 0.1); --ob-secondary-trans-5: hsl(145.7 47.1% 62.2% / 0.05); --ob-secondary-trans-1: hsl(145.7 47.1% 62.2% / 0.01); /* ----------------------------------------------------------- TERTIARY Role: Complementary accent, gradients, decorative moments. Base hue: 325 (hot pink / magenta) | Base stop: 500 ----------------------------------------------------------- */ --ob-tertiary-50: hsl(88.6 53.8% 99.2%); --ob-tertiary-100: hsl(88.6 53.8% 98.5%); --ob-tertiary-200: hsl(88.6 53.8% 97%); --ob-tertiary-300: hsl(88.6 53.8% 95.4%); --ob-tertiary-400: hsl(88.6 53.8% 93.9%); --ob-tertiary-500: hsl(88.6 53.8% 92.4%); /* ← Base */ --ob-tertiary-600: hsl(88.6 12.5% 73.9%); --ob-tertiary-700: hsl(88.6 5.5% 55.4%); --ob-tertiary-800: hsl(88.6 4.4% 37%); --ob-tertiary-900: hsl(88.6 4.4% 18.5%); --ob-tertiary-950: hsl(88.6 4.4% 9.2%); --ob-tertiary-trans-90: hsl(88.6 53.8% 92.4% / 0.9); --ob-tertiary-trans-80: hsl(88.6 53.8% 92.4% / 0.8); --ob-tertiary-trans-70: hsl(88.6 53.8% 92.4% / 0.7); --ob-tertiary-trans-60: hsl(88.6 53.8% 92.4% / 0.6); --ob-tertiary-trans-50: hsl(88.6 53.8% 92.4% / 0.5); --ob-tertiary-trans-40: hsl(88.6 53.8% 92.4% / 0.4); --ob-tertiary-trans-20: hsl(88.6 53.8% 92.4% / 0.2); --ob-tertiary-trans-10: hsl(88.6 53.8% 92.4% / 0.1); --ob-tertiary-trans-5: hsl(88.6 53.8% 92.4% / 0.05); --ob-tertiary-trans-1: hsl(88.6 53.8% 92.4% / 0.01); /* ----------------------------------------------------------- NEUTRAL Role: Text, borders, UI chrome, backgrounds. Base hue: 269 (slightly violet-tinted gray) | Base stop: 500 ----------------------------------------------------------- */ --ob-neutral-50: hsl(269 9% 98%); --ob-neutral-100: hsl(269 9% 96%); --ob-neutral-200: hsl(269 9% 91%); --ob-neutral-300: hsl(269 9% 84%); --ob-neutral-400: hsl(269 9% 65%); --ob-neutral-500: hsl(269 9% 46%); /* ← Base */ --ob-neutral-600: hsl(269 9% 34%); --ob-neutral-700: hsl(269 9% 27%); --ob-neutral-800: hsl(269 9% 17%); --ob-neutral-900: hsl(269 9% 11%); --ob-neutral-950: hsl(269 9% 6%); --ob-neutral-trans-90: hsl(269 9% 46% / 0.9); --ob-neutral-trans-80: hsl(269 9% 46% / 0.8); --ob-neutral-trans-70: hsl(269 9% 46% / 0.7); --ob-neutral-trans-60: hsl(269 9% 46% / 0.6); --ob-neutral-trans-50: hsl(269 9% 46% / 0.5); --ob-neutral-trans-40: hsl(269 9% 46% / 0.4); --ob-neutral-trans-20: hsl(269 9% 46% / 0.2); --ob-neutral-trans-10: hsl(269 9% 46% / 0.1); --ob-neutral-trans-5: hsl(269 9% 46% / 0.05); --ob-neutral-trans-1: hsl(269 9% 46% / 0.01); /* ----------------------------------------------------------- ACCENT Role: Positive states, badges, tags, highlights. Base hue: 72 (yellow-green / lime) | Base stop: 500 ----------------------------------------------------------- */ --ob-accent-50: hsl(72 80% 96%); --ob-accent-100: hsl(72 80% 93%); --ob-accent-200: hsl(72 80% 85%); --ob-accent-300: hsl(72 80% 78%); --ob-accent-400: hsl(72 80% 71%); --ob-accent-500: hsl(72 80% 64%); /* ← Base */ --ob-accent-600: hsl(72 80% 51%); --ob-accent-700: hsl(72 80% 38%); --ob-accent-800: hsl(72 80% 25%); --ob-accent-900: hsl(72 80% 10%); --ob-accent-950: hsl(72 80% 5%); /* ----------------------------------------------------------- UTILITY — fixed surface & overlay colors ----------------------------------------------------------- */ --ob-white: hsl(0 0% 100%); --ob-black: hsl(0 0% 9%); --ob-overlay: hsl(0 0% 9% / 0.5); --ob-body-light: hsl(0 0% 100%); --ob-body-dark: hsl(249 20% 20%); /* ----------------------------------------------------------- TEXT EMPHASIS — hierarchy on dark and light surfaces ----------------------------------------------------------- */ --ob-white-emph-high: hsl(0 0% 98%); --ob-white-emph-medium: hsl(0 0% 85%); --ob-white-emph-low: hsl(0 0% 70%); --ob-black-emph-high: hsl(0 0% 12%); --ob-black-emph-medium: hsl(0 0% 35%); --ob-black-emph-low: hsl(0 0% 40%); /* ----------------------------------------------------------- WHITE TRANSPARENT ----------------------------------------------------------- */ --ob-white-trans-90: hsl(0 0% 100% / 0.9); --ob-white-trans-80: hsl(0 0% 100% / 0.8); --ob-white-trans-70: hsl(0 0% 100% / 0.7); --ob-white-trans-60: hsl(0 0% 100% / 0.6); --ob-white-trans-50: hsl(0 0% 100% / 0.5); --ob-white-trans-40: hsl(0 0% 100% / 0.4); --ob-white-trans-20: hsl(0 0% 100% / 0.2); --ob-white-trans-10: hsl(0 0% 100% / 0.1); --ob-white-trans-5: hsl(0 0% 100% / 0.05); --ob-white-trans-1: hsl(0 0% 100% / 0.01); /* ----------------------------------------------------------- BLACK TRANSPARENT ----------------------------------------------------------- */ --ob-black-trans-90: hsl(0 0% 9% / 0.9); --ob-black-trans-80: hsl(0 0% 9% / 0.8); --ob-black-trans-70: hsl(0 0% 9% / 0.7); --ob-black-trans-60: hsl(0 0% 9% / 0.6); --ob-black-trans-50: hsl(0 0% 9% / 0.5); --ob-black-trans-40: hsl(0 0% 9% / 0.4); --ob-black-trans-20: hsl(0 0% 9% / 0.2); --ob-black-trans-10: hsl(0 0% 9% / 0.1); --ob-black-trans-5: hsl(0 0% 9% / 0.05); --ob-black-trans-1: hsl(0 0% 9% / 0.01); /* ----------------------------------------------------------- ELEVATION — Material-style dark surface overlay system Color source: secondary-200 → hsl(240 56% 63%) Usage: set --ob-elevation-alpha, then apply --ob-elevation as background on a dark container. ----------------------------------------------------------- */ --ob-elevation-color: 240 56% 63%; --ob-elevation-bg: var(--ob-body-dark); --ob-elevations-100: linear-gradient(hsla(var(--ob-elevation-color) / 0.05)), var(--ob-elevation-bg); --ob-elevations-200: linear-gradient(hsla(var(--ob-elevation-color) / 0.08)), var(--ob-elevation-bg); --ob-elevations-300: linear-gradient(hsla(var(--ob-elevation-color) / 0.11)), var(--ob-elevation-bg); --ob-elevations-400: linear-gradient(hsla(var(--ob-elevation-color) / 0.14)), var(--ob-elevation-bg); --ob-elevations-500: linear-gradient(hsla(var(--ob-elevation-color) / 0.17)), var(--ob-elevation-bg); --ob-elevations-600: linear-gradient(hsla(var(--ob-elevation-color) / 0.20)), var(--ob-elevation-bg); --ob-elevations-700: linear-gradient(hsla(var(--ob-elevation-color) / 0.23)), var(--ob-elevation-bg); --ob-elevations-800: linear-gradient(hsla(var(--ob-elevation-color) / 0.27)), var(--ob-elevation-bg); --ob-elevations-900: linear-gradient(hsla(var(--ob-elevation-color) / 0.31)), var(--ob-elevation-bg); --ob-elevations-1000: linear-gradient(hsla(var(--ob-elevation-color) / 0.38)), var(--ob-elevation-bg); } /* ============================================================= BRIBLOCK FRAMEWORK — SPACING TOKENS File: tokens/spacing.css Base unit: 1rem = 10px (html font-size: 62.5%) Scale: 4pt grid (0.4rem increments) ============================================================= */ :root { --ob-base-unit: 1rem; /* ----------------------------------------------------------- SIZE SCALE — static spacing values ----------------------------------------------------------- */ --ob-size-0-25: 0.1rem; /* 1px */ --ob-size-0-5: 0.2rem; /* 2px */ --ob-size-1: 0.4rem; /* 4px */ --ob-size-1-5: 0.6rem; /* 6px */ --ob-size-2: 0.8rem; /* 8px */ --ob-size-2-5: 1rem; /* 10px */ --ob-size-3: 1.2rem; /* 12px */ --ob-size-3-5: 1.4rem; /* 14px */ --ob-size-4: 1.6rem; /* 16px */ --ob-size-5: 2rem; /* 20px */ --ob-size-6: 2.4rem; /* 24px */ --ob-size-7: 2.8rem; /* 28px */ --ob-size-8: 3.2rem; /* 32px */ --ob-size-9: 3.6rem; /* 36px */ --ob-size-10: 4rem; /* 40px */ --ob-size-11: 4.4rem; /* 44px */ --ob-size-12: 4.8rem; /* 48px */ --ob-size-14: 5.6rem; /* 56px */ --ob-size-16: 6.4rem; /* 64px */ --ob-size-20: 8rem; /* 80px */ --ob-size-24: 9.6rem; /* 96px */ --ob-size-28: 11.2rem; /* 112px */ --ob-size-32: 12.8rem; /* 128px */ --ob-size-36: 14.4rem; /* 144px */ --ob-size-40: 16rem; /* 160px */ --ob-size-44: 17.6rem; /* 176px */ --ob-size-48: 19.2rem; /* 192px */ --ob-size-52: 20.8rem; /* 208px */ --ob-size-56: 22.4rem; /* 224px */ --ob-size-60: 24rem; /* 240px */ --ob-size-64: 25.6rem; /* 256px */ --ob-size-72: 28.8rem; /* 288px */ --ob-size-80: 32rem; /* 320px */ --ob-size-96: 38.4rem; /* 384px */ /* ----------------------------------------------------------- FLUID SYSTEM CONFIG Viewport range for clamp() interpolation. fluid-range = fluid-max - fluid-min (in rem, unitless for calc) ----------------------------------------------------------- */ --ob-fluid-min: 36rem; --ob-fluid-max: 160rem; --ob-fluid-range: 124; /* ----------------------------------------------------------- SECTION & LAYOUT SPACING — fluid (clamp-based) These adapt between fluid-min and fluid-max viewports. ----------------------------------------------------------- */ --ob-section-inline: 2rem; --ob-section-block: clamp(8rem, calc(8rem + (11.2 - 8) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 11.2rem); --ob-container-gap: clamp(4.8rem, calc(4.8rem + (6.4 - 4.8) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 6.4rem); --ob-grid-gap: clamp(3.6rem, calc(3.6rem + (4.8 - 3.6) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 4.8rem); --ob-content-gap: clamp(1.6rem, calc(1.6rem + (3.2 - 1.6) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 3.2rem); } /* ============================================================= BRIBLOCK FRAMEWORK — TYPOGRAPHY TOKENS File: tokens/typography.css ============================================================= */ :root { /* ----------------------------------------------------------- FONT FAMILIES ----------------------------------------------------------- */ --ob-font-heading: "Russo One", system-ui, sans-serif; --ob-font-body: "Source Sans 3", system-ui, sans-serif; --ob-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ob-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --ob-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ----------------------------------------------------------- FONT SIZES — fluid clamp() scale Each --ob-text-* references its fluid counterpart. Min viewport: 36rem | Max viewport: 160rem ----------------------------------------------------------- */ --ob-text-xs: var(--ob-text-fluid-xs); --ob-text-sm: var(--ob-text-fluid-sm); --ob-text-base: var(--ob-text-fluid-base); --ob-text-lg: var(--ob-text-fluid-lg); --ob-text-xl: var(--ob-text-fluid-xl); --ob-text-2xl: var(--ob-text-fluid-2xl); --ob-text-3xl: var(--ob-text-fluid-3xl); --ob-text-4xl: var(--ob-text-fluid-4xl); --ob-text-5xl: var(--ob-text-fluid-5xl); --ob-text-6xl: var(--ob-text-fluid-6xl); --ob-text-7xl: var(--ob-text-fluid-7xl); --ob-text-8xl: var(--ob-text-fluid-8xl); --ob-text-9xl: var(--ob-text-fluid-9xl); /* Fluid font size definitions */ --ob-text-fluid-xs: clamp(1.1rem, calc(1.1rem + (1.2 - 1.1) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 1.2rem); --ob-text-fluid-sm: clamp(1.25rem, calc(1.25rem + (1.4 - 1.25) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 1.4rem); --ob-text-fluid-base: clamp(1.4rem, calc(1.4rem + (1.6 - 1.4) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 1.6rem); --ob-text-fluid-lg: clamp(1.6rem, calc(1.6rem + (1.8 - 1.6) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 1.8rem); --ob-text-fluid-xl: clamp(1.8rem, calc(1.8rem + (2 - 1.8) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 2rem); --ob-text-fluid-2xl: clamp(2rem, calc(2rem + (2.4 - 2) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 2.4rem); --ob-text-fluid-3xl: clamp(2.4rem, calc(2.4rem + (3 - 2.4) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 3rem); --ob-text-fluid-4xl: clamp(2.8rem, calc(2.8rem + (3.6 - 2.8) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 3.6rem); --ob-text-fluid-5xl: clamp(3.2rem, calc(3.2rem + (4.8 - 3.2) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 4.8rem); --ob-text-fluid-6xl: clamp(3.8rem, calc(3.8rem + (6 - 3.8) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 6rem); --ob-text-fluid-7xl: clamp(4.4rem, calc(4.4rem + (7.2 - 4.4) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 7.2rem); --ob-text-fluid-8xl: clamp(5.2rem, calc(5.2rem + (9.6 - 5.2) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 9.6rem); --ob-text-fluid-9xl: clamp(6rem, calc(6rem + (12.8 - 6) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 12.8rem); /* ----------------------------------------------------------- LINE HEIGHT — fluid ----------------------------------------------------------- */ --ob-line-height-heading: calc(6px + 2ex); --ob-line-height-body: calc(8px + 2ex); --ob-line-height-xs: var(--ob-leading-fluid-xs); --ob-line-height-sm: var(--ob-leading-fluid-sm); --ob-line-height-base: var(--ob-leading-fluid-base); --ob-line-height-lg: var(--ob-leading-fluid-lg); --ob-line-height-xl: var(--ob-leading-fluid-xl); --ob-line-height-2xl: var(--ob-leading-fluid-2xl); --ob-line-height-3xl: var(--ob-leading-fluid-3xl); --ob-line-height-4xl: var(--ob-leading-fluid-4xl); --ob-line-height-5xl: var(--ob-leading-fluid-5xl); --ob-line-height-6xl: var(--ob-leading-fluid-6xl); --ob-line-height-7xl: var(--ob-leading-fluid-7xl); --ob-line-height-8xl: var(--ob-leading-fluid-8xl); --ob-line-height-9xl: var(--ob-leading-fluid-9xl); --ob-leading-fluid-xs: clamp(1.4rem, calc(1.4rem + (1.6 - 1.4) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 1.6rem); --ob-leading-fluid-sm: clamp(1.6rem, calc(1.6rem + (2 - 1.6) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 2rem); --ob-leading-fluid-base: clamp(1.8rem, calc(1.8rem + (2.4 - 1.8) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 2.4rem); --ob-leading-fluid-lg: clamp(2rem, calc(2rem + (2.8 - 2) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 2.8rem); --ob-leading-fluid-xl: clamp(2rem, calc(2rem + (2.8 - 2) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 2.8rem); --ob-leading-fluid-2xl: clamp(2.4rem, calc(2.4rem + (3.2 - 2.4) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 3.2rem); --ob-leading-fluid-3xl: clamp(2.8rem, calc(2.8rem + (3.6 - 2.8) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 3.6rem); --ob-leading-fluid-4xl: clamp(3.2rem, calc(3.2rem + (4 - 3.2) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 4rem); --ob-leading-fluid-5xl: clamp(3.2rem, calc(3.2rem + (4.8 - 3.6) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 4.8rem); --ob-leading-fluid-6xl: clamp(3.8rem, calc(3.8rem + (6 - 4.4) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 6rem); --ob-leading-fluid-7xl: clamp(4.4rem, calc(4.4rem + (7.2 - 5.2) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 7.2rem); --ob-leading-fluid-8xl: clamp(5.2rem, calc(5.2rem + (9.6 - 6.4) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 9.6rem); --ob-leading-fluid-9xl: clamp(6rem, calc(6rem + (12.8 - 8) * ((100vw - var(--ob-fluid-min)) / var(--ob-fluid-range))), 12.8rem); /* ----------------------------------------------------------- LETTER SPACING (tracking) ----------------------------------------------------------- */ --ob-tracking-xs: -0.08rem; --ob-tracking-sm: -0.04rem; --ob-tracking-base: 0; --ob-tracking-lg: 0.04rem; --ob-tracking-xl: 0.08rem; --ob-tracking-2xl: 0.16rem; --ob-tracking-3xl: 0.24rem; --ob-tracking-4xl: 0.4rem; --ob-tracking-5xl: 0.8rem; --ob-tracking-6xl: 1.6rem; } /* ============================================================= BRIBLOCK FRAMEWORK — LAYOUT TOKENS File: tokens/layout.css Covers: Width, Grid ============================================================= */ :root { /* ----------------------------------------------------------- WIDTH — viewport & container constraints ----------------------------------------------------------- */ --ob-min-w-screen: 320px; --ob-max-w-screen: 1440px; --ob-container-width: 140rem; /* ----------------------------------------------------------- GRID — template column presets Usage: grid-template-columns: var(--ob-grid-3); ----------------------------------------------------------- */ /* Equal columns */ --ob-grid-1: minmax(0, 1fr); --ob-grid-2: repeat(2, minmax(0, 1fr)); --ob-grid-3: repeat(3, minmax(0, 1fr)); --ob-grid-4: repeat(4, minmax(0, 1fr)); --ob-grid-5: repeat(5, minmax(0, 1fr)); --ob-grid-6: repeat(6, minmax(0, 1fr)); --ob-grid-7: repeat(7, minmax(0, 1fr)); --ob-grid-8: repeat(8, minmax(0, 1fr)); --ob-grid-9: repeat(9, minmax(0, 1fr)); --ob-grid-10: repeat(10, minmax(0, 1fr)); --ob-grid-11: repeat(11, minmax(0, 1fr)); --ob-grid-12: repeat(12, minmax(0, 1fr)); /* Asymmetric ratio layouts */ --ob-grid-1-2: minmax(0, 1fr) minmax(0, 2fr); --ob-grid-2-1: minmax(0, 2fr) minmax(0, 1fr); --ob-grid-1-3: minmax(0, 1fr) minmax(0, 3fr); --ob-grid-3-1: minmax(0, 3fr) minmax(0, 1fr); --ob-grid-1-4: minmax(0, 1fr) minmax(0, 4fr); --ob-grid-4-1: minmax(0, 4fr) minmax(0, 1fr); --ob-grid-2-3: minmax(0, 2fr) minmax(0, 3fr); --ob-grid-3-2: minmax(0, 3fr) minmax(0, 2fr); /* ----------------------------------------------------------- ASPECT RATIO Usage: aspect-ratio: var(--ob-aspect-video); ----------------------------------------------------------- */ --ob-aspect-video: 16 / 9; --ob-aspect-classic: 4 / 3; --ob-aspect-classic-portrait: 3 / 4; --ob-aspect-ultrawide: 21 / 9; --ob-aspect-square: 1 / 1; --ob-aspect-story: 9 / 16; --ob-aspect-photo: 5 / 4; --ob-aspect-photo-portrait: 4 / 5; --ob-aspect-professional: 3 / 2; --ob-aspect-professional-portrait: 2 / 3; --ob-aspect-golden: 1.618 / 1; --ob-aspect-base: var(--ob-aspect-classic); } /* ============================================================= BRIBLOCK FRAMEWORK — EFFECTS TOKENS File: tokens/effects.css Covers: Radius, Shadows, Blur ============================================================= */ :root { /* ----------------------------------------------------------- BORDER RADIUS ----------------------------------------------------------- */ --ob-rounded-sm: 0.2rem; --ob-rounded-base: 0.4rem; --ob-rounded-md: 0.6rem; --ob-rounded-lg: 0.8rem; --ob-rounded-xl: 1.2rem; --ob-rounded-2xl: 1.6rem; --ob-rounded-3xl: 2.4rem; --ob-rounded-full: 999.9rem; /* ----------------------------------------------------------- SHADOWS — light mode Base color: hsl(0 0% 9% / 0.1) Usage: box-shadow: var(--ob-shadow-light-md); ----------------------------------------------------------- */ --ob-shadow-light-main: hsl(0 0% 9% / 0.1); --ob-shadow-light-sm: 0px 1px 3px var(--ob-shadow-light-main); --ob-shadow-light-base: 0px 2px 4px var(--ob-shadow-light-main); --ob-shadow-light-md: 0px 4px 8px var(--ob-shadow-light-main); --ob-shadow-light-lg: 0px 8px 16px var(--ob-shadow-light-main); --ob-shadow-light-xl: 0px 16px 24px var(--ob-shadow-light-main); --ob-shadow-light-2xl: 0px 32px 64px var(--ob-shadow-light-main); /* ----------------------------------------------------------- BLUR Usage: backdrop-filter: blur(var(--ob-blur-md)); filter: blur(var(--ob-blur-sm)); ----------------------------------------------------------- */ --ob-blur-sm: 0.4rem; --ob-blur-base: 0.8rem; --ob-blur-md: 1.2rem; --ob-blur-lg: 1.6rem; --ob-blur-xl: 2.4rem; --ob-blur-2xl: 4rem; --ob-blur-3xl: 6.4rem; } /* ============================================================= BRIBLOCK FRAMEWORK — MOTION TOKENS File: tokens/motion.css Covers: Transitions, (future: easing curves, keyframes) ============================================================= */ :root { /* ----------------------------------------------------------- TRANSITION DURATIONS Usage: transition: color var(--ob-transition-fast) ease; ----------------------------------------------------------- */ --ob-transition-fast: 0.2s; --ob-transition-base: 0.4s; --ob-transition-slow: 0.6s; /* ----------------------------------------------------------- EASING CURVES (future expansion) --ob-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ob-ease-enter: cubic-bezier(0, 0, 0.2, 1); --ob-ease-exit: cubic-bezier(0.4, 0, 1, 1); --ob-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); ----------------------------------------------------------- */ }