/* ============================================================
   NexStore — Colors & Type
   Source: index.html (Tailwind config + CSS), login.html
   Brand: Malaysian design studio building bespoke storefronts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ───── Brand color: Terra (terracotta) ───── */
  --terra-50:  #FBF3EC;
  --terra-100: #F6E2D1;
  --terra-200: #ECC2A0;
  --terra-300: #DD9E6E;
  --terra-400: #CC7A44;
  --terra-500: #B8451F;   /* primary */
  --terra-600: #9A3412;
  --terra-700: #7C2A0F;
  --terra-800: #5E1F0B;
  --terra-900: #3F1507;

  /* ───── Ink (warm near-black text) ───── */
  --ink:       #1A1412;
  --ink-soft:  #3A2F2A;
  --ink-muted: #7A6F68;
  --ink-faint: #C9BEB4;

  /* ───── Canvas (warm off-white surfaces) ───── */
  --canvas:      #FBF7F1;
  --canvas-soft: #F3EADC;
  --canvas-deep: #141010;

  /* ───── Accent ───── */
  --moss-500: #3F5E3F;
  --moss-600: #2F4A2F;

  /* ───── Semantic foreground / background ───── */
  --fg1: var(--ink);          /* primary text */
  --fg2: var(--ink-soft);     /* secondary text */
  --fg3: var(--ink-muted);    /* tertiary / labels */
  --fg4: var(--ink-faint);    /* dividers / disabled */

  --bg1: var(--canvas);       /* page background */
  --bg2: var(--canvas-soft);  /* raised surface */
  --bg3: var(--canvas-deep);  /* dark section */

  --accent:       var(--terra-500);
  --accent-hover: var(--terra-600);
  --accent-soft:  var(--terra-300);

  --border:       rgba(26, 20, 18, 0.10);   /* ink/10 */
  --border-soft:  rgba(26, 20, 18, 0.08);   /* ink/8  */

  /* ───── Type families ───── */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;
  /* Seller dashboard uses Inter — kept separate. */
  --font-app:     'Inter', system-ui, sans-serif;

  /* ───── Radii ───── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-card: 20px;     /* 1.25rem */
  --radius-pill: 9999px;

  /* ───── Shadows (warm, low-contrast) ───── */
  --shadow-warm-sm: 0 2px 8px -2px rgb(26 20 18 / 0.06);
  --shadow-warm-md: 0 10px 28px -10px rgb(26 20 18 / 0.12);
  --shadow-warm-lg: 0 24px 56px -20px rgb(26 20 18 / 0.22);
  --shadow-warm-xl: 0 40px 80px -30px rgb(26 20 18 / 0.45);

  /* ───── Spacing scale (px) ───── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ───── Motion ───── */
  --ease-soft:   cubic-bezier(.16, 1, .3, 1);
  --ease-out:    cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   200ms;
  --dur-med:    400ms;
  --dur-slow:   900ms;
}

/* ============================================================
   Base
   ============================================================ */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg1);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01";
}
::selection { background: var(--accent); color: var(--canvas); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Display / Editorial type — fluid, optical-size aware Fraunces
   Use for hero, section headers, quotes.
   ============================================================ */
.display-xl,
.display-lg,
.display-md,
.display-sm,
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display-xl  { font-weight: 400; font-size: clamp(3.25rem, 9vw + 0.5rem, 8rem);    line-height: 0.94; letter-spacing: -0.035em; font-variation-settings: "opsz" 144; }
.display-lg  { font-weight: 400; font-size: clamp(2.25rem, 5vw + 0.5rem, 4.75rem); line-height: 1.0;  letter-spacing: -0.025em; font-variation-settings: "opsz" 120; }
.display-md  { font-weight: 500; font-size: clamp(1.875rem, 3vw + 0.5rem, 3rem);   line-height: 1.1;  letter-spacing: -0.02em;  font-variation-settings: "opsz" 72; }
.display-sm  { font-weight: 500; font-size: clamp(1.5rem, 2vw + 0.5rem, 2.125rem); line-height: 1.15; letter-spacing: -0.015em; }

h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); font-weight: 400; line-height: 1.0; }
h2 { font-size: clamp(2rem, 3vw, 3rem);      font-weight: 500; line-height: 1.1; }
h3 { font-size: 1.5rem;                       font-weight: 500; line-height: 1.2; }

/* Signature italic — soft + light, uses Fraunces SOFT axis */
.italic-soft {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
}

/* ============================================================
   Body / UI type — DM Sans
   ============================================================ */
p, li, label, input, button, select, textarea {
  font-family: var(--font-body);
}

.body-lg { font-size: 1.125rem; line-height: 1.6; color: var(--fg2); }   /* 18 */
.body-md { font-size: 1rem;     line-height: 1.6; color: var(--fg2); }   /* 16 */
.body-sm { font-size: 0.875rem; line-height: 1.55; color: var(--fg2); }  /* 14 */
.body-xs { font-size: 0.75rem;  line-height: 1.5;  color: var(--fg3); }  /* 12 */

/* Editorial labels — small caps, wide tracking */
.eyebrow,
.meta-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--fg3);
}

/* Mega numeral — used in hero ("Yours.") */
.hero-number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(11rem, 26vw, 26rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-variation-settings: "opsz" 144;
  color: var(--terra-500);
}

/* Utility */
.balanced { text-wrap: balance; }
.pretty   { text-wrap: pretty; }

/* Underline link — wipes from left to right on hover */
.link-u {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .5s var(--ease-soft);
}
.link-u:hover { background-size: 0 1px; background-position: 100% 100%; }

/* Grain overlay — used on dark sections + key cards */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .4;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.grain > * { position: relative; z-index: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}