/**
 * SavvySouq Design Tokens
 * Ported from design prototype styles.css
 */

:root {
  /* Colors */
  --charcoal: #1A1A1A;
  --charcoal-soft: #2A2A2A;
  --charcoal-line: #333;
  --amber: #F5A623;
  --amber-deep: #E09410;
  --bronze: #8B6914;
  --off-white: #FAFAF5;
  --paper: #F3F1E8;
  --muted: #6B6B66;
  --line: #E8E5DA;

  /* Typography */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-arabic: 'Alexandria', 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --maxw: 1440px;
  --pad: 40px;
  --density: 1;
}

/* Font Face Declarations */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alexandria';
  src: url('../fonts/Alexandria-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alexandria';
  src: url('../fonts/Alexandria-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Base Resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--off-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: 15px;
  line-height: 1.55;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

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

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Utility Classes */
.arabic {
  font-family: var(--font-arabic);
  direction: rtl;
  unicode-bidi: isolate;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.amber {
  color: var(--amber);
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}