/* Foundation — Untitled UI tokens + trimmed Be Vietnam Pro faces (The Constitution) */
@font-face { font-family:'Be Vietnam Pro'; src:url('fonts/BeVietnamPro-Light.ttf')           format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('fonts/BeVietnamPro-Regular.ttf')         format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('fonts/BeVietnamPro-Medium.ttf')          format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('fonts/BeVietnamPro-SemiBold.ttf')        format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('fonts/BeVietnamPro-Bold.ttf')            format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* =======================================================================
   * PRIMITIVE COLOR SCALES (Untitled UI PRO 7.0)
   * ===================================================================== */
  /* Gray (neutral) */
  --gray-25:#FDFDFD; --gray-50:#FAFAFA; --gray-100:#F5F5F5; --gray-200:#E9EAEB;
  --gray-300:#D5D7DA; --gray-400:#A4A7AE; --gray-500:#717680; --gray-600:#535862;
  --gray-700:#414651; --gray-800:#252B37; --gray-900:#181D27; --gray-950:#0A0D12;

  /* Brand (blue) */
  --brand-25:#F0F4FF; --brand-50:#E1E8FD; --brand-100:#C5D0FA; --brand-200:#A2B4F4;
  --brand-300:#7D96EC; --brand-400:#5C7AE2; --brand-500:#3F5FD6; --brand-600:#2847C4;
  --brand-700:#1A35AE; --brand-800:#102595; --brand-900:#08137A; --brand-950:#03045E;

  /* Error (red) */
  --error-25:#FFFBFA; --error-50:#FEF3F2; --error-100:#FEE4E2; --error-200:#FECDCA;
  --error-300:#FDA29B; --error-400:#F97066; --error-500:#F04438; --error-600:#D92D20;
  --error-700:#B42318; --error-800:#912018; --error-900:#7A271A; --error-950:#55160C;

  /* Warning (orange) */
  --warning-25:#FFFCF5; --warning-50:#FFFAEB; --warning-100:#FEF0C7; --warning-200:#FEDF89;
  --warning-300:#FEC84B; --warning-400:#FDB022; --warning-500:#F79009; --warning-600:#DC6803;
  --warning-700:#B54708; --warning-800:#93370D; --warning-900:#7A2E0E; --warning-950:#4E1D09;

  /* Success (green) */
  --success-25:#F6FEF9; --success-50:#ECFDF3; --success-100:#DCFAE6; --success-200:#ABEFC6;
  --success-300:#75E0A7; --success-400:#47CD89; --success-500:#17B26A; --success-600:#079455;
  --success-700:#067647; --success-800:#085D3A; --success-900:#074D31; --success-950:#053321;

  /* Accent utilities used by badges/charts */
  --blue-50:#EFF8FF; --blue-200:#B2DDFF; --blue-500:#2E90FA; --blue-700:#175CD3;
  --indigo-50:#EEF4FF; --indigo-200:#C7D7FE; --indigo-500:#6172F3; --indigo-700:#3538CD;
  --purple-50:#F4F3FF; --purple-200:#D9D6FE; --purple-500:#7A5AF8; --purple-700:#5925DC;
  --pink-50:#FDF2FA; --pink-200:#FCCEEE; --pink-500:#EE46BC; --pink-700:#C11574;
  --orange-50:#FEF6EE; --orange-200:#F9DBAF; --orange-500:#EF6820; --orange-700:#B93815;
  --teal-50:#F0FDF9; --teal-200:#99F6E0; --teal-500:#15B79E; --teal-700:#107569;

  --base-white:#FFFFFF; --base-black:#000000;

  /* =======================================================================
   * TYPE TOKENS
   * ===================================================================== */
  --font-family-display:'Be Vietnam Pro','Raleway','Inter',system-ui,-apple-system,sans-serif;
  --font-family-body:'Be Vietnam Pro','Raleway','Inter',system-ui,-apple-system,sans-serif;
  --font-family-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* Untitled weight ladder (lighter than default) */
  --font-weight-regular:300; --font-weight-medium:400;
  --font-weight-semibold:500; --font-weight-bold:600;

  /* Font sizes (px) */
  --font-size-display-2xl:72px; --font-size-display-xl:60px; --font-size-display-lg:48px;
  --font-size-display-md:36px;  --font-size-display-sm:30px; --font-size-display-xs:24px;
  --font-size-display-xxs:21.6px;
  --font-size-text-xl:20px; --font-size-text-lg:18px; --font-size-text-md:16px;
  --font-size-text-sm:14px; --font-size-text-xs:12px;

  /* Line heights (px) */
  --line-height-display-2xl:90px; --line-height-display-xl:72px; --line-height-display-lg:60px;
  --line-height-display-md:44px;  --line-height-display-sm:38px; --line-height-display-xs:32px;
  --line-height-display-xxs:28px;
  --line-height-text-xl:30px; --line-height-text-lg:28px; --line-height-text-md:24px;
  --line-height-text-sm:20px; --line-height-text-xs:18px;

  --tracking-display:-0.02em; --tracking-text:0;

  /* =======================================================================
   * SHAPE — radii (untitled = friendlier, shifted one slot up)
   * ===================================================================== */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
  --radius-xl:12px; --radius-2xl:16px; --radius-3xl:20px; --radius-full:9999px;

  /* Spacing (4px grid) */
  --spacing-1:4px; --spacing-2:8px; --spacing-3:12px; --spacing-4:16px;
  --spacing-5:20px; --spacing-6:24px; --spacing-8:32px; --spacing-10:40px;
  --spacing-12:48px; --spacing-16:64px; --spacing-20:80px;

  /* =======================================================================
   * ELEVATION — shadows + focus rings (light)
   * ===================================================================== */
  --shadow-xs:0 1px 1.5px 0 rgba(10,13,18,.05);
  --shadow-sm:0 1px 1.5px -1px rgba(10,13,18,.10),0 1px 2px 0 rgba(10,13,18,.10);
  --shadow-md:0 1.5px 3px -1.5px rgba(10,13,18,.06),0 3px 6px -1.5px rgba(10,13,18,.10);
  --shadow-lg:0 1.5px 1.5px -1px rgba(10,13,18,.04),0 3px 4px -1.5px rgba(10,13,18,.03),0 8px 11px -3px rgba(10,13,18,.08);
  --shadow-xl:0 2px 2px -1px rgba(10,13,18,.04),0 6px 6px -3px rgba(10,13,18,.03),0 14px 17px -3px rgba(10,13,18,.08);
  --shadow-2xl:0 3px 3px -1.5px rgba(10,13,18,.04),0 17px 34px -8px rgba(10,13,18,.18);
  --focus-ring-brand:0 0 0 .5px var(--brand-500),0 0 5px -1px var(--brand-200);
  --focus-ring-gray:0 0 0 .5px var(--gray-300),0 0 5px -1px var(--gray-100);
  --shadow-xs-skeuomorphic:0 1px 2px 0 rgba(10,13,18,.05),inset 0 -2px 0 0 rgba(10,13,18,.05),inset 0 0 0 1px rgba(10,13,18,.10);

  /* Named spacing aliases (used by ported component CSS) */
  --spacing-xxs:2px; --spacing-xs:4px; --spacing-sm:6px; --spacing-md:8px;
  --spacing-lg:12px; --spacing-xl:16px; --spacing-2xl:24px; --spacing-3xl:32px; --spacing-4xl:48px;

  /* Blur tokens */
  --blur-sm:4px; --blur-md:8px; --blur-lg:12px; --blur-xl:20px;
}

/* ===========================================================================
 * SEMANTIC TOKENS — LIGHT (default)
 * ========================================================================= */
:root,
[data-mode="light"] {
  /* Text */
  --text-primary:var(--gray-900); --text-secondary:var(--gray-700);
  --text-secondary-hover:var(--gray-800);
  --text-tertiary:var(--gray-600); --text-quaternary:var(--gray-500);
  --text-white:#fff; --text-placeholder:var(--gray-500); --text-disabled:var(--gray-500);
  --text-brand-primary:var(--brand-600); --text-brand-secondary:var(--brand-500);
  --text-error-primary:var(--error-600); --text-warning-primary:var(--warning-600);
  --text-success-primary:var(--success-600);

  /* Background / surface */
  --bg-primary:#fff; --bg-primary-hover:var(--gray-50); --bg-primary-alt:var(--gray-50); --bg-secondary:var(--gray-50);
  --bg-secondary-hover:var(--gray-100); --bg-tertiary:var(--gray-100); --bg-quaternary:var(--gray-200);
  --bg-active:var(--gray-50); --bg-disabled:var(--gray-100); --bg-overlay:rgba(10,13,18,.7);
  --bg-brand-primary:var(--brand-50); --bg-brand-secondary:var(--brand-100);
  --bg-brand-solid:var(--brand-600); --bg-brand-solid-hover:var(--brand-700);
  --bg-brand-section:var(--brand-800);
  --bg-error-primary:var(--error-50); --bg-error-solid:var(--error-600);
  --bg-warning-primary:var(--warning-50); --bg-success-primary:var(--success-50);

  /* Border */
  --border-primary:var(--gray-300); --border-secondary:var(--gray-200);
  --border-tertiary:var(--gray-100); --border-brand:var(--brand-500);
  --border-brand-solid:var(--brand-600); --border-error:var(--error-300);
  --border-warning:var(--warning-300); --border-success:var(--success-300);

  /* Foreground (icons) */
  --fg-primary:var(--gray-900); --fg-secondary:var(--gray-700); --fg-tertiary:var(--gray-600);
  --fg-quaternary:var(--gray-500); --fg-quinary:var(--gray-400); --fg-senary:var(--gray-300);
  --fg-white:#fff; --fg-disabled:var(--gray-400);
  --fg-brand-primary:var(--brand-600); --fg-brand-secondary:var(--brand-500);
  --fg-error-primary:var(--error-600); --fg-warning-primary:var(--warning-600);
  --fg-success-primary:var(--success-600);
}

/* ===========================================================================
 * SEMANTIC TOKENS — DARK
 * ========================================================================= */
[data-mode="dark"] {
  --text-primary:var(--gray-50); --text-secondary:var(--gray-300);
  --text-secondary-hover:var(--gray-200);
  --text-tertiary:var(--gray-400); --text-quaternary:var(--gray-400);
  --text-white:#fff; --text-placeholder:var(--gray-500); --text-disabled:var(--gray-500);
  --text-brand-primary:var(--brand-300); --text-brand-secondary:var(--brand-300);
  --text-error-primary:var(--error-400); --text-warning-primary:var(--warning-400);
  --text-success-primary:var(--success-400);

  --bg-primary:var(--gray-950); --bg-primary-hover:var(--gray-900); --bg-primary-alt:#13161F; --bg-secondary:#13161F;
  --bg-secondary-hover:var(--gray-800); --bg-tertiary:var(--gray-800); --bg-quaternary:var(--gray-700);
  --bg-active:var(--gray-900); --bg-disabled:var(--gray-800); --bg-overlay:rgba(0,0,0,.7);
  --bg-brand-primary:rgba(40,71,196,.16); --bg-brand-secondary:rgba(40,71,196,.28);
  --bg-brand-solid:var(--brand-600); --bg-brand-solid-hover:var(--brand-500);
  --bg-brand-section:var(--brand-900);
  --bg-error-primary:rgba(217,45,32,.14); --bg-error-solid:var(--error-600);
  --bg-warning-primary:rgba(220,104,3,.14); --bg-success-primary:rgba(7,148,85,.14);

  --border-primary:var(--gray-700); --border-secondary:var(--gray-800);
  --border-tertiary:var(--gray-800); --border-brand:var(--brand-400);
  --border-brand-solid:var(--brand-500); --border-error:var(--error-700);
  --border-warning:var(--warning-700); --border-success:var(--success-700);

  --fg-primary:var(--gray-50); --fg-secondary:var(--gray-300); --fg-tertiary:var(--gray-400);
  --fg-quaternary:var(--gray-400); --fg-quinary:var(--gray-500); --fg-senary:var(--gray-700);
  --fg-white:#fff; --fg-disabled:var(--gray-600);
  --fg-brand-primary:var(--brand-400); --fg-brand-secondary:var(--brand-400);
  --fg-error-primary:var(--error-400); --fg-warning-primary:var(--warning-400);
  --fg-success-primary:var(--success-400);
}

/* ===========================================================================
 * COMPOSED TYPE STYLES (.display-* / .text-*-{weight})
 * ========================================================================= */
.display-2xl,.display-xl,.display-lg,.display-md,.display-sm,.display-xs,.display-xxs{
  font-family:var(--font-family-display); letter-spacing:var(--tracking-display);
  font-weight:var(--font-weight-semibold); margin:0; color:var(--text-primary);
}
.display-2xl{font-size:var(--font-size-display-2xl);line-height:var(--line-height-display-2xl);}
.display-xl{font-size:var(--font-size-display-xl);line-height:var(--line-height-display-xl);}
.display-lg{font-size:var(--font-size-display-lg);line-height:var(--line-height-display-lg);}
.display-md{font-size:var(--font-size-display-md);line-height:var(--line-height-display-md);}
.display-sm{font-size:var(--font-size-display-sm);line-height:var(--line-height-display-sm);letter-spacing:0;}
.display-xs{font-size:var(--font-size-display-xs);line-height:var(--line-height-display-xs);letter-spacing:0;}
.display-xxs{font-size:var(--font-size-display-xxs);line-height:var(--line-height-display-xxs);letter-spacing:0;}

.text-xl,.text-lg,.text-md,.text-sm,.text-xs{
  font-family:var(--font-family-body); letter-spacing:var(--tracking-text);
  font-weight:var(--font-weight-regular); margin:0;
}
.text-xl{font-size:var(--font-size-text-xl);line-height:var(--line-height-text-xl);}
.text-lg{font-size:var(--font-size-text-lg);line-height:var(--line-height-text-lg);}
.text-md{font-size:var(--font-size-text-md);line-height:var(--line-height-text-md);}
.text-sm{font-size:var(--font-size-text-sm);line-height:var(--line-height-text-sm);}
.text-xs{font-size:var(--font-size-text-xs);line-height:var(--line-height-text-xs);}

.fw-regular{font-weight:var(--font-weight-regular);}
.fw-medium{font-weight:var(--font-weight-medium);}
.fw-semibold{font-weight:var(--font-weight-semibold);}
.fw-bold{font-weight:var(--font-weight-bold);}