/* ============================================================
   Hoa Mặt Trời — Foundations: Color + Type + Spacing tokens
   Quỹ Hoa Mặt Trời · Trung tâm điều hành (Management Hub)
   ============================================================ */

/* --- Brand fonts (self-hosted, no CDN) ---
   The internal hub handles children's data and must run offline, so the
   Google-Fonts @import was removed and the brand fonts are served only from the
   self-hosted TTFs. `src` is a RELATIVE url so it resolves under every mount
   prefix (/static/, /care/static/, /review/static/, /finance/static/): the
   browser resolves it against this stylesheet's own URL. Each face spans a
   weight RANGE (400 700) from one SemiBold master so body copy (400) and
   emphasis (600/700) both render in the brand face offline, with no second
   download and no invisible-text gap. */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-SemiBold.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/RobotoCondensed-SemiBold.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ---------- */
  --sunflower:      #FED138;  /* primary accent, CTAs, highlights */
  --sunflower-deep: #F2B705;  /* pressed / hover on yellow, text-on-cream accents */
  --sunflower-soft: #FFE9A3;  /* tints, focus rings, mini-bars */
  --navy:           #2A2A72;  /* headlines, sidebar, dark surfaces */
  --navy-700:       #232361;  /* sidebar gradient base / pressed */
  --navy-300:       #6f6fae;  /* navy at low emphasis */
  --teal:           #0D9098;  /* links, active nav, secondary accent */
  --teal-deep:      #0a7378;  /* teal hover / pressed */
  --teal-soft:      #e0f3f3;  /* teal tint backgrounds */
  --cream:          #FAF8D1;  /* warm card / banner fills */
  --cream-deep:     #F3EFB8;  /* cream border / pressed */

  /* ---------- Neutrals ---------- */
  --ink:        #1c2430;  /* primary text */
  --muted:      #6b7686;  /* secondary text, labels */
  --faint:      #98a1b0;  /* tertiary text, placeholder */
  --hairline:   #e4e8ef;  /* borders, dividers */
  --hairline-2: #eef1f6;  /* lighter inner dividers */
  --app-bg:     #f7f6ef;  /* app background (warm) */
  --surface:    #ffffff;  /* card white */
  --surface-2:  #fbfaf4;  /* subtle alt row / inset */

  /* ---------- 6-state workflow system ---------- */
  --st-wait-bg:#eef0f3; --st-wait-fg:#344054; --st-wait-bd:#d0d5dd; /* chờ upload */
  --st-proc-bg:#d1e9ff; --st-proc-fg:#175cd3; --st-proc-bd:#b2ddff; /* đang xử lý */
  --st-rev-bg: #fef0c7; --st-rev-fg: #b54708; --st-rev-bd: #fedf89; /* chờ duyệt */
  --st-appr-bg:#d1fadf; --st-appr-fg:#027a48; --st-appr-bd:#a6f4c5; /* đã duyệt */
  --st-pub-bg: #cdeee0; --st-pub-fg: #066a46; --st-pub-bd:#9fe0c4;  /* đã đăng */
  --st-rej-bg: #fee4e2; --st-rej-fg: #b42318; --st-rej-bd:#fda29b;  /* từ chối */

  /* Semantic feedback (alerts/toasts) reuse the state ramp */
  --info-bg:#d1e9ff; --info-fg:#175cd3; --info-bd:#b2ddff;
  --warn-bg:#fef0c7; --warn-fg:#b54708; --warn-bd:#fedf89;
  --ok-bg:#d1fadf;   --ok-fg:#027a48;   --ok-bd:#a6f4c5;
  --danger-bg:#fee4e2; --danger-fg:#b42318; --danger-bd:#fda29b;

  /* ---------- Type families ---------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "SF Mono", "Consolas", "Roboto Mono", ui-monospace, monospace;

  /* ---------- Type scale (rem, 16px root) ---------- */
  --t-display: 2.75rem;  /* 44px — big KPI numbers, hero page titles */
  --t-h1: 2rem;          /* 32px — page title (Playfair) */
  --t-h2: 1.5rem;        /* 24px — section heading (Playfair) */
  --t-h3: 1.1875rem;     /* 19px — card title (Playfair) */
  --t-lg: 1.0625rem;     /* 17px — lead / emphasis body */
  --t-base: 0.9375rem;   /* 15px — body / table cells */
  --t-sm: 0.8125rem;     /* 13px — labels, captions, meta */
  --t-xs: 0.6875rem;     /* 11px — pills, badges, eyebrow */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.5;

  /* tracking */
  --track-eyebrow: 0.08em;
  --track-label: 0.02em;

  /* ---------- Spacing rhythm (4px base) ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 48px; --s10: 64px;

  /* ---------- Radii ---------- */
  --r-xs: 6px;   --r-sm: 8px;   --r-md: 10px;
  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 999px;

  /* ---------- Elevation (soft, warm-cast shadows) ---------- */
  --sh-1: 0 1px 2px rgba(13,27,62,.04);
  --sh-2: 0 1px 2px rgba(13,27,62,.04), 0 4px 12px rgba(13,27,62,.05);
  --sh-3: 0 8px 28px rgba(13,27,62,.10), 0 2px 6px rgba(13,27,62,.06);
  --sh-pop: 0 16px 44px rgba(13,27,62,.16);
  --focus-ring: 0 0 0 3px var(--sunflower-soft);
  --focus-ring-teal: 0 0 0 3px rgba(13,144,152,.28);

  /* ---------- Shell metrics ---------- */
  --sidebar-w: 236px;
  --topbar-h: 58px;
  --content-max: 1180px;
}

/* ============================================================
   Semantic element defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 0.75em; text-wrap: pretty; }

/* Inline emphasis in body copy stays gentle — never heavy bold */
b, strong { font-weight: 600; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--navy);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  padding: 1px 6px;
}

/* Eyebrow / overline label */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

::selection { background: var(--sunflower-soft); color: var(--ink); }