/* ============================================================
   Yaksok (약속) — Color & Type Foundations
   Source of truth: ifeel-official/app (Flutter)
     lib/app/theme/tokens/palette.dart
     lib/app/theme/tokens/font.dart
     lib/app/theme/foundations/app_colors.dart
     lib/app/theme/foundations/app_typo.dart
   Font: Pretendard ONLY.
   ============================================================ */

/* Pretendard — self-hosted from /fonts (brand-supplied .otf weights). */
@font-face { font-family: "Pretendard"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Light.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Regular.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Medium.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Pretendard-SemiBold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Bold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/Pretendard-ExtraBold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Black.otf") format("opentype"); }

:root {
  /* ---- Palette (raw tokens) ---- */
  --yellow:  #FFD700;   /* accent — used sparingly (highlight / badge) */
  --blue:    #0066FF;   /* PRIMARY — the single brand accent */
  --white:   #FFFFFF;
  --gray-50: #F8FAFC;   /* light surface */
  --gray-100:#E5E5E5;
  --gray-300:#AAAAAA;
  --gray-400:#888888;   /* hint text (both themes) */
  --gray-600:#333333;   /* sub text (light) */
  --gray-900:#1A1A1A;   /* text (light) / surface (dark) */
  --black:   #000000;

  /* ---- Semantic — LIGHT (default) ---- */
  --surface:    var(--gray-50);
  --text:       var(--gray-900);
  --sub-text:   var(--gray-600);
  --hint-text:  var(--gray-400);
  --primary:    var(--blue);
  --on-primary: var(--gray-50);
  --divider:    rgba(26, 26, 26, 0.08);   /* gray900 @ 8% */

  /* Glass fills (frosted, derived from brightness, light theme) */
  --glass-fill:        rgba(255, 255, 255, 0.98);
  --glass-fill-idle:   rgba(255, 255, 255, 0.28);
  --glass-border:      rgba(255, 255, 255, 0.04);
  --glass-shadow:      rgba(0, 0, 0, 0.15);
  /* Camera-overlay chrome (always dark glass over the live camera) */
  --camera-glass:      rgba(0, 0, 0, 0.85);

  /* ---- Type families ---- */
  --font-sans: "Pretendard", -apple-system,
               BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
               "Malgun Gothic", sans-serif;

  /* ---- Font sizes (px, from FontSize) ---- */
  --fs-hero:     56px;
  --fs-display:  32px;
  --fs-headline: 24px;
  --fs-title:    20px;
  --fs-subtitle: 18px;
  --fs-body:     16px;
  --fs-label:    14px;
  --fs-caption:  12px;

  /* ---- Weights (Pretendard) ---- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ---- Radii (observed in code) ---- */
  --r-pill:   999px;  /* FABs, OCR button, chips */
  --r-xl:     24px;   /* glass cards / result banner */
  --r-lg:     16px;   /* default glass box, dialogs, disclaimer cards */
  --r-md:     12px;   /* small glass buttons */
  --r-sm:     2px;    /* section accent bar */

  /* ---- Bottom-bar / control height ---- */
  --bottom-bar: 56px;
}

/* ---- Semantic — DARK ---- */
[data-theme="dark"] {
  --surface:    var(--gray-900);
  --text:       var(--gray-50);
  --sub-text:   var(--gray-300);
  --hint-text:  var(--gray-400);
  --primary:    #3385FF;   /* dark-theme primary (lighter blue for contrast) */
  --on-primary: var(--gray-50);
  --divider:    rgba(248, 250, 252, 0.08);  /* gray50 @ 8% */

  --glass-fill:      rgba(26, 26, 26, 0.55);
  --glass-fill-idle: rgba(26, 26, 26, 0.30);
  --glass-border:    rgba(255, 255, 255, 0.16);
  --glass-shadow:    rgba(0, 0, 0, 0.55);
}

/* ============================================================
   Type scale — semantic classes
   Default weight is regular(400); the app applies .bold / .semibold
   per-use via TextStyle weight extensions. Mirrored below.
   ============================================================ */

.t-hero {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);   /* hero is always shown bold in app */
  line-height: 0.95;
  letter-spacing: -2.8px;
  color: var(--text);
}
.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.96px;
  color: var(--text);
}
.t-headline {
  font-family: var(--font-sans);
  font-size: var(--fs-headline);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.44px;
  color: var(--text);
}
.t-title {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: -0.32px;
  color: var(--text);
}
.t-subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--text);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--text);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--text);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;   /* eyebrow / mono-label use (e.g. "YAKSOK") */
  color: var(--text);
}

/* weight helpers */
.w-light     { font-weight: var(--fw-light); }
.w-regular   { font-weight: var(--fw-regular); }
.w-medium    { font-weight: var(--fw-medium); }
.w-semibold  { font-weight: var(--fw-semibold); }
.w-bold      { font-weight: var(--fw-bold); }
.w-extrabold { font-weight: var(--fw-extrabold); }
.w-black     { font-weight: var(--fw-black); }