// ============================================================================
// BASE Studio / 42 — Design Tokens as SCSS variables & mixins
// Extracted from 24 JSONs of the Hello Elementor template
// ============================================================================

// -------- COLOR · system --------
$color-system-primary:   #ff5100;
$color-system-secondary: #54595F;
$color-system-text:      #7A7A7A;
$color-system-accent:    #ff5100;

// -------- COLOR · neutral --------
$color-white:      #FFFFFF;
$color-off-white: #F7F7F7;
$color-grey-3:     #EBEBEB;
$color-line:       #DDDDDD;
$color-body:       #626161;
$color-text-muted: #7A7A7A;
$color-dark-grey:  #3A3A3A;
$color-black-grey: #1D1D1D;
$color-black:      #0A0A0A;

// -------- COLOR · extend · off-white tier --------
$color-offwhite-softest: #FAFAFA;
$color-offwhite-softer:  #F9F9F9;
$color-offwhite-soft:    #F3F3F3;
$color-offwhite-neutral: #F0F0F0;
$color-offwhite-warm:    #E9E9E9;
$color-offwhite-cool:    #E1E1E1;

// -------- COLOR · extend · grey tier --------
$color-grey-lightest: #CBCBCB;
$color-grey-lighter:  #B4B4B4;
$color-grey-light:    #A5A5A5;
$color-grey-midlight: #949494;
$color-grey-mid:      #878787;
$color-grey-midalt:   #858585;
$color-grey-darkmid:  #737373;
$color-grey-darker:   #707070;
$color-grey-dark:     #585858;

// -------- COLOR · extend · dark tier --------
$color-dark-soft:     #575757;
$color-dark-neutral:  #3E3E3E;
$color-dark-neutral2: #3C3C3C;
$color-dark-mid:      #323232;
$color-dark-deep:     #2A2A2A;
$color-dark-deeper:   #292929;
$color-dark-darkest:  #252525;
$color-dark-void:     #232323;

// -------- COLOR · UI specific --------
$color-search-border: #727272;
$color-search-icon:   #5E5D5D;
$color-menu-hover:    #ABABAB;

// -------- COLOR · state --------
$color-error:           #FF2626;
$color-success:         #ff5100;
$color-button-hover-bg: #E6E6E6;
$color-button-hover-text: #3A3A3A;

// -------- SEMANTIC --------
$color-bg:             $color-white;
$color-bg-alt:         $color-off-white;
$color-surface:        $color-white;
$color-surface-inverse:$color-black-grey;
$color-text:           $color-dark-grey;
$color-text-body:      $color-body;
$color-text-muted:     $color-text-muted;
$color-text-inverse:   $color-white;
$color-border:         $color-line;

// -------- TYPOGRAPHY --------
$font-heading: "Bricolage Grotesque", sans-serif;
$font-body:    Urbanist, sans-serif;
$font-accent:  "Playfair Display", serif;

$weight-light:    300;
$weight-regular:  400;
$weight-medium:   500;
$weight-semibold: 600;

$text-h1:     6.3em;
$text-h2:     3.8em;
$text-h3:     2.8em;
$text-h4:     2.3em;
$text-h5:     1.8em;
$text-h6:     1.2em;
$text-body:   1em;
$text-small:  0.875em;
$text-tiny:   0.75em;
$text-hero:   1.3em;
$text-faq:    1.1em;
$text-contact: 1.6em;
$text-count:  3.3em;
$text-footer: 5.7em;
$text-display: 12.9em;
$text-display-404: 16em;
$text-h6-tablet: 1.4em;

$leading-tight:   1;
$leading-snug:    1.1;
$leading-normal:  1.5;
$leading-relaxed: 1.75;

$tracking-tight:  -0.02em;
$tracking-normal: 0;
$tracking-wide:   0.07em;
$tracking-widest: 0.2em;

$style-normal: normal;
$style-italic: italic;

// -------- SPACING --------
$space-0:  0;
$space-1:  4px;
$space-2:  8px;
$space-3:  12px;
$space-4:  16px;
$space-5:  20px;
$space-6:  24px;
$space-8:  32px;
$space-10: 40px;
$space-12: 48px;
$space-16: 64px;
$space-20: 80px;
$space-24: 96px;
$space-32: 128px;
$space-40: 160px;

// -------- BORDER RADIUS --------
$radius-none:   0;
$radius-sm:     4px;
$radius-md:     8px;
$radius-lg:     16px;
$radius-xl:     24px;
$radius-2xl:    32px;
$radius-pill:   9999px;
$radius-circle: 50%;

// -------- BORDER --------
$border-hairline: 1px;
$border-thin:     2px;
$border-thick:    4px;
$border-style:    solid;

// -------- SIZING --------
$container:         1300px;
$container-narrow:  960px;
$container-wide:    1600px;
$button-padding-x:  35px;
$button-padding-y:  19px;

// -------- BREAKPOINTS --------
$bp-xs:  480px;
$bp-sm:  640px;
$bp-md:  768px;
$bp-lg:  1025px;
$bp-xl:  1280px;
$bp-2xl: 1536px;

// -------- SHADOWS (soft) --------
$shadow-none: none;
$shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md:   0 4px 12px -2px rgba(0, 0, 0, 0.08);
$shadow-lg:   0 12px 32px -8px rgba(0, 0, 0, 0.12);

// -------- MOTION --------
$duration-instant: 100ms;
$duration-fast:    200ms;
$duration-base:    300ms;
$duration-slow:    500ms;

$ease-linear: linear;
$ease:        ease;
$ease-in:     cubic-bezier(0.4, 0, 1, 1);
$ease-out:    cubic-bezier(0, 0, 0.2, 1);
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

// -------- MEDIA QUERY mixins --------
@mixin xs  { @media (min-width: $bp-xs)  { @content; } }
@mixin sm  { @media (min-width: $bp-sm)  { @content; } }
@mixin md  { @media (min-width: $bp-md)  { @content; } }
@mixin lg  { @media (min-width: $bp-lg)  { @content; } }
@mixin xl  { @media (min-width: $bp-xl)  { @content; } }
@mixin 2xl { @media (min-width: $bp-2xl) { @content; } }

// -------- UTILITY mixins --------
@mixin container {
  width: 100%;
  max-width: $container;
  margin-inline: auto;
  padding-inline: $space-6;
}

@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $space-2;
  padding: $button-padding-y $button-padding-x;
  border-radius: $radius-pill;
  border: $border-hairline solid $color-line;
  background: $color-black-grey;
  color: $color-white;
  font-family: $font-body;
  font-weight: $weight-medium;
  text-transform: capitalize;
  cursor: pointer;
  transition: background $duration-base $ease-out, color $duration-base $ease-out, border-color $duration-base $ease-out;

  &:hover {
    background: $color-button-hover-bg;
    color: $color-button-hover-text;
    border-color: $color-line;
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}