/* ==========================================================================
   N4mation Digital — Design Tokens v2.1 (Slate + Teal)

   Semantic token architecture informed by UI/UX Pro Max skill.
   CSS custom properties for Shopify theme integration.

   Fonts (Google Fonts):
   - Space Grotesk (500, 700)
   - Inter (400, 500, 600)
   - JetBrains Mono (400)
   ========================================================================== */

/* Fonts loaded via <link> tags in theme.liquid for better performance.
   Do not use @import here. */

:root {

  /* -----------------------------------------------------------------------
     COLORS: Slate Scale (Cool Neutral)
     Modern, technical. Cool-toned foundation.
     ----------------------------------------------------------------------- */
  --color-slate-950: #020617;
  --color-slate-900: #0F172A;
  --color-slate-800: #1E293B;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748B;
  --color-slate-400: #94A3B8;
  --color-slate-300: #CBD5E1;
  --color-slate-200: #E2E8F0;
  --color-slate-100: #F1F5F9;
  --color-slate-50:  #F8FAFC;

  /* -----------------------------------------------------------------------
     COLORS: Teal Scale (Accent/Energy)
     Technical, fresh, modern. Brings energy without being loud.
     ----------------------------------------------------------------------- */
  --color-teal-900: #134E4A;
  --color-teal-800: #115E59;
  --color-teal-700: #0F766E;
  --color-teal-600: #0D9488;
  --color-teal-500: #14B8A6;
  --color-teal-400: #2DD4BF;
  --color-teal-300: #5EEAD4;
  --color-teal-200: #99F6E4;
  --color-teal-100: #CCFBF1;
  --color-teal-50:  #F0FDFA;

  /* -----------------------------------------------------------------------
     COLORS: Semantic Roles
     Use these in components, not raw scale values.
     ----------------------------------------------------------------------- */
  --primary:             var(--color-slate-900);
  --on-primary:          #FFFFFF;
  --secondary:           var(--color-teal-700);
  --on-secondary:        #FFFFFF;
  --accent:              var(--color-teal-500);
  --on-accent:           var(--color-slate-900);
  --background:          var(--color-slate-50);
  --foreground:          var(--color-slate-900);
  --card:                #FFFFFF;
  --card-foreground:     var(--color-slate-900);
  --muted:               var(--color-slate-100);
  --muted-foreground:    var(--color-slate-600);
  --border:              var(--color-slate-200);
  --destructive:         #DC2626;
  --on-destructive:      #FFFFFF;
  --success:             #047857;
  --on-success:          #FFFFFF;
  --warning:             #B45309;
  --on-warning:          #FFFFFF;
  --info:                var(--color-teal-700);
  --on-info:             #FFFFFF;
  --ring:                var(--color-teal-700);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY: Font Families
     ----------------------------------------------------------------------- */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY: Scale (Perfect Fourth, 1.333 ratio)
     ----------------------------------------------------------------------- */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.3125rem;   /* 21px */
  --text-2xl:  1.75rem;     /* 28px */
  --text-3xl:  2.375rem;    /* 38px */
  --text-4xl:  3.125rem;    /* 50px */
  --text-5xl:  4.1875rem;   /* 67px */

  /* -----------------------------------------------------------------------
     TYPOGRAPHY: Font Weights
     ----------------------------------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY: Line Heights
     ----------------------------------------------------------------------- */
  --leading-tight:   1.2;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY: Letter Spacing
     ----------------------------------------------------------------------- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY: Max Width
     ----------------------------------------------------------------------- */
  --prose-width: 68ch;

  /* -----------------------------------------------------------------------
     SPACING: 4px base grid
     ----------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* -----------------------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     ELEVATION (Shadows)
     ----------------------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 24px rgba(20, 184, 166, 0.15);

  /* -----------------------------------------------------------------------
     TRANSITIONS & ANIMATION
     ----------------------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:           cubic-bezier(0.55, 0.055, 0.675, 0.19);

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-max: 1440px;

  /* -----------------------------------------------------------------------
     FOCUS RING
     ----------------------------------------------------------------------- */
  --ring-width:  2px;
  --ring-offset: 2px;
  --ring-color:  var(--ring);
  --ring-style:  var(--ring-width) solid var(--ring-color);
}

/* =========================================================================
   COMPONENT TOKENS
   ========================================================================= */

:root {
  /* Buttons: Primary */
  --btn-padding-x:         var(--space-6);
  --btn-padding-y:         var(--space-3);
  --btn-radius:            var(--radius-md);
  --btn-font-size:         var(--text-base);
  --btn-font-weight:       var(--weight-semibold);
  --btn-font-family:       var(--font-body);
  --btn-min-height:        44px;
  --btn-primary-bg:        var(--accent);
  --btn-primary-text:      var(--on-accent);
  --btn-primary-hover:     var(--color-teal-600);
  --btn-primary-active:    var(--color-teal-700);
  --btn-primary-focus-ring: var(--ring-style);

  /* Buttons: Secondary */
  --btn-secondary-bg:        transparent;
  --btn-secondary-text:      var(--secondary);
  --btn-secondary-border:    var(--secondary);
  --btn-secondary-hover-bg:  var(--color-teal-50);
  --btn-secondary-active-bg: var(--color-teal-100);

  /* Buttons: Light (on dark backgrounds) */
  --btn-light-bg:          rgba(255, 255, 255, 0.1);
  --btn-light-text:        #FFFFFF;
  --btn-light-border:      rgba(255, 255, 255, 0.2);
  --btn-light-hover-bg:    rgba(255, 255, 255, 0.2);

  /* Cards */
  --card-bg:      var(--card);
  --card-padding: var(--space-8);
  --card-radius:  var(--radius-lg);
  --card-shadow:  var(--shadow-md);
  --card-border:  1px solid var(--border);

  /* Inputs */
  --input-padding-x:    var(--space-4);
  --input-padding-y:    var(--space-3);
  --input-radius:       var(--radius-md);
  --input-border:       1px solid var(--color-slate-300);
  --input-focus-border: var(--secondary);
  --input-focus-ring:   0 0 0 3px rgba(15, 118, 110, 0.15);
  --input-min-height:   44px;

  /* Sections */
  --section-padding-mobile:  var(--space-12);
  --section-padding-tablet:  var(--space-16);
  --section-padding-desktop: var(--space-20);

  /* Navigation */
  --nav-height: 72px;
  --nav-bg:     var(--card);
  --nav-border: 1px solid var(--border);

  /* Icons (Lucide standard) */
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-stroke:  1.5px;
}

/* =========================================================================
   BASE STYLES
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
}

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

p { max-width: var(--prose-width); }

a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-teal-600); }
a:focus-visible {
  outline: var(--ring-style);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-sm);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
code {
  background-color: var(--muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
pre {
  background-color: var(--primary);
  color: var(--color-slate-100);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
pre code { background: none; padding: 0; border-radius: 0; }

:focus-visible {
  outline: var(--ring-style);
  outline-offset: var(--ring-offset);
}
:focus:not(:focus-visible) { outline: none; }

button, [role="button"], a, select,
input[type="checkbox"], input[type="radio"],
input[type="submit"], label[for] {
  cursor: pointer;
}
button:disabled, [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 10000;
  padding: var(--space-3) var(--space-6);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}