/**
 * base.css — CSS custom properties, reset, Google Fonts, global body styles
 * KnotAF™ Design System Foundation
 */

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* --- Colors --- */
  --cream:   #FAF7F2;
  --cream2:  #FFF8F0;
  --dark:    #1E1410;
  --brown:   #3D2416;
  --mid:     #7A6354;
  --muted:   #B09070;
  --orange:  #C87941;
  --orange2: #E8A97A;
  --border:  #EDE0D4;
  --green:   #4A6E4C;
  --purple:  #4A3875;

  /* Semantic color aliases */
  --color-bg:        var(--cream);
  --color-card:      var(--cream2);
  --color-text:      var(--brown);
  --color-heading:   var(--dark);
  --color-secondary: var(--mid);
  --color-hint:      var(--muted);
  --color-primary:   var(--orange);
  --color-primary-hover: var(--orange2);
  --color-divider:   var(--border);
  --color-success:   var(--green);
  --color-special:   var(--purple);
  --color-error:     #C0392B;
  --color-warning:   #E67E22;

  /* --- Typography --- */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --text-xs:   11px;   /* labels, badges */
  --text-sm:   13px;   /* body small */
  --text-base: 15px;   /* subheadings, UI */
  --text-md:   16px;   /* base font size */
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  46px;
  --text-5xl:  58px;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.12em;

  /* --- Spacing --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 64px;

  /* --- Border Radius --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 4px rgba(30, 20, 16, 0.08);
  --shadow-md:  0 4px 16px rgba(30, 20, 16, 0.10);
  --shadow-lg:  0 8px 32px rgba(30, 20, 16, 0.14);
  --shadow-xl:  0 16px 48px rgba(30, 20, 16, 0.18);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* --- Z-Index Scale --- */
  --z-below:   -1;
  --z-base:     0;
  --z-card:    10;
  --z-sticky:  50;
  --z-nav:    100;
  --z-overlay: 190;
  --z-sheet:   200;
  --z-toast:   300;
  --z-modal:   400;

  /* --- Layout --- */
  --nav-height-mobile:  56px;
  --nav-height-desktop: 64px;
  --bottom-nav-height:  72px;
  --sidebar-width:      240px;
  --content-max-width:  1280px;
  --card-gap:           12px;
}

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

html {
  font-size: var(--text-md);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

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

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */

/* Display */
.text-display-lg {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-display {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-display-sm {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}

/* Headings */
.text-h1 { font-size: var(--text-2xl); font-family: var(--font-serif); line-height: var(--leading-snug); }
.text-h2 { font-size: var(--text-xl); font-family: var(--font-serif); line-height: var(--leading-snug); }
.text-h3 { font-size: var(--text-lg); font-family: var(--font-sans); font-weight: 600; line-height: var(--leading-snug); }

/* Body */
.text-lg   { font-size: var(--text-lg); }
.text-base { font-size: var(--text-base); }
.text-sm   { font-size: var(--text-sm); }
.text-xs   { font-size: var(--text-xs); }

/* Utility */
.text-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.text-price {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.font-serif { font-family: var(--font-serif); }
.font-sans  { font-family: var(--font-sans); }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

.text-dark    { color: var(--dark); }
.text-brown   { color: var(--brown); }
.text-mid     { color: var(--mid); }
.text-muted   { color: var(--muted); }
.text-orange  { color: var(--orange); }
.text-green   { color: var(--green); }
.text-white   { color: #fff; }

/* ============================================================
   GLOBAL UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

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

.hidden { display: none !important; }
.invisible { visibility: hidden; }

/* Flex utilities */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* Grid utilities */
.grid { display: grid; }

/* Spacing utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ============================================================
   SELECTION
   ============================================================ */
::selection { background: var(--orange2); color: var(--dark); }

/* ============================================================
   FOCUS STYLES
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   BREAKPOINT REFERENCE (for JS use)
   Mobile:   < 480px    — 2-col grid, bottom nav visible
   Mobile L: 480–767px  — 3-col grid, bottom nav visible
   Tablet:   768–1023px — 4-col grid, top nav links, no bottom nav
   Desktop:  ≥ 1024px   — 4-col + float cards, full hero
   ============================================================ */