/* ==========================================================
   Glowing Plum · Shopify Portfolio — Design tokens (v4, Aubergine & Brass)
   Source of truth for colors, type, spacing, radii and borders.
   See STYLE_GUIDE.md for usage rules.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=JetBrains+Mono:wght@500&family=Noto+Sans+KR:wght@400;700&family=Noto+Serif+KR:wght@500&display=swap");

:root {
  /* ---------- Brand colors ---------- */
  --aubergine: #2B1530;       /* Primary. Hero band, headings, primary buttons */
  --aubergine-deep: #1C0D20;  /* Footer, pressed states */
  --plum: #5B2A55;            /* Links, italic accents, hover on primary buttons */
  --brass: #C9A227;           /* Accent. On aubergine, rules, icon rings. NEVER text on light */
  --brass-hover: #D9B547;     /* Hover on brass buttons */
  --brass-text: #8A6A12;      /* Gold text on Ivory or White only (labels, prices) */

  /* ---------- Neutrals ---------- */
  --ivory: #F7F5F2;           /* Page background */
  --mauve-mist: #EFEAF0;      /* Alternate sections, chips, project backdrops, contact band */
  --white: #FFFFFF;           /* Card surfaces */
  --ink: #1A1320;             /* Body text */
  --muted: #5A5060;           /* Captions, intros, meta */
  --on-dark-muted: #E7E1E8;   /* Secondary text on aubergine */
  --line: #E0D9E2;            /* 1px borders and dividers (decorative) */
  --line-strong: #8C7F91;     /* Input borders (3:1, meets non-text contrast) */

  /* ---------- Font families ---------- */
  --font-display: "Fraunces", "Noto Serif KR", Georgia, serif;
  --font-body: "DM Sans", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Type scale (weight size/line-height family) ---------- */
  --text-hero: 500 68px/72px var(--font-display);   /* letter-spacing: -0.015em */
  --text-h1: 500 46px/52px var(--font-display);
  --text-h2: 500 32px/40px var(--font-display);
  --text-h3: 600 22px/30px var(--font-display);
  --text-lead: 400 19px/31px var(--font-body);
  --text-body: 400 16px/26px var(--font-body);
  --text-small: 400 14px/20px var(--font-body);
  --text-label: 500 12px/16px var(--font-mono);     /* uppercase, letter-spacing: 0.1em */
  --text-button: 500 15px/1 var(--font-body);       /* sentence case, letter-spacing: 0.01em */

  /* ---------- Spacing (4px rhythm) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-18: 72px;
  --space-24: 96px;           /* Section padding on desktop */

  /* ---------- Radii ---------- */
  --radius-chip: 4px;
  --radius-button: 6px;
  --radius-input: 6px;
  --radius-card: 8px;

  /* ---------- Borders (no shadows in this system) ---------- */
  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--aubergine);
  --rule: 40px;               /* Brass section rule: 40px wide, 2px tall */

  /* ---------- Interaction ---------- */
  --focus-ring: 2px solid var(--plum);
  --focus-offset: 3px;
  --transition: 150ms ease-out;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --tap-target-min: 48px;
}

/* ---------- Base ---------- */
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: var(--text-body);
}

h1, h2, h3 { font-family: var(--font-display); color: var(--aubergine); font-weight: 500; }
em.accent, .accent { font-style: italic; color: var(--plum); }   /* Italic accent word in headings */
.on-dark .accent { color: var(--brass); }

a { color: var(--plum); text-decoration-color: var(--brass); text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { color: var(--aubergine); }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.on-dark :focus-visible { outline-color: var(--brass); }

/* ---------- Reference components ---------- */
.btn {
  font: var(--text-button);
  letter-spacing: 0.01em;
  min-height: var(--tap-target-min);
  padding: 15px 24px;
  border-radius: var(--radius-button);
  border: 1px solid var(--aubergine);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn--primary { background: var(--aubergine); color: var(--ivory); }
.btn--primary:hover { background: var(--plum); border-color: var(--plum); color: var(--ivory); }
.btn--outline { background: transparent; color: var(--aubergine); }
.btn--outline:hover { background: var(--mauve-mist); color: var(--aubergine); }
.btn--brass { background: var(--brass); border-color: var(--brass); color: var(--aubergine); }          /* On aubergine only */
.btn--brass:hover { background: var(--brass-hover); border-color: var(--brass-hover); color: var(--aubergine); }
.btn--ghost-brass { background: transparent; border-color: var(--brass); color: var(--ivory); }         /* On aubergine only */
.btn--ghost-brass:hover { background: var(--aubergine-deep); color: var(--ivory); }

.link-arrow { font-weight: 500; text-decoration: underline; }   /* "Read case study →" */

.rule { width: var(--rule); height: 2px; background: var(--brass); border: 0; margin: 0 0 var(--space-3); }

.label {
  font: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-text);
}
.on-dark .label { color: var(--brass); }

.chip {
  padding: 6px 12px;
  border-radius: var(--radius-chip);
  background: var(--mauve-mist);
  color: var(--aubergine);
  font: 500 13px/1.4 var(--font-body);
}

.card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  transition: border-color var(--transition);
}
.card:hover { border-color: var(--aubergine); }
.card__price { border-top: var(--border); padding-top: 14px; font-weight: 700; color: var(--brass-text); }

.icon-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plum);   /* SVG icons use stroke="currentColor", stroke-width 1.5 */
}

.input {
  font: 400 16px var(--font-body);
  min-height: var(--tap-target-min);
  padding: 12px 14px;
  border-radius: var(--radius-input);
  border: 1px solid var(--line-strong);
  background: var(--ivory);
  color: var(--ink);
}