/* ==========================================================================
   NextRide Typography System
   Migrated from Figma design system

   Uses design tokens from design-tokens.css.
   Provides utility classes AND sensible base-element defaults.
   Bootstrap typography still loads first, so these override where needed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font-weight tokens
   -------------------------------------------------------------------------- */
:root {
    --nr-font-weight-normal: 400;
    --nr-font-weight-medium: 500;
    --nr-font-weight-semibold: 600;
    --nr-font-weight-bold: 700;
}

/* --------------------------------------------------------------------------
   Type-scale tokens
   -------------------------------------------------------------------------- */
:root {
    --nr-text-xs: 0.75rem;        /* 12px */
    --nr-text-sm: 0.875rem;       /* 14px */
    --nr-text-base: 1rem;         /* 16px */
    --nr-text-lg: 1.125rem;       /* 18px */
    --nr-text-xl: 1.25rem;        /* 20px */
    --nr-text-2xl: 1.5rem;        /* 24px */
    --nr-text-3xl: 1.875rem;      /* 30px */
    --nr-text-4xl: 2.25rem;       /* 36px */
}

/* --------------------------------------------------------------------------
   Line-height tokens
   -------------------------------------------------------------------------- */
:root {
    --nr-leading-none: 1;
    --nr-leading-tight: 1.25;
    --nr-leading-snug: 1.375;
    --nr-leading-normal: 1.5;
    --nr-leading-relaxed: 1.625;
    --nr-leading-loose: 2;
}

/* --------------------------------------------------------------------------
   Base element defaults  (layer: base)
   These sit on top of Bootstrap and below utility classes.
   -------------------------------------------------------------------------- */
html {
    font-size: 16px;               /* anchor for rem scale */
}

/* --------------------------------------------------------------------------
   Heading utilities
   Use these classes directly or let the defaults above work.
   -------------------------------------------------------------------------- */
.nr-heading-1 {
    font-size: var(--nr-text-4xl);
    font-weight: var(--nr-font-weight-bold);
    line-height: var(--nr-leading-tight);
    letter-spacing: -0.025em;
}

.nr-heading-2 {
    font-size: var(--nr-text-3xl);
    font-weight: var(--nr-font-weight-bold);
    line-height: var(--nr-leading-tight);
    letter-spacing: -0.015em;
}

.nr-heading-3 {
    font-size: var(--nr-text-2xl);
    font-weight: var(--nr-font-weight-semibold);
    line-height: var(--nr-leading-snug);
}

.nr-heading-4 {
    font-size: var(--nr-text-xl);
    font-weight: var(--nr-font-weight-semibold);
    line-height: var(--nr-leading-normal);
}

/* --------------------------------------------------------------------------
   Body text utilities
   -------------------------------------------------------------------------- */
.nr-text-body {
    font-size: var(--nr-text-base);
    line-height: var(--nr-leading-normal);
    font-weight: var(--nr-font-weight-normal);
}

.nr-text-sm {
    font-size: var(--nr-text-sm);
    line-height: var(--nr-leading-normal);
}

.nr-text-xs {
    font-size: var(--nr-text-xs);
    line-height: var(--nr-leading-normal);
}

.nr-text-lg {
    font-size: var(--nr-text-lg);
    line-height: var(--nr-leading-relaxed);
}

/* --------------------------------------------------------------------------
   Display text  (hero sections, big numbers)
   -------------------------------------------------------------------------- */
.nr-display {
    font-size: var(--nr-text-4xl);
    font-weight: var(--nr-font-weight-bold);
    line-height: var(--nr-leading-none);
    letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   Color helpers  (use with design tokens)
   -------------------------------------------------------------------------- */
.nr-text-foreground   { color: var(--nr-foreground); }
.nr-text-muted        { color: var(--nr-muted-foreground); }
.nr-text-primary      { color: var(--nr-primary); }
.nr-text-destructive  { color: var(--nr-destructive); }

/* --------------------------------------------------------------------------
   Font-weight helpers
   -------------------------------------------------------------------------- */
.nr-font-normal    { font-weight: var(--nr-font-weight-normal); }
.nr-font-medium    { font-weight: var(--nr-font-weight-medium); }
.nr-font-semibold  { font-weight: var(--nr-font-weight-semibold); }
.nr-font-bold      { font-weight: var(--nr-font-weight-bold); }

/* --------------------------------------------------------------------------
   Truncation
   -------------------------------------------------------------------------- */
.nr-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nr-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}