Variables

@@use 'sass:color';
@@use 'sass:math';

/* 1) Basic variables */
$primary:    #0ea5e9;
$danger:     #ef4444;
$success:    #10b981;
$radius-sm:  0.25rem;
$radius-lg:  0.75rem;
$font-stack: 'Inter', system-ui, sans-serif;

.btn-primary {
    background: $primary;
    color:      white;
    border-radius: $radius-sm;
    font-family: $font-stack;
}

/* 2) Variables in calculations + functions */
$baseline: 8px;
$gap-sm:   $baseline;
$gap-md:   $baseline * 2;
$gap-lg:   $baseline * 4;

.card { padding: $gap-md; }

/* 3) Maps + lists */
$breakpoints: (
    'sm': 640px,
    'md': 768px,
    'lg': 1024px,
    'xl': 1280px,
);
$brand-colors: ('primary': $primary, 'danger': $danger, 'success': $success);

@@each $name, $value in $brand-colors {
    .bg-#{$name}    { background: $value; }
    .text-#{$name}  { color:      $value; }
    .border-#{$name}{ border:     1px solid $value; }
}

/* 4) Modify the SCSS value with built-in functions */
.btn-primary:hover { background: color.adjust($primary, $lightness: -10%); }
.btn-primary:active { background: color.adjust($primary, $lightness: -20%); }
.subtle             { color: color.scale($primary, $alpha: -40%); }

/* 5) !default — let the consumer override
   Inside a partial: */
$primary: #0ea5e9 !default;
/* Consumer can override BEFORE the @@use line:
   @use 'theme' with ($primary: #ff5500); */

/* 6) Scope — variables defined in a block are local */
.parent {
    $local: red;
    color: $local;
}
/* $local doesn't exist outside .parent */

/* 7) !global — escape local scope (rare; usually a smell) */
.parent {
    $promoted: red !global;
}
.other { color: $promoted; }

/* 8) CSS custom properties — runtime variables, more powerful for theming */
:root {
    --bg:     #fff;
    --fg:     #111;
    --accent: #{$primary};        /* interpolate Sass into CSS */
}
[data-theme='dark'] {
    --bg:     #0b0b0b;
    --fg:     #eee;
}
.btn { background: var(--accent); color: var(--bg); }

/* 9) When to use Sass vars vs CSS vars
     Sass vars:    compile-time constants, math + functions, breakpoints, generated CSS
     CSS vars:     runtime themes, browser inheritance, JS interop, per-component overrides */

/* 10) Module system — pull vars from another file */
/* tokens.scss */
$radius: 0.5rem !default;
$shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !default;

/* app.scss */
@@use 'tokens' as t with ($radius: 0.75rem);
.card {
    border-radius: t.$radius;     /* prefixed access */
    box-shadow:    t.$shadow;
}

/* 11) Naming conventions that scale */
/*   $color-primary, $color-primary-hover
     $space-1, $space-2, $space-3        — scale-style
     $breakpoint-sm                         — semantic-style
     CSS vars: --bg, --fg, --accent          — short, theme-able */

$primary: #04AA6D;
$padding: 16px;
button { background: $primary; padding: $padding; }