/* ============================================================================
   BASE Studio / 42 — Design Tokens as CSS Custom Properties
   Extracted from 24 JSONs of the Hello Elementor template
   ============================================================================ */

:root {
  /* -------- COLOR · system (4) -------- */
  --color-system-primary:   #ff5100;
  --color-system-secondary: #54595F;
  --color-system-text:      #7A7A7A;
  --color-system-accent:    #ff5100;

  /* -------- COLOR · neutral (9) -------- */
  --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 (6) -------- */
  --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 (9) -------- */
  --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 (8) -------- */
  --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 (3) -------- */
  --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:             var(--color-white);
  --color-bg-alt:         var(--color-off-white);
  --color-surface:        var(--color-white);
  --color-surface-inverse:var(--color-black-grey);
  --color-text:           var(--color-dark-grey);
  --color-text-body:      var(--color-body);
  --color-text-muted:     var(--color-text-muted);
  --color-text-inverse:   var(--color-white);
  --color-border:         var(--color-line);

  /* -------- TYPOGRAPHY -------- */
  --font-display: "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;

  /* -------- 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);
}