/* ─────────────────────────────────────────────────────────────
   Droby — Colors & Type
   Personal wardrobe app · warm, calm, mobile-first
   Pulled directly from tailwind.config.js / global.css / app/+html.tsx
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Surfaces (warm, paper-toned) ─────────────────────────── */
  --bg:            #F3EDE6;  /* page background — sand */
  --surface:       #FAF8F5;  /* cards, sheets */
  --surface-alt:   #EFE8DF;  /* segmented controls, thumbnails, chip-fill */

  /* ── Borders ──────────────────────────────────────────────── */
  --border:        #E5DED6;  /* hairlines on surface */
  --border-strong: #D4CCC1;  /* inputs, buttons, chips */

  /* ── Ink (warm neutrals, never pure black) ────────────────── */
  --ink:           #2B2B2B;  /* primary text */
  --ink-soft:      #6E6A66;  /* secondary text */
  --ink-mute:      #9A948D;  /* tertiary text, placeholders */

  /* ── Brand: espresso ──────────────────────────────────────── */
  --primary:       #3B2A23;  /* primary action / active state */
  --primary-dark:  #2E211C;  /* hover / pressed */
  --on-primary:    #FAF8F5;  /* text on espresso */

  /* ── Semantic accents (earthy, not vibrant) ───────────────── */
  --olive:         #7A8C5D;  /* success / wear-positive / "good" */
  --olive-fg:      #4F5F37;  /* olive text on tinted bg */
  --olive-bg:      rgba(122, 140, 93, 0.13);

  --terracotta:    #A66A4A;  /* warning / priority / accent */
  --terracotta-fg: #6E3F24;
  --terracotta-bg: rgba(166, 106, 74, 0.13);

  --error:         #7A3E33;  /* destructive / form errors */

  /* External-link accent (kept distinct from brand — used on Wishlist links) */
  --link:          #3B6BA5;
  --link-bg:       #E8EFF8;
  --link-border:   #C9D9EE;

  /* ── Garment color swatches (curated palette used in pickers) ─ */
  --garment-default: #c9b391;
  --garment-black:   #111111;
  --garment-white:   #f4f1ea;
  --garment-navy:    #1f2a3a;
  --garment-blue:    #3b6ba5;
  --garment-grey:    #888888;
  --garment-beige:   #d9c9a8;
  --garment-camel:   #c6a882;
  --garment-cognac:  #c8742a;
  --garment-brown:   #5c3a22;
  --garment-green:   #4f6d3c;
  --garment-olive:   #7A8C5D;
  --garment-mustard: #d4b93c;
  --garment-red:     #a63e2e;
  --garment-pink:    #d98caa;
  --garment-purple:  #7d5ca3;

  /* ── Type families ────────────────────────────────────────── */
  --font-serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:   'Instrument Sans', -apple-system, system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-xs: 6px;   /* badges */
  --radius-sm: 8px;   /* sub-thumbs, link buttons */
  --radius-md: 10px;  /* thumbnails */
  --radius-lg: 12px;  /* inputs, segmented controls, small buttons */
  --radius-xl: 14px;  /* primary buttons */
  --radius-2xl: 16px; /* cards */
  --radius-3xl: 18px; /* tab bar */
  --radius-4xl: 24px; /* hero cards */
  --radius-pill: 999px;

  /* ── Spacing scale (4-point) ──────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;  /* default screen gutter */
  --space-6:  24px;
  --space-7:  32px;

  /* ── Elevation (very subtle — Droby is a quiet surface) ──── */
  --shadow-flat:  0 1px 0 rgba(43, 43, 43, 0.02);                 /* card */
  --shadow-soft:  0 4px 20px rgba(47, 34, 26, 0.08);              /* tab bar */
  --shadow-lift:  0 -8px 24px rgba(47, 34, 26, 0.08);             /* sticky footer */

  /* ── Motion ──────────────────────────────────────────────── */
  --press-scale: 0.985;
  --press-opacity: 0.85;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────
   Semantic role aliases — use these in components
   ───────────────────────────────────────────────────────────── */

:root {
  --fg1: var(--ink);
  --fg2: var(--ink-soft);
  --fg3: var(--ink-mute);
  --bg1: var(--bg);
  --bg2: var(--surface);
  --bg3: var(--surface-alt);
}

/* ─────────────────────────────────────────────────────────────
   Base type styles — match the React Native screens exactly
   Use as component-class hooks: .h-display, .h1, .body, .label, etc.
   ───────────────────────────────────────────────────────────── */

.h-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.0;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 44px;
  color: var(--ink);
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 36px;
  color: var(--ink);
}

.h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  color: var(--ink);
}

.h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: var(--ink);
}

.h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--ink);
}

.eyebrow {
  /* The "section label" — mono uppercase + tracking, with a dot bullet beside it */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}

.body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.body-xs {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.065px;
  color: var(--ink);
}

.button-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.16px;
}

.badge-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  color: var(--ink);
}

.mono-xs {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ─────────────────────────────────────────────────────────────
   HTML element defaults — semantic mappings
   ───────────────────────────────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1 { font-family: var(--font-serif); font-weight: 500; font-size: 40px; line-height: 44px; }
h2 { font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 36px; }
h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 28px; }
h4 { font-family: var(--font-serif); font-weight: 500; font-size: 18px; line-height: 24px; }
p  { font-family: var(--font-sans);  font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--ink); }
small { font-family: var(--font-sans); font-size: 12px; color: var(--ink-soft); }
code, kbd, pre { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }

::selection { background: rgba(59, 42, 35, 0.13); }