/* ==========================================================================
   THE SECONDHAND MARKET — DESIGN TOKENS
   The foundational design system. All colors, typography, spacing,
   motion and elevation live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   Loaded from Google Fonts. Editorial serif for display + neutral sans for UI.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   LIGHT THEME (default)
   -------------------------------------------------------------------------- */

:root {
  /* ----- Core palette ----- */
  --ink-950:            #0E0E0D;   /* pure ink */
  --ink-900:            #141414;   /* primary text / brand black */
  --ink-800:            #1F1F1E;
  --ink-700:            #2A2A28;
  --ink-600:            #3D3D3A;
  --ink-500:            #5C5C58;
  --ink-400:            #8A8A83;
  --ink-300:            #B5B5AE;
  --ink-200:            #D7D6CE;
  --ink-100:            #EAE9E1;
  --ink-50:             #F4F1EA;   /* ivory — canvas */
  --ink-25:             #F9F7F1;   /* lightest surface */
  --paper:              #FFFFFF;

  /* ----- Accent (burnt amber — the ONLY brand accent) ----- */
  --amber-900:          #7A280A;
  --amber-800:          #93310D;
  --amber-700:          #A63A10;
  --amber-600:          #C2410C;   /* primary accent */
  --amber-500:          #D95816;
  --amber-400:          #E97438;
  --amber-100:          #FBE4D3;
  --amber-50:           #FDF1E7;

  /* ----- Support (used sparingly, for status only) ----- */
  --green-600:          #2F7A4F;
  --green-100:          #DCEDE1;
  --red-600:            #B4342A;
  --red-100:            #F5DDD9;
  --blue-600:           #2A5A9E;
  --blue-100:           #DAE6F5;
  --amber-status:       #A67C10;
  --amber-status-bg:    #FBEEC5;

  /* ----- Semantic surfaces ----- */
  --bg-canvas:          var(--ink-50);
  --bg-surface:         var(--paper);
  --bg-surface-alt:     var(--ink-25);
  --bg-sunken:          var(--ink-100);
  --bg-inverse:         var(--ink-900);

  /* ----- Semantic text ----- */
  --text-primary:       var(--ink-900);
  --text-secondary:     var(--ink-600);
  --text-tertiary:      var(--ink-500);
  --text-muted:         var(--ink-400);
  --text-inverse:       var(--ink-50);
  --text-on-accent:     var(--paper);
  --text-link:          var(--ink-900);
  --text-accent:        var(--amber-600);

  /* ----- Borders ----- */
  --border-hairline:    var(--ink-200);
  --border-default:     var(--ink-300);
  --border-strong:      var(--ink-900);
  --border-inverse:     var(--ink-100);

  /* ----- Focus ring ----- */
  --focus-ring:         2px solid var(--amber-600);
  --focus-offset:       2px;

  /* ----- Shadows (used minimally, editorial style) ----- */
  --shadow-hairline:    0 0 0 1px var(--ink-200);
  --shadow-sm:          0 1px 2px rgba(20,20,20,0.04);
  --shadow-md:          0 4px 12px rgba(20,20,20,0.06), 0 1px 2px rgba(20,20,20,0.04);
  --shadow-lg:          0 12px 32px rgba(20,20,20,0.08), 0 2px 6px rgba(20,20,20,0.04);
  --shadow-focus:       0 0 0 3px rgba(194,65,12,0.20);

  /* ----- Radii (kept restrained — not a rounded-corner brand) ----- */
  --radius-none:        0;
  --radius-xs:          2px;
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          10px;
  --radius-pill:        999px;

  /* ----- Spacing scale (based on 4px) ----- */
  --space-0:            0;
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            20px;
  --space-6:            24px;
  --space-7:            32px;
  --space-8:            40px;
  --space-9:            48px;
  --space-10:           64px;
  --space-11:           80px;
  --space-12:           96px;
  --space-13:           128px;
  --space-14:           160px;

  /* ----- Layout ----- */
  --container-max:      1360px;
  --container-narrow:   960px;
  --container-reading:  680px;
  --gutter:             24px;
  --gutter-mobile:      16px;
  --rail-width:         56px;         /* left brand rail on desktop */
  --header-height:      68px;

  /* ----- Typography ----- */
  --font-display:       'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid display sizes (clamp for responsive) */
  --fs-display-xl:      clamp(3.25rem, 6.5vw, 5.75rem);   /* hero */
  --fs-display-lg:      clamp(2.5rem, 4.5vw, 4rem);       /* major section */
  --fs-display-md:      clamp(2rem, 3.2vw, 2.75rem);      /* section */
  --fs-display-sm:      clamp(1.5rem, 2.4vw, 2rem);       /* card headline */

  /* UI text scale */
  --fs-xs:              0.75rem;      /* 12px */
  --fs-sm:              0.8125rem;    /* 13px — meta */
  --fs-base:            0.9375rem;    /* 15px — body */
  --fs-md:              1rem;         /* 16px */
  --fs-lg:              1.125rem;     /* 18px */
  --fs-xl:              1.25rem;      /* 20px */
  --fs-2xl:             1.5rem;       /* 24px */

  /* Numeric / price scale (using tabular figures) */
  --fs-price-sm:        1rem;
  --fs-price-md:        1.375rem;
  --fs-price-lg:        1.875rem;
  --fs-price-xl:        2.5rem;

  /* Line heights */
  --lh-tight:           1.05;
  --lh-snug:            1.2;
  --lh-normal:          1.5;
  --lh-relaxed:         1.65;

  /* Letter spacing */
  --ls-tight:           -0.02em;
  --ls-normal:          0;
  --ls-wide:            0.04em;
  --ls-eyebrow:         0.14em;

  /* Weights */
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-display:         600;

  /* ----- Motion ----- */
  --ease-standard:      cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis:      cubic-bezier(0.3, 0, 0, 1);
  --ease-exit:          cubic-bezier(0.4, 0, 1, 1);
  --dur-instant:        80ms;
  --dur-quick:          160ms;
  --dur-base:           240ms;
  --dur-slow:           380ms;
  --dur-emphasis:       520ms;

  /* ----- Z-index scale ----- */
  --z-base:             1;
  --z-raised:           10;
  --z-sticky:           100;
  --z-header:           200;
  --z-drawer:           300;
  --z-modal:            400;
  --z-toast:            500;
  --z-tooltip:          600;
}

/* --------------------------------------------------------------------------
   DARK THEME
   Applied via [data-theme="dark"] on <html>.
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --bg-canvas:          #0F0F0E;
  --bg-surface:         #171716;
  --bg-surface-alt:     #1D1D1B;
  --bg-sunken:          #0A0A09;
  --bg-inverse:         var(--ink-50);

  --text-primary:       #F1EFE8;
  --text-secondary:     #B8B6AD;
  --text-tertiary:      #94928A;
  --text-muted:         #6D6B64;
  --text-inverse:       var(--ink-900);
  --text-on-accent:     #FFFFFF;
  --text-link:          #F1EFE8;
  --text-accent:        #E97438;

  --border-hairline:    #2A2A28;
  --border-default:     #3A3A37;
  --border-strong:      #F1EFE8;
  --border-inverse:     var(--ink-800);

  --shadow-hairline:    0 0 0 1px #2A2A28;
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg:          0 12px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-focus:       0 0 0 3px rgba(233,116,56,0.25);

  --amber-100:          #3A1D0D;
  --amber-50:           #2A1508;

  --green-100:          #12331E;
  --red-100:            #3A1A16;
  --blue-100:           #16294A;
  --amber-status-bg:    #3A2E0C;
}

/* --------------------------------------------------------------------------
   THEME TRANSITIONS
   Gentle color transition when switching modes.
   -------------------------------------------------------------------------- */

html {
  transition:
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}

html *,
html *::before,
html *::after {
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    fill var(--dur-base) var(--ease-standard),
    stroke var(--dur-base) var(--ease-standard);
}

/* Suppress transitions during initial page load to avoid flash */
html.no-transitions,
html.no-transitions *,
html.no-transitions *::before,
html.no-transitions *::after {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}