/* =============================================================================
   tokens.css  --  NIGHT CLOTHING / SINGLE SOURCE OF DESIGN TOKENS
   Only this file may define concrete values (colors, fonts, sizes, spacing).
   Every other stylesheet must reference these custom properties.
   Frozen foundation values (SoT v1.1 section 2.4). Do not add decorative colors.
   ============================================================================= */

:root {
  /* ---- Colors: zero-chroma neutrals. No accent color. ---- */
  --nc-bg: #FFFFFF;              /* page background (pure white) */
  --nc-text: #1A1A1A;            /* body text (charcoal, not pure black) */
  --nc-text-2: #6B6B6B;          /* secondary text */
  --nc-text-3: #8C8C8C;          /* weak text / placeholder hint / disabled */
  --nc-line: #E5E5E5;            /* divider / border, 1px site-wide */
  --nc-ph-bg: #F5F5F5;           /* image placeholder background */
  --nc-btn-bg: #1A1A1A;          /* primary button background */
  --nc-btn-fg: #FFFFFF;          /* primary button foreground */
  --nc-btn-bg-hover: #000000;    /* primary button hover background */
  --nc-shadow: 0 1px 2px rgba(0, 0, 0, .05); /* single allowed shadow, no stacking */

  /* ---- Typography: single family, no external fonts ---- */
  --nc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Font-size ladder: 13 / 14 / 15 / 16 / 18 / 22 / 28 / 36 / 48 */
  --nc-fs-13: 13px;
  --nc-fs-14: 14px;
  --nc-fs-15: 15px;
  --nc-fs-16: 16px;
  --nc-fs-18: 18px;
  --nc-fs-22: 22px;
  --nc-fs-28: 28px;
  --nc-fs-36: 36px;
  --nc-fs-48: 48px;

  /* Line heights */
  --nc-lh-body: 1.65;
  --nc-lh-heading: 1.25;

  /* Font weights (numeric, no extra family) */
  --nc-fw-regular: 400;
  --nc-fw-medium: 500;
  --nc-fw-semibold: 600;
  --nc-fw-bold: 700;

  /* ---- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 ---- */
  --nc-sp-1: 4px;
  --nc-sp-2: 8px;
  --nc-sp-3: 12px;
  --nc-sp-4: 16px;
  --nc-sp-5: 24px;
  --nc-sp-6: 32px;
  --nc-sp-7: 48px;
  --nc-sp-8: 64px;
  --nc-sp-9: 96px;

  /* ---- Radius ---- */
  --nc-radius: 2px;

  /* ---- Motion ---- */
  --nc-transition: 240ms ease-out;

  /* ---- Layout / container ---- */
  --nc-container-max: 1240px;    /* outer container max width */
  --nc-container: 1200px;        /* content column width */

  /* Gutter: >=16px on mobile, >=24px on desktop (applied via media query below) */
  --nc-gutter: 16px;

  /* ---- Component metrics ---- */
  --nc-touch: 44px;              /* minimum touch target (>= 44x44px) */
  --nc-header-h: 64px;
  --nc-header-h-lg: 76px;
}

/* =============================================================================
   Breakpoints (mobile-first, min-width only):
     480 / 768 / 1024 / 1280
   All @media rules across the theme must use exactly these four widths.
   ============================================================================= */

@media (min-width: 480px) {
  :root {
    --nc-gutter: 16px;
  }
}

@media (min-width: 768px) {
  :root {
    --nc-gutter: 24px;
    --nc-header-h: 76px;
  }
}

@media (min-width: 1024px) {
  :root {
    --nc-gutter: 24px;
  }
}

@media (min-width: 1280px) {
  :root {
    --nc-gutter: 24px;
  }
}