/* ==========================================================================
   704 Diesel & Welding Services — base.css
   7-Layer Design Token System + Reset + Typography + Scrollbar + Utilities
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;800&family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   :ROOT — ALL 7 LAYERS
   ========================================================================== */
:root {

  /* -------------------------------------------------------------------------
     LAYER 1 — COLOR
     Raw primitives (never use directly in components)
     --------------------------------------------------------------------- */
  --raw-primary:          #000000;
  --raw-primary-light:    #333333;
  --raw-primary-dark:     #000000;
  --raw-secondary:        #ffffff;
  --raw-secondary-light:  #f5f5f5;
  --raw-secondary-dark:   #e0e0e0;
  --raw-accent:           #3bf7d1;

  /* Neutral scale */
  --raw-neutral-50:       #fafafa;
  --raw-neutral-100:      #f5f5f5;
  --raw-neutral-200:      #e5e5e5;
  --raw-neutral-300:      #d4d4d4;
  --raw-neutral-400:      #a3a3a3;
  --raw-neutral-500:      #737373;
  --raw-neutral-600:      #525252;
  --raw-neutral-700:      #404040;
  --raw-neutral-800:      #262626;
  --raw-neutral-900:      #171717;
  --raw-neutral-950:      #0a0a0a;

  /* Semantic aliases — components use ONLY these */
  --color-primary:              var(--raw-primary);
  --color-primary-light:        var(--raw-primary-light);
  --color-primary-dark:         var(--raw-primary-dark);
  --color-secondary:            var(--raw-secondary);
  --color-secondary-light:      var(--raw-secondary-light);
  --color-secondary-dark:       var(--raw-secondary-dark);
  --color-accent:               var(--raw-accent);

  /* Backgrounds */
  --color-bg:             #ffffff;
  --color-bg-secondary:   #f5f5f5;
  --color-bg-surface:     #ffffff;
  --color-bg-elevated:    #f9f9f9;
  --color-bg-overlay:     rgba(0, 0, 0, 0.6);
  --color-bg-rgb:         255, 255, 255; /* MUST be R,G,B for rgba() usage */

  /* Text */
  --color-text:             #111111;
  --color-text-secondary:   #444444;
  --color-text-muted:       #777777;
  --color-text-on-dark:     #ffffff;
  --color-text-on-light:    #111111;
  --color-text-on-primary:  #ffffff;
  --color-text-link:        var(--color-accent);
  --color-text-link-hover:  #1fd4b0;

  /* Borders */
  --color-border:           #e0e0e0;
  --color-border-strong:    #999999;
  --color-focus-ring:       var(--color-accent);

  /* Status colors */
  --color-success:  #16a34a;
  --color-warning:  #d97706;
  --color-error:    #dc2626;
  --color-info:     #2563eb;

  /* Neutral semantic aliases */
  --color-neutral-50:   var(--raw-neutral-50);
  --color-neutral-100:  var(--raw-neutral-100);
  --color-neutral-200:  var(--raw-neutral-200);
  --color-neutral-300:  var(--raw-neutral-300);
  --color-neutral-400:  var(--raw-neutral-400);
  --color-neutral-500:  var(--raw-neutral-500);
  --color-neutral-600:  var(--raw-neutral-600);
  --color-neutral-700:  var(--raw-neutral-700);
  --color-neutral-800:  var(--raw-neutral-800);
  --color-neutral-900:  var(--raw-neutral-900);
  --color-neutral-950:  var(--raw-neutral-950);

  /* -------------------------------------------------------------------------
     LAYER 2 — TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Font size scale */
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-5xl:  3rem;       /* 48px */
  --font-size-6xl:  3.75rem;    /* 60px */
  --font-size-7xl:  4.5rem;     /* 72px */

  /* Font weights */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Line heights */
  --line-height-none:    1;
  --line-height-tight:   1.15;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:   2;

  /* Letter spacings */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight:   -0.025em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.025em;
  --letter-spacing-wider:    0.05em;
  --letter-spacing-widest:   0.1em;

  /* -------------------------------------------------------------------------
     LAYER 3 — SPACING (base-4 mathematical scale)
     --------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* -------------------------------------------------------------------------
     LAYER 4 — LAYOUT
     --------------------------------------------------------------------- */
  --container-max-width: 1200px;
  --container-padding:   var(--space-6);
  --navbar-height:       72px;
  --header-height:       72px;
  --grid-gutter:         var(--space-6);
  --sidebar-width:       280px;

  /* Z-index scale */
  --z-base:            1;
  --z-sticky:          50;
  --z-backdrop:        80;
  --z-drawer:          90;
  --z-dropdown:        100;
  --z-modal-backdrop:  190;
  --z-modal:           200;
  --z-toast:           300;

  /* -------------------------------------------------------------------------
     LAYER 5 — SHAPE (radius + shadow + border)
     --------------------------------------------------------------------- */

  /* Border radius */
  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent);

  /* Border */
  --border-width: 1px;
  --border-color: var(--color-border);

  /* -------------------------------------------------------------------------
     LAYER 6 — MOTION (duration + easing)
     --------------------------------------------------------------------- */
  --duration-instant:  75ms;
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-moderate: 350ms;
  --duration-slow:     500ms;
  --duration-slower:   700ms;

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --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);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:   cubic-bezier(0.19, 1, 0.22, 1);

  /* -------------------------------------------------------------------------
     LAYER 7 — COMPONENT TOKENS (scoped aliases referencing globals)
     --------------------------------------------------------------------- */

  /* Buttons */
  --btn-padding-y:       var(--space-3);
  --btn-padding-x:       var(--space-6);
  --btn-sm-padding-y:    var(--space-2);
  --btn-sm-padding-x:    var(--space-4);
  --btn-lg-padding-y:    var(--space-4);
  --btn-lg-padding-x:    var(--space-8);
  --btn-radius:          var(--radius-md);
  --btn-font-size:       var(--font-size-base);
  --btn-font-weight:     var(--font-weight-semibold);

  /* Cards */
  --card-padding:       var(--space-6);
  --card-radius:        var(--radius-lg);
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-lg);
  --card-bg:            var(--color-bg-surface);
  --card-border:        var(--border-width) solid var(--color-border);

  /* Badges */
  --badge-padding-y:    var(--space-1);
  --badge-padding-x:    var(--space-3);
  --badge-radius:       var(--radius-full);
  --badge-font-size:    var(--font-size-xs);
  --badge-font-weight:  var(--font-weight-semibold);

  /* Inputs */
  --input-height:     2.75rem;
  --input-padding-x:  var(--space-4);
  --input-radius:     var(--radius-md);
  --input-border:     var(--border-width) solid var(--color-border);
  --input-bg:         var(--color-bg);
  --input-focus-ring: var(--shadow-focus-ring);

  /* Sections */
  --section-padding-y: var(--space-20);
  --section-padding-x: var(--space-6);

  /* Nav */
  --nav-link-padding:    var(--space-2) var(--space-4);
  --nav-link-font-size:  var(--font-size-sm);

  /* Section dividers */
  --divider-height:         60px;
  --divider-color:          var(--color-bg);
  --divider-accent-color:   var(--color-bg-secondary);

  /* Accent elements */
  --accent-line-width:   60px;
  --accent-line-height:  3px;
  --accent-line-color:   var(--color-accent);
  --accent-line-radius:  var(--radius-full);

  /* Image presentation */
  --img-radius:         var(--radius-lg);
  --img-radius-avatar:  var(--radius-full);

  /* Decorative blobs / glows */
  --blob-opacity:   0.08;
  --blob-size:      400px;
  --blob-color-1:   var(--color-primary);
  --blob-color-2:   var(--color-accent);
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-height-normal);
  padding-top: var(--header-height); /* Offset for fixed header */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

a:hover {
  color: var(--color-text-link-hover);
}

ul,
ol {
  list-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   TYPOGRAPHY BASE
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
  margin-bottom: var(--space-4);
  line-height: var(--line-height-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--font-size-sm);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

pre {
  overflow-x: auto;
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Responsive typography scaling */
@media (max-width: 768px) {
  h1 { font-size: clamp(var(--font-size-3xl), 8vw, var(--font-size-5xl)); }
  h2 { font-size: clamp(var(--font-size-2xl), 6vw, var(--font-size-4xl)); }
  h3 { font-size: clamp(var(--font-size-xl), 5vw, var(--font-size-3xl)); }
}

/* ==========================================================================
   CUSTOM SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-neutral-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-700);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-400) var(--color-neutral-100);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Screen reader / accessibility */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Display utilities */
.hidden         { display: none !important; }
.block          { display: block; }
.inline-block   { display: inline-block; }
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.grid           { display: grid; }

/* Flex helpers */
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.gap-4          { gap: var(--space-4); }
.gap-6          { gap: var(--space-6); }
.gap-8          { gap: var(--space-8); }

/* Spacing utilities */
.mt-auto        { margin-top: auto; }
.mx-auto        { margin-left: auto; margin-right: auto; }

/* Width utilities */
.w-full         { width: 100%; }
.max-w-full     { max-width: 100%; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Position */
.relative       { position: relative; }
.absolute       { position: absolute; }
.fixed          { position: fixed; }
.sticky         { position: sticky; }
.inset-0        { inset: 0; }

/* Z-index helpers */
.z-0  { z-index: 0; }
.z-1  { z-index: var(--z-base); }
.z-10 { z-index: 10; }

/* Pointer events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Icon size helpers (Lucide) */
.w-4  { width: 1rem;  height: 1rem; }
.w-5  { width: 1.25rem; height: 1.25rem; }
.w-6  { width: 1.5rem;  height: 1.5rem; }
.w-8  { width: 2rem;    height: 2rem; }
.w-10 { width: 2.5rem;  height: 2.5rem; }
.w-12 { width: 3rem;    height: 3rem; }

/* Color utilities */
.text-accent        { color: var(--color-accent); }
.text-primary       { color: var(--color-primary); }
.text-muted         { color: var(--color-text-muted); }
.text-on-dark       { color: var(--color-text-on-dark); }
.bg-primary         { background-color: var(--color-primary); }
.bg-accent          { background-color: var(--color-accent); }
.bg-surface         { background-color: var(--color-bg-surface); }
.bg-secondary       { background-color: var(--color-bg-secondary); }

/* Focus outline reset (handled by component focus-visible) */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}