/* plain CSS — color repeated everywhere */
.button-primary { background-color: #0066cc; }
.link { color: #0066cc; }
.border-accent { border-color: #0066cc; }
.heading { color: #0066cc; }

/* To change the color — must find and replace EVERY occurrence */

// _variables.scss — all design tokens in one place

// Colors
$color-primary:     #0066cc;
$color-secondary:   #ff6b35;
$color-success:     #28a745;
$color-danger:      #dc3545;
$color-warning:     #ffc107;
$color-text:        #333333;
$color-text-muted:  #666666;
$color-background:  #ffffff;
$color-border:      #e0e0e0;

// Typography
$font-family-base:  "Inter", -apple-system, sans-serif;
$font-family-code:  "Fira Code", monospace;
$font-size-xs:      12px;
$font-size-sm:      14px;
$font-size-base:    16px;
$font-size-lg:      18px;
$font-size-xl:      24px;
$font-size-2xl:     32px;
$font-size-3xl:     48px;

// Spacing
$spacing-1:   4px;
$spacing-2:   8px;
$spacing-3:   12px;
$spacing-4:   16px;
$spacing-6:   24px;
$spacing-8:   32px;
$spacing-12:  48px;
$spacing-16:  64px;

// Breakpoints
$breakpoint-sm:   640px;
$breakpoint-md:   768px;
$breakpoint-lg:   1024px;
$breakpoint-xl:   1280px;

// Borders
$border-radius-sm:  4px;
$border-radius-md:  8px;
$border-radius-lg:  16px;
$border-radius-full: 9999px;

// Shadows
$shadow-sm:  0 1px 3px rgba(0,0,0,0.1);
$shadow-md:  0 4px 6px rgba(0,0,0,0.1);
$shadow-lg:  0 10px 15px rgba(0,0,0,0.1);
$shadow-xl:  0 20px 25px rgba(0,0,0,0.1);

// Using variables
.button {
    background-color: $color-primary;
    color: white;
    font-family: $font-family-base;
    font-size: $font-size-base;
    padding: $spacing-2 $spacing-4;
    border-radius: $border-radius-md;
    box-shadow: $shadow-sm;
}

.button:hover {
    // Math operations on variables
    background-color: darken($color-primary, 10%);
    box-shadow: $shadow-md;
}

/* Plain CSS */
.navbar { background: #0066cc; }
.navbar .navbar__logo { font-size: 24px; }
.navbar .navbar__logo img { height: 40px; }
.navbar .navbar__links { display: flex; }
.navbar .navbar__links a { color: white; }
.navbar .navbar__links a:hover { color: #ffcc00; }
.navbar .navbar__links a.active { font-weight: bold; }

// SCSS — nested selectors
.navbar {
    background: $color-primary;
    padding: $spacing-4 $spacing-8;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__logo {                       // & = .navbar → .navbar__logo
        font-size: $font-size-xl;
        font-weight: 700;

        img {
            height: 40px;
            vertical-align: middle;
        }
    }

    &__links {
        display: flex;
        gap: $spacing-6;

        a {
            color: white;
            text-decoration: none;
            font-size: $font-size-base;
            transition: color 0.2s;

            &:hover {               // .navbar__links a:hover
                color: $color-warning;
            }

            &.active {              // .navbar__links a.active
                font-weight: 700;
                border-bottom: 2px solid white;
            }
        }
    }

    // Media query inside selector — keeps related code together
    @media (max-width: $breakpoint-md) {
        flex-direction: column;
        gap: $spacing-4;

        &__links {
            flex-direction: column;
            align-items: center;
        }
    }
}

// & references the parent selector

.button {
    background: $color-primary;

    &:hover { ... }          // .button:hover
    &:focus { ... }          // .button:focus
    &:disabled { ... }       // .button:disabled
    &.is-loading { ... }     // .button.is-loading
    &--secondary { ... }     // .button--secondary (BEM modifier)
    &__icon { ... }          // .button__icon (BEM element)

    // & at end — prepend parent context
    .dark-theme & {          // .dark-theme .button
        background: lighten($color-primary, 20%);
    }
}

// _mixins.scss

// Flexbox center — used constantly
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

// Absolute center
@mixin absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// Text truncation with ellipsis
@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// Multi-line text truncation
@mixin line-clamp($lines: 3) {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

// Responsive breakpoint helper
@mixin respond-to($breakpoint) {
    @if $breakpoint == sm {
        @media (min-width: $breakpoint-sm) { @content; }
    } @else if $breakpoint == md {
        @media (min-width: $breakpoint-md) { @content; }
    } @else if $breakpoint == lg {
        @media (min-width: $breakpoint-lg) { @content; }
    } @else if $breakpoint == xl {
        @media (min-width: $breakpoint-xl) { @content; }
    }
}

// Button mixin with parameters
@mixin button-variant($bg-color, $text-color: white, $hover-darken: 10%) {
    background-color: $bg-color;
    color: $text-color;
    border: 2px solid $bg-color;

    &:hover {
        background-color: darken($bg-color, $hover-darken);
        border-color: darken($bg-color, $hover-darken);
    }

    &:disabled {
        background-color: lighten($bg-color, 20%);
        border-color: lighten($bg-color, 20%);
        cursor: not-allowed;
    }
}

// Card mixin
@mixin card($padding: $spacing-6, $radius: $border-radius-md) {
    background: white;
    border-radius: $radius;
    padding: $padding;
    box-shadow: $shadow-md;
    border: 1px solid $color-border;
}

// Using @include to apply mixins
.hero {
    @include flex-center;
    height: 100vh;
    background: $color-primary;
}

.card {
    @include card;
    @include respond-to(md) {
        @include card($spacing-8);
    }
}

.product-title {
    @include text-truncate;
    font-size: $font-size-lg;
}

.article-excerpt {
    @include line-clamp(3);
}

// Button variants using mixin
.button-primary {
    @include button-variant($color-primary);
}

.button-success {
    @include button-variant($color-success);
}

.button-danger {
    @include button-variant($color-danger);
}

// Color functions
$base-color: #0066cc;

.example {
    background: darken($base-color, 10%);           // Darker version
    border-color: lighten($base-color, 20%);        // Lighter version
    outline-color: saturate($base-color, 30%);      // More saturated
    box-shadow: rgba($base-color, 0.3);             // With opacity

    // Modern color functions (Sass 1.65+)
    background: color.scale($base-color, $lightness: 30%);
    border: color.adjust($base-color, $hue: 30deg);
}

// Math functions
.calculated {
    width: percentage(3/4);         // 75%
    padding: math.round(14.7px);   // 15px
    font-size: math.max(12px, 1vw); // Larger of 12px or 1vw
}

// String functions
.icon::before {
    content: to-upper-case("hello");    // "HELLO"
    font-family: quote(Arial);          // "Arial"
}

@use "sass:math";

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

// Usage:
.heading {
    font-size: rem(32);      // 2rem
    margin-bottom: rem(24);  // 1.5rem
}

// Responsive clamp helper
@function clamp-size($min-px, $max-px, $min-vw: 320, $max-vw: 1280) {
    $slope: math.div($max-px - $min-px, $max-vw - $min-vw);
    $y-intercept: $min-px - ($slope * $min-vw);
    @return clamp(#{$min-px}px, #{$y-intercept}px + #{$slope * 100}vw, #{$max-px}px);
}

// Fluid typography — scales between 16px and 32px
.heading-1 {
    font-size: clamp-size(24, 48);   // clamp(24px, responsive, 48px)
}

.body-text {
    font-size: clamp-size(14, 18);  // clamp(14px, responsive, 18px)
}

// Get value from a Sass map
$theme-colors: (
    "primary": #0066cc,
    "secondary": #ff6b35,
    "success": #28a745,
    "danger": #dc3545
);

@function theme-color($name) {
    @return map.get($theme-colors, $name);
}

.alert-success {
    background: theme-color("success");
}