/* =========================================================================
   Student Handicrafts — Design Tokens
   Modern B2B exporter, Nepali handicrafts wholesale.
   Cool gray neutrals + restrained heritage accents pulled from the logo.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* -----------------------------------------------------------------------
     COLOR — Cool gray neutrals (the workhorse)
     ----------------------------------------------------------------------- */
  --sh-ink-950: #0B1012;
  --sh-ink-900: #141A1D;
  --sh-ink-800: #1F2629;
  --sh-ink-700: #2E373B;
  --sh-ink-600: #485256;
  --sh-ink-500: #6A7478;
  --sh-ink-400: #8C9599;
  --sh-ink-300: #B4BBBE;
  --sh-ink-200: #D5DADC;
  --sh-ink-150: #E4E7E8;
  --sh-ink-100: #EEF0F1;
  --sh-ink-75:  #F4F5F6;
  --sh-ink-50:  #F9FAFA;
  --sh-paper:   #FDFCFA;
  --sh-white:   #FFFFFF;

  /* -----------------------------------------------------------------------
     COLOR — Brand accents (from the logo)
     ----------------------------------------------------------------------- */
  --sh-teal-900: #0A4F4F;
  --sh-teal-800: #0E6B6B;
  --sh-teal-700: #128585;
  --sh-teal-600: #1A9C9C;
  --sh-teal-500: #2EB5B5;
  --sh-teal-100: #D7EDED;
  --sh-teal-50:  #EEF7F7;

  --sh-sand-900: #5C4A1F;
  --sh-sand-800: #806830;
  --sh-sand-700: #A18544;
  --sh-sand-600: #C8B380;
  --sh-sand-400: #D9C79E;
  --sh-sand-200: #ECE0C4;
  --sh-sand-100: #F5EDD9;
  --sh-sand-50:  #FBF7EC;

  /* -----------------------------------------------------------------------
     COLOR — Semantic
     ----------------------------------------------------------------------- */
  --sh-success-600: #2F7D4F;
  --sh-success-100: #E2F1E9;
  --sh-warning-600: #B7791F;
  --sh-warning-100: #FBEEC9;
  --sh-danger-600:  #B23A3A;
  --sh-danger-100:  #F5DCDC;
  --sh-info-600:    #2F6BB7;
  --sh-info-100:    #E1EBF6;

  /* -----------------------------------------------------------------------
     TYPE
     ----------------------------------------------------------------------- */
  --sh-font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sh-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sh-font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  --sh-fs-xs:    11px;   --sh-lh-xs:   16px;
  --sh-fs-sm:    13px;   --sh-lh-sm:   20px;
  --sh-fs-base:  15px;   --sh-lh-base: 24px;
  --sh-fs-md:    17px;   --sh-lh-md:   26px;
  --sh-fs-lg:    20px;   --sh-lh-lg:   28px;
  --sh-fs-xl:    24px;   --sh-lh-xl:   32px;
  --sh-fs-2xl:   32px;   --sh-lh-2xl:  40px;
  --sh-fs-3xl:   44px;   --sh-lh-3xl:  52px;
  --sh-fs-4xl:   60px;   --sh-lh-4xl:  64px;

  --sh-fw-light:    300;
  --sh-fw-regular:  400;
  --sh-fw-medium:   500;
  --sh-fw-semi:     600;
  --sh-fw-bold:     700;

  --sh-tr-tight:  -0.02em;
  --sh-tr-snug:   -0.01em;
  --sh-tr-normal:  0;
  --sh-tr-wide:    0.02em;
  --sh-tr-eyebrow: 0.12em;

  /* -----------------------------------------------------------------------
     SPACING — 4px base
     ----------------------------------------------------------------------- */
  --sh-s-0:   0;
  --sh-s-1:   4px;
  --sh-s-2:   8px;
  --sh-s-3:   12px;
  --sh-s-4:   16px;
  --sh-s-5:   20px;
  --sh-s-6:   24px;
  --sh-s-8:   32px;
  --sh-s-10:  40px;
  --sh-s-12:  48px;
  --sh-s-16:  64px;
  --sh-s-20:  80px;
  --sh-s-24:  96px;
  --sh-s-32:  128px;

  --sh-container: 1280px;
  --sh-container-narrow: 960px;
  --sh-container-wide: 1440px;
  --sh-gutter: 24px;

  /* -----------------------------------------------------------------------
     RADIUS
     ----------------------------------------------------------------------- */
  --sh-r-none: 0;
  --sh-r-xs:   2px;
  --sh-r-sm:   4px;
  --sh-r-md:   6px;
  --sh-r-lg:   10px;
  --sh-r-pill: 999px;

  /* -----------------------------------------------------------------------
     SHADOW
     ----------------------------------------------------------------------- */
  --sh-shadow-xs: 0 1px 1px rgba(11,16,18,0.04);
  --sh-shadow-sm: 0 1px 2px rgba(11,16,18,0.06), 0 1px 3px rgba(11,16,18,0.04);
  --sh-shadow-md: 0 4px 6px rgba(11,16,18,0.05), 0 2px 4px rgba(11,16,18,0.04);
  --sh-shadow-lg: 0 10px 20px rgba(11,16,18,0.08), 0 4px 8px rgba(11,16,18,0.04);
  --sh-shadow-focus: 0 0 0 3px rgba(26, 156, 156, 0.25);

  /* -----------------------------------------------------------------------
     BORDER
     ----------------------------------------------------------------------- */
  --sh-border: 1px solid var(--sh-ink-200);
  --sh-border-strong: 1px solid var(--sh-ink-300);
  --sh-border-subtle: 1px solid var(--sh-ink-150);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --sh-dur-quick:  120ms;
  --sh-dur-base:   200ms;
  --sh-dur-slow:   320ms;
  --sh-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);

  /* -----------------------------------------------------------------------
     Z
     ----------------------------------------------------------------------- */
  --sh-z-base: 1;
  --sh-z-sticky: 10;
  --sh-z-overlay: 100;
  --sh-z-modal: 1000;
  --sh-z-toast: 2000;
}

/* =========================================================================
   BASE RESET — scoped to .sh
   ========================================================================= */
.sh, .sh * { box-sizing: border-box; }
.sh {
  font-family: var(--sh-font-sans);
  font-size: var(--sh-fs-base);
  line-height: var(--sh-lh-base);
  color: var(--sh-ink-900);
  background: var(--sh-paper);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.sh h1, .sh h2, .sh h3, .sh h4, .sh h5, .sh h6, .sh p { margin: 0; }
.sh img { max-width: 100%; display: block; }
.sh a { color: var(--sh-teal-700); text-decoration: none; }
.sh a:hover { color: var(--sh-teal-900); text-decoration: underline; text-underline-offset: 3px; }
.sh button { font-family: inherit; font-size: inherit; }

/* =========================================================================
   UTILITIES
   ========================================================================= */
.sh-container      { max-width: var(--sh-container); margin: 0 auto; padding: 0 var(--sh-gutter); }
.sh-container-wide { max-width: var(--sh-container-wide); margin: 0 auto; padding: 0 var(--sh-gutter); }
.sh-container-narrow { max-width: var(--sh-container-narrow); margin: 0 auto; padding: 0 var(--sh-gutter); }

@media (max-width: 480px) {
  :root { --sh-gutter: 16px; }
}

.sh-eyebrow {
  font-family: var(--sh-font-mono);
  font-size: var(--sh-fs-xs);
  line-height: var(--sh-lh-xs);
  letter-spacing: var(--sh-tr-eyebrow);
  text-transform: uppercase;
  color: var(--sh-ink-500);
  font-weight: var(--sh-fw-medium);
}

.sh-display {
  font-size: var(--sh-fs-4xl);
  line-height: var(--sh-lh-4xl);
  letter-spacing: var(--sh-tr-tight);
  font-weight: var(--sh-fw-semi);
  color: var(--sh-ink-950);
}
.sh-h1 { font-size: var(--sh-fs-3xl); line-height: var(--sh-lh-3xl); letter-spacing: var(--sh-tr-snug); font-weight: var(--sh-fw-semi); color: var(--sh-ink-950); }
.sh-h2 { font-size: var(--sh-fs-2xl); line-height: var(--sh-lh-2xl); letter-spacing: var(--sh-tr-snug); font-weight: var(--sh-fw-semi); color: var(--sh-ink-950); }
.sh-h3 { font-size: var(--sh-fs-xl);  line-height: var(--sh-lh-xl);  font-weight: var(--sh-fw-semi); color: var(--sh-ink-950); }
.sh-h4 { font-size: var(--sh-fs-lg);  line-height: var(--sh-lh-lg);  font-weight: var(--sh-fw-semi); color: var(--sh-ink-950); }
.sh-lede { font-size: var(--sh-fs-md); line-height: var(--sh-lh-md); color: var(--sh-ink-600); max-width: 62ch; }
.sh-body { font-size: var(--sh-fs-base); line-height: var(--sh-lh-base); color: var(--sh-ink-700); }
.sh-body-sm { font-size: var(--sh-fs-sm); line-height: var(--sh-lh-sm); color: var(--sh-ink-600); }
.sh-muted { color: var(--sh-ink-500); }
.sh-mono  { font-family: var(--sh-font-mono); font-size: 0.95em; }
.sh-sku   { font-family: var(--sh-font-mono); font-size: var(--sh-fs-xs); letter-spacing: 0.04em; color: var(--sh-ink-500); text-transform: uppercase; }

.sh-paper-grain {
  background-color: var(--sh-paper);
  background-image:
    radial-gradient(rgba(11,16,18,0.018) 1px, transparent 1px),
    radial-gradient(rgba(11,16,18,0.012) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

.sh-motif-stripe {
  height: 1px;
  background: var(--sh-ink-200);
}
.sh-motif-rule {
  display: flex; align-items: center; gap: 12px;
  color: var(--sh-sand-700);
  font-family: var(--sh-font-mono);
  font-size: var(--sh-fs-xs);
  letter-spacing: var(--sh-tr-eyebrow);
  text-transform: uppercase;
}
.sh-motif-rule::before, .sh-motif-rule::after {
  content: ""; flex: 1; height: 1px;
  background: var(--sh-ink-200);
}