/* =========================================================
   iShopping Design System — Foundational tokens
   Colors, typography, spacing, radii.
   Import this file at the top of any artifact.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* -------- Pretendard — brand-supplied Latin sans-serif --------
   Supplied weights: 100 / 200 / 600 / 700 / 800 / 900.
   NOT supplied: 400 Regular, 500 Medium — body copy weights.
   Until those land, browsers will synthesize 400/500 from the
   nearest available weight (visible weight unevenness possible).
*/
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 100;
  src: url("./fonts/PRETENDARD-THIN.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 200;
  src: url("./fonts/PRETENDARD-EXTRALIGHT.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 600;
  src: url("./fonts/Pretendard-SemiBold.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700;
  src: url("./fonts/PRETENDARD-BOLD.OTF")      format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 800;
  src: url("./fonts/PRETENDARD-EXTRABOLD.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 900;
  src: url("./fonts/PRETENDARD-BLACK.OTF")     format("opentype"); font-display: swap; }

:root {
  /* -------- Primary (iShopping Red) -------- */
  --is-primary-50:  #FFF1EE;
  --is-primary-100: #FFD5CC;
  --is-primary-300: #FF7F66;
  --is-primary-500: #E8423A;
  --is-primary-700: #B22A24;

  /* -------- Secondary -------- */
  --is-secondary-coral:    #F97066;
  --is-secondary-charcoal: #2D2D2D;

  /* -------- Neutral (warm gray) -------- */
  --is-neutral-50:  #FAFAF9;
  --is-neutral-100: #F2F2F0;
  --is-neutral-200: #E5E5E2;
  --is-neutral-300: #CFCFCB;
  --is-neutral-500: #8A8A85;
  --is-neutral-700: #52524E;
  --is-neutral-900: #1D1D1B;

  /* -------- Semantic -------- */
  --is-success:    #1B9E6D;
  --is-success-bg: #E6F7EF;
  --is-warning:    #D4880F;
  --is-warning-bg: #FFF4E0;
  --is-error:      #DC3545;
  --is-error-bg:   #FCEAEA;
  --is-info:       #2B7CD6;
  --is-info-bg:    #E8F2FC;

  /* -------- Surface aliases -------- */
  --is-bg:         var(--is-neutral-50);   /* page background */
  --is-surface:    #FFFFFF;                 /* card on warm bg */
  --is-surface-2:  var(--is-neutral-100);   /* card on white   */
  --is-border:     var(--is-neutral-200);
  --is-border-strong: var(--is-neutral-300);
  --is-fg:         var(--is-neutral-900);   /* headings        */
  --is-fg-body:    var(--is-neutral-700);   /* body            */
  --is-fg-muted:   var(--is-neutral-500);   /* captions        */
  --is-fg-disabled:var(--is-neutral-300);

  /* -------- Spacing (4px base) -------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* -------- Radius -------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* -------- Breakpoints (for reference) -------- */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* -------- Typography families --------
     Pretendard handles Latin; Noto Sans Thai handles Thai glyphs via
     per-glyph fallback (Pretendard has no Thai coverage). */
  --font-primary: "Pretendard", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* -------- Type scale tokens -------- */
  --fs-display: 36px;  --fw-display: 700;  --lh-display: 1.2;
  --fs-h1:      28px;  --fw-h1:      700;  --lh-h1:      1.3;
  --fs-h2:      22px;  --fw-h2:      600;  --lh-h2:      1.35;
  --fs-h3:      18px;  --fw-h3:      600;  --lh-h3:      1.4;
  --fs-body:    16px;  --fw-body:    400;  --lh-body:    1.6;
  --fs-bodyB:   16px;  --fw-bodyB:   600;  --lh-bodyB:   1.6;
  --fs-caption: 13px;  --fw-caption: 400;  --lh-caption: 1.5;
  --fs-overline:11px;  --fw-overline:600;  --lh-overline:1.4;

  /* -------- Component-level focus ring -------- */
  --ring-primary: 0 0 0 3px rgba(232, 66, 58, 0.12);
  --ring-error:   0 0 0 3px rgba(220, 53, 69, 0.10);
}

/* =========================================================
   Semantic element defaults — body / headings / link / code
   Use a .is-root wrapper if you don't want to inherit globally.
   ========================================================= */

.is-root,
body.is-root {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--is-fg-body);
  background: var(--is-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.is-display,
.is-root .display {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--is-fg);
}

.is-root h1, .is-h1 {
  font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1);
  color: var(--is-fg); letter-spacing: -0.005em;
  margin: 0 0 var(--space-md);
}
.is-root h2, .is-h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2);
  color: var(--is-secondary-charcoal); margin: 0 0 var(--space-md);
}
.is-root h3, .is-h3 {
  font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3);
  color: var(--is-secondary-charcoal); margin: 0 0 var(--space-sm);
}
.is-root p, .is-body {
  font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body);
  color: var(--is-fg-body); margin: 0 0 var(--space-md);
}
.is-body-bold {
  font-size: var(--fs-bodyB); font-weight: var(--fw-bodyB); line-height: var(--lh-bodyB);
  color: var(--is-fg);
}
.is-caption {
  font-size: var(--fs-caption); font-weight: var(--fw-caption); line-height: var(--lh-caption);
  color: var(--is-fg-muted);
}
.is-overline {
  font-size: var(--fs-overline); font-weight: var(--fw-overline); line-height: var(--lh-overline);
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--is-fg-muted);
}

.is-root a, a.is-link {
  color: var(--is-primary-500); text-decoration: none;
}
.is-root a:hover, a.is-link:hover { text-decoration: underline; }

.is-root code, code.is-code,
.is-root pre, pre.is-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--is-neutral-100);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--is-fg);
}

/* Thai-language readability nudge: +0.1 line-height */
:lang(th), .is-thai { line-height: calc(var(--lh-body) + 0.1); }