src/components/shared/_typography.scss

// Shared typography scale for the Doris homepage and comparison pages.
//
// Keep this file focused on semantic text roles rather than page-specific
// component styling. The goal is to make the type system consistent across
// the new homepage family.

// Sourced from the global CSS variables defined in src/scss/custom.scss.
// Use $font-mono / $font-sans in SCSS contexts only; runtime styles should
// reference var(--font-mono) / var(--font-family-base) directly.
$font-mono: var(--font-mono);
$font-sans: var(--font-family-base);

$display-xl: clamp(40px, 4.4vw, 62px);
$display-lg: clamp(40px, 4.4vw, 52px);
$card-title: clamp(34px, 2.2rem + 1vw, 44px);
$metric: clamp(38px, 2rem + 1.6vw, 52px);
$body-lg: 17px;
$body: 15px;
$body-sm: 13px;
$label: 13px;
$micro: 10.5px;

@mixin mono-text($size, $weight: 700, $line: 1.2, $letter-spacing: 0, $transform: none, $word-spacing: normal) {
    font-family: $font-mono;
    font-size: $size;
    font-weight: $weight;
    line-height: $line;
    letter-spacing: $letter-spacing;
    text-transform: $transform;
    word-spacing: $word-spacing;
}

@mixin sans-text($size, $weight: 400, $line: 1.5, $letter-spacing: 0, $transform: none) {
    font-family: $font-sans;
    font-size: $size;
    font-weight: $weight;
    line-height: $line;
    letter-spacing: $letter-spacing;
    text-transform: $transform;
}

@mixin hero-title {
    @include mono-text($display-xl, 700, 0.92, -0.035em, uppercase, -0.18em);
}

@mixin section-title {
    @include mono-text($display-lg, 800, 1.06, -0.025em, uppercase, -0.1em);
}

@mixin card-title {
    @include mono-text($card-title, 800, 1.02, -0.02em, uppercase, -0.08em);
}

@mixin metric {
    @include mono-text($metric, 800, 1, -0.025em);
}

@mixin eyebrow {
    @include mono-text($label, 700, 1.2, 0.18em, uppercase);
}

@mixin micro-label {
    @include mono-text($micro, 700, 1.2, 0.14em, uppercase);
}

@mixin body-copy {
    @include sans-text($body, 400, 1.5);
}

@mixin body-copy-strong {
    @include sans-text($body-lg, 500, 1.4);
}

@mixin small-copy {
    @include sans-text($body-sm, 400, 1.45);
}