/* =====================================================
   FOUNDATION TOKENS – KINGSMART MOBILE
   ===================================================== */

/* ---------- FONT FACE ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---------- ROOT TOKENS ---------- */
:root {
  /* ===============================
     TYPOGRAPHY
     =============================== */

  --font-family-base: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Text sizes */
  --text-heading-size: 24px;
  --text-body-size: 14px;
  --text-caption-size: 12px;
  --text-button-size: 16px;

  /* Line heights */
  --text-heading-line: 1.6;
  --text-body-line: 1.5;
  --text-caption-line: 1.5;
  --text-button-line: 1;

  /* ===============================
     COLORS
     =============================== */

  /* Background */
  --color-bg-primary: #EAEAEA;
  --color-bg-secondary: #FFFFFF;
  --color-bg-brand-1st: #DDC89B;
  --color-bg-brand-2st: #FFD700;

  /* Text */
  --color-text-primary: #1A1A1A;
  --color-text-muted: #6B7280;
  --color-invert-1st: #5A3616;

  /* Border */
  --color-border-default: #E5E7EB;

  /* State */
  --color-state-success: #028A0F;
  --color-state-error: #DC2626;
}

/* =====================================================
   BASE TEXT STYLES
   ===================================================== */

.text-heading {
  font-family: var(--font-family-base);
  font-size: var(--text-heading-size);
  line-height: var(--text-heading-line);
  font-weight: 400;
  color: var(--color-text-primary);
}

.text-body {
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: 400;
  color: var(--color-text-primary);
}

.text-caption {
  font-family: var(--font-family-base);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: 400;
  color: var(--color-text-muted);
}

.text-button {
  font-family: var(--font-family-base);
  font-size: var(--text-button-size);
  line-height: var(--text-button-line);
  font-weight: 400;
}

/* =====================================================
   GLOBAL RESET (NHẸ, KHÔNG PHÁ LAYOUT)
   ===================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}