// ==========================================================================
// Design System Galta 2026 - Variables
// Extrait du Figma Design System
// ==========================================================================

// --------------------------------------------------------------------------
// Couleurs
// --------------------------------------------------------------------------

@use 'colors' as *;
@use "sass:math";

@function rem($px, $base: 16) {
    @return math.div($px, $base) * 1rem;
}

@function fluid($min-px, $max-px, $min-vw: 360, $max-vw: 1280) {
    $slope: math.div($max-px - $min-px, $max-vw - $min-vw);
    $intercept: math.div($min-px - $slope * $min-vw, 16) * 1rem;
    $slope-vw: $slope * 100vw;

    @return clamp(#{rem($min-px)}, #{$intercept} + #{$slope-vw}, #{rem($max-px)});
}

// Couleurs theme-aware — miroir exact des tokens _colors.scss (sans préfixe de saison),
// résolues via custom properties :root / [data-theme="dark"] plus bas.
$color-dark: var(--color-dark);
$color-primary-dark: var(--color-primary-dark);
$color-primary: var(--color-primary);
$color-primary-light: var(--color-primary-light);
$color-primary-lighter: var(--color-primary-lighter);
$color-secondary-dark: var(--color-secondary-dark);
$color-secondary: var(--color-secondary);
$color-secondary-light: var(--color-secondary-light);
$color-neutral: var(--color-neutral);
$color-light: var(--color-light);

// --------------------------------------------------------------------------
// Typographie
// --------------------------------------------------------------------------

// Familles de polices
$font-family-serif: 'Bochan Serif', serif;
$font-family-sans: 'Lato', sans-serif;

// Tailles de police
$font-size-h1: fluid(30, 96);
$font-size-h2: fluid(20, 40);
$font-size-h3: fluid(18, 32);
$font-size-h4: fluid(14, 24);

$font-size-base: rem(16);
$font-size-lg: rem(18);
$font-size-sm: rem(14);

// Line height
$line-height-base: 1.6;

// --------------------------------------------------------------------------
// Espacement
// --------------------------------------------------------------------------

$spacing-xs: 8px;
$spacing-sm: fluid(8, 16);
$spacing-md: fluid(16, 24);
$spacing-lg: fluid(24, 40);
$spacing-xl: fluid(40, 80);
$spacing-xxl: fluid(80, 120);

// --------------------------------------------------------------------------
// Breakpoints
// --------------------------------------------------------------------------

$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-wrapper: 1400px;
$breakpoint-blog: 1030px;

// --------------------------------------------------------------------------
// Autres
// --------------------------------------------------------------------------

// Autres
$shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
$radius-sm: 4px;
$radius-md: 8px;
$header-height: 100px;
$header-height-lg: 142px;
$footer-mask-height: 117px;
$contact-card-mask-height: 37px;

// --------------------------------------------------------------------------
// Theme (light/dark) — custom properties consommées par les $color-* sémantiques ci-dessus
// --------------------------------------------------------------------------

:root {
    --header-height-css: 100px;

    @media (min-width: calc(#{$breakpoint-wrapper} + (#{$spacing-lg} * 2))) {
        --header-height-css: 142px;
    }

    --color-dark: #{$color-summer-dark};
    --color-primary-dark: #{$color-summer-primary-dark};
    --color-primary: #{$color-summer-primary};
    --color-primary-light: #{$color-summer-primary-light};
    --color-primary-lighter: #{$color-summer-primary-lighter};
    --color-secondary-dark: #{$color-summer-secondary-dark};
    --color-secondary: #{$color-summer-secondary};
    --color-secondary-light: #{$color-summer-secondary-light};
    --color-neutral: #{$color-summer-neutral};
    --color-light: #{$color-summer-light};
}

[data-theme='dark'] {
    // "Hiver" — palette hivernale claire/froide (bleu-gris/blanc), opposée a l'été (beige/marron)
    --color-dark: #{$color-winter-dark};
    --color-primary-dark: #{$color-winter-primary-dark};
    --color-primary: #{$color-winter-primary};
    --color-primary-light: #{$color-winter-primary-light};
    --color-primary-lighter: #{$color-winter-primary-lighter};
    --color-secondary-dark: #{$color-winter-secondary-dark};
    --color-secondary: #{$color-winter-secondary};
    --color-secondary-light: #{$color-winter-secondary-light};
    --color-neutral: #{$color-winter-neutral};
    --color-light: #{$color-winter-light};
}