/**
 * TennisRoots Mobile Design Tokens
 *
 * Centralized design system variables for the mobile application.
 * All component styling should reference these tokens.
 *
 * Placeholders ready for final design specifications.
 */

:root {
    /* ─── Typography ─── */
    --tr-font-display: system-ui, -apple-system, sans-serif;
    --tr-font-ui: system-ui, -apple-system, sans-serif;
    --tr-font-family-display: Georgia, "Times New Roman", serif;

    --tr-font-franklin-book-condensed: "TR Franklin Book Condensed", system-ui, -apple-system, sans-serif;
    --tr-font-franklin-demi: "TR Franklin Demi", system-ui, -apple-system, sans-serif;
    --tr-font-franklin-medium-condensed: "TR Franklin Medium Condensed", system-ui, -apple-system, sans-serif;
    --tr-font-garamond-book-condensed: "TR Garamond Book Condensed", Georgia, "Times New Roman", serif;
    --tr-font-garamond-light-condensed: "TR Garamond Light Condensed", Georgia, "Times New Roman", serif;
    --tr-font-parkinson-condensed-light: "TR Parkinson Condensed Light", Georgia, "Times New Roman", serif;

    --tr-font-size-hero: 28px;
    --tr-font-size-heading: 16px;
    --tr-font-size-body: 14px;
    --tr-font-size-label: 12px;

    --tr-font-weight-normal: 400;
    --tr-font-weight-semibold: 600;
    --tr-font-weight-bold: 700;
    --tr-font-weight-extrabold: 800;

    --tr-line-height-tight: 1.2;
    --tr-line-height-normal: 1.4;
    --tr-line-height-relaxed: 1.6;

    /* ─── Colors ─── */
    --tr-color-bg: #0a0e16;
    --tr-color-surface: #12182a;
    --tr-color-surface-2: #161d31;
    --tr-color-border: #232c42;

    --tr-color-text: #f4f6f9;
    --tr-color-text-dim: #ffffff;
    --tr-color-text-dimmer: #6c7690;

    --tr-color-accent: #cedd44;
    --tr-color-accent-dim: #cedd44;

    --tr-color-green: #cedd44;

    --tr-color-live: #e5304a;

    /* Semantic overlays */
    --tr-color-overlay-light: rgba(6, 8, 13, 0.2);
    --tr-color-overlay-medium: rgba(6, 8, 13, 0.5);
    --tr-color-overlay-dark: rgba(6, 8, 13, 0.8);

    /* ─── Spacing ─── */
    --tr-space-xs: 8px;
    --tr-space-sm: 12px;
    --tr-space-md: 8px;
    --tr-space-lg: 24px;
    --tr-space-xl: 32px;
    --tr-space-2xl: 48px;

    /* ─── Grid System ─── */
    --tr-grid-margin: 28px;

    /* ─── Sizing ─── */
    --tr-header-height: 56px;
    --tr-header-top: 18px;
    --tr-header-logo-width: 106px;
    --tr-header-logo-offset-y: 0px;
    --tr-header-button-width: 112px;
    --tr-header-button-height: 28px;
    --tr-header-button-offset-y: -6px;
    --tr-header-button-font-size: 11px;
    --tr-header-button-tracking: 0.18em;
    --tr-header-button-padding-top: 2px;
    --tr-header-button-padding-bottom: 0px;
    --tr-nav-height: 84px;
    --tr-safe-top: env(safe-area-inset-top, 0px);
    --tr-safe-top-bg: #000000;
    --tr-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tr-nav-total-height: calc(var(--tr-nav-height) + var(--tr-safe-bottom));
    --tr-section-height: calc(100vh - var(--tr-safe-top));

    /* ─── Navigation Controls ─── */
    --tr-nav-icon-size: 30px;
    --tr-nav-icon-label-gap: 6px;
    --tr-nav-indicator-height: 4px;
    --tr-nav-indicator-icon-gap: 15px;
    --tr-nav-content-offset-y: 0px;

    /* ─── Components ─── */
    --tr-button-height: 58px;
    --tr-button-radius: 999px;
    --tr-button-border-width: 1.5px;
    --tr-button-border-color: #ffffff;

    --tr-icon-size-sm: 12px;
    --tr-icon-size-md: 20px;
    --tr-icon-size-lg: 24px;

    /* ─── Borders & Radius ─── */
    --tr-radius-sm: 10px;
    --tr-radius-md: 14px;
    --tr-radius-lg: 16px;

    --tr-border-width-thin: 1px;

    /* ─── Transitions ─── */
    --tr-transition-fast: 150ms ease;
    --tr-transition-normal: 300ms ease;
    --tr-transition-slow: 500ms ease;

    /* ═══════════════════════════════════════════════════════════════════
       TR MOBILE HERO — TYPOGRAPHY CALIBRATION
       ═══════════════════════════════════════════════════════════════════ */

    /* HERO TITLE */
    --tr-hero-title-font-size: 34px;
    --tr-hero-title-tracking: 0.02em;
    --tr-hero-title-leading: 0.95;
    --tr-hero-title-color: #f4f6f9;

    /* HERO SUBTITLE */
    --tr-hero-subtitle-font-size: 16px;
    --tr-hero-subtitle-tracking: 0.03em;
    --tr-hero-subtitle-leading: 1.4;
    --tr-hero-subtitle-color: #cedd44;

    /* TITLE → SUBTITLE SPACING */
    --tr-hero-title-subtitle-gap: 0px;

    /* ═══════════════════════════════════════════════════════════════════ */

    /* BOTTOM CTA / DISCOVER CALIBRATION */
    /* BOTTOM SECTION POSITION */
    --tr-hero-cta-top: 52px;

    /* CTA GEOMETRY */
    --tr-hero-cta-height: 34px;

    --tr-hero-cta-padding-top: 2px;
    --tr-hero-cta-padding-bottom: 0px;
    --tr-hero-cta-padding-left: 20px;
    --tr-hero-cta-padding-right: 20px;

    /* INTERNAL VERTICAL SPACING */
    --tr-hero-cta-description-gap: 14px;
    --tr-hero-description-divider-gap: 12px;
    --tr-hero-divider-discover-gap: 16px;
    --tr-hero-discover-arrow-gap: 0px;

    /* DESCRIPTION */
    --tr-hero-cta-description-font-size: 13px;
    --tr-hero-cta-description-tracking: 0.01em;
    --tr-hero-cta-description-leading: 1.5;
    --tr-hero-cta-description-color: #ffffff;

    /* DIVIDER */
    --tr-divider-thickness: 1px;

    /* DISCOVER */
    --tr-hero-discover-text-color: #cedd44;

    /* ARROW */
    --tr-hero-discover-arrow-color: #cedd44;
    --tr-hero-discover-arrow-opacity: 1;
    --tr-hero-discover-arrow-animation: discover-pulse;
    --tr-hero-discover-arrow-animation-duration: 2s;
    --tr-hero-discover-bottom-gap: 20px;

    /* ═══════════════════════════════════════════════════════════════════ */

    /* ─── Hero Background Image Calibration ─── */
    --tr-hero-image-scale: 1;
    --tr-hero-image-position-x: 50%;
    --tr-hero-image-position-y: 50%;

    /* ═══════════════════════════════════════════════════════════════════ */

    /* ─── Background Gradient Controls ─── */

    /* TOP GRADIENT — opacity 0 (transparent) to 1 (solid black) */
    --tr-top-gradient-height: 46%;
    --tr-top-gradient-opacity-0: 1;
    --tr-top-gradient-opacity-20: 0.9;
    --tr-top-gradient-opacity-40: 0.8;
    --tr-top-gradient-opacity-60: 0.6;
    --tr-top-gradient-opacity-80: 0.2;
    --tr-top-gradient-opacity-100: 0;
    --tr-top-gradient-position-20: 25%;
    --tr-top-gradient-position-40: 40%;
    --tr-top-gradient-position-60: 55%;
    --tr-top-gradient-position-80: 80%;

    /* BOTTOM GRADIENT — opacity 0 (transparent) to 1 (solid black) */
    --tr-bottom-gradient-height: 50%;
    --tr-bottom-gradient-opacity-0: 0;
    --tr-bottom-gradient-opacity-20: 0.35;
    --tr-bottom-gradient-opacity-40: 0.55;
    --tr-bottom-gradient-opacity-60: 0.65;
    --tr-bottom-gradient-opacity-80: 0.85;
    --tr-bottom-gradient-opacity-100: 0.95;
    --tr-bottom-gradient-position-20: 30%;
    --tr-bottom-gradient-position-40: 45%;
    --tr-bottom-gradient-position-60: 60%;
    --tr-bottom-gradient-position-80: 82%;
}

/* ─── Dynamic Viewport Height (iOS Safari / Android browser chrome) ─── */
@supports (height: 100dvh) {
    :root {
        --tr-section-height: calc(100dvh - var(--tr-safe-top));
    }
}