/* ================================================================
   THRIFT Design System — Tokens
   Foundation: variables, reset, typography, base styles.
   All design decisions live here. Change a token, change the app.
   ================================================================ */

/* ── Color Tokens ─────────────────────────────────────────── */
:root {
  /* Neutral scale (warm undertone) */
  --color-white:       #ffffff;
  --color-gray-50:     #f9f8f5;
  --color-gray-100:    #f1efe9;
  --color-gray-200:    #e6e3db;
  --color-gray-300:    #d2cec5;
  --color-gray-400:    #a8a49b;
  --color-gray-500:    #78756c;
  --color-gray-600:    #5a574f;
  --color-gray-700:    #3d3b36;
  --color-gray-800:    #2a2926;
  --color-gray-900:    #1a1917;

  /* Brand accent (forest green — sustainable fashion) */
  --color-accent:       #3a7d44;
  --color-accent-hover: #2d6234;
  --color-accent-light: #e8f5ec;
  --color-accent-50:    #f2faf4;

  /* Semantic */
  --color-success:       #3d9970;
  --color-success-light: #eaf6f0;
  --color-error:         #d64545;
  --color-error-light:   #fdeaea;
  --color-info:          #5b8db8;
  --color-info-light:    #ecf3f9;

  /* ── Applied Aliases ────────────────────────────────────── */
  --bg:               var(--color-gray-50);
  --bg-surface:       var(--color-white);
  --bg-elevated:      var(--color-white);
  --bg-inset:         var(--color-gray-100);
  --bg-overlay:       rgba(26, 25, 23, 0.52);

  --text-primary:     var(--color-gray-900);
  --text-secondary:   var(--color-gray-500);
  --text-tertiary:    var(--color-gray-400);
  --text-inverse:     var(--color-white);
  --text-accent:      var(--color-accent);

  --border:           var(--color-gray-200);
  --border-subtle:    var(--color-gray-100);
  --border-strong:    var(--color-gray-300);
  --border-focus:     var(--color-accent);

  /* ── Spacing (4px grid) ─────────────────────────────────── */
  --space-1:   0.25rem;    /*  4 */
  --space-2:   0.5rem;     /*  8 */
  --space-3:   0.75rem;    /* 12 */
  --space-4:   1rem;       /* 16 */
  --space-5:   1.25rem;    /* 20 */
  --space-6:   1.5rem;     /* 24 */
  --space-7:   2rem;       /* 32 */
  --space-8:   2.5rem;     /* 40 */
  --space-9:   3rem;       /* 48 */
  --space-10:  4rem;       /* 64 */
  --space-11:  5rem;       /* 80 */
  --space-12:  6rem;       /* 96 */

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'Courier New', Courier, monospace;

  --text-xs:    0.6875rem;   /* 11 */
  --text-sm:    0.8125rem;   /* 13 */
  --text-base:  0.9375rem;   /* 15 */
  --text-md:    1rem;        /* 16 */
  --text-lg:    1.125rem;    /* 18 */
  --text-xl:    1.25rem;     /* 20 */
  --text-2xl:   1.5rem;      /* 24 */
  --text-3xl:   2rem;        /* 32 */
  --text-4xl:   2.5rem;      /* 40 */
  --text-5xl:   3.25rem;     /* 52 */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md:    0 2px 4px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:    0 4px 8px rgba(0,0,0,.03), 0 8px 32px rgba(0,0,0,.08);
  --shadow-xl:    0 8px 16px rgba(0,0,0,.04), 0 16px 48px rgba(0,0,0,.10);
  --shadow-glow:  0 0 0 3px var(--color-accent-light);
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,.06);

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  9999px;

  /* ── Transitions ────────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:       0.12s;
  --dur-normal:     0.2s;
  --dur-slow:       0.35s;

  /* ── Layout ─────────────────────────────────────────────── */
  --nav-h:           56px;
  --bottom-nav-h:    60px;
  --content-max:     1280px;
  --content-pad:     var(--space-6);
}

@media (max-width: 700px) {
  :root {
    --content-pad: var(--space-4);
  }
}

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

html {
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }

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

button    { cursor: pointer; }
fieldset  { border: none; }
::selection { background: var(--color-accent-light); color: var(--text-primary); }

/* focus-visible ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Base Typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-xl);  }
h3 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-md);  font-weight: var(--weight-semibold); }

p + p { margin-top: var(--space-4); }

/* ── Layout Shell ─────────────────────────────────────────── */
.main {
  flex: 1;
  padding: var(--space-7) var(--content-pad);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

/* ── Utility Classes ──────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

.text-muted   { color: var(--text-secondary); }
.text-accent  { color: var(--text-accent); }

.text-overline {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}