/* ============================================================
   OnSumn / Bay Area Pulse — Design Tokens
   ============================================================ */

/* ── Fonts ── */
@font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/BeVietnamPro-Light.ttf'); font-weight: 300; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/BeVietnamPro-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/BeVietnamPro-Medium.ttf'); font-weight: 500; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/BeVietnamPro-SemiBold.ttf'); font-weight: 600; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/BeVietnamPro-Bold.ttf'); font-weight: 700; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/BeVietnamPro-ExtraBold.ttf'); font-weight: 800; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/BeVietnamPro-Black.ttf'); font-weight: 900; }

@font-face { font-family: 'Inter'; src: url('fonts/Inter-Light.ttf'); font-weight: 300; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.ttf'); font-weight: 500; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.ttf'); font-weight: 600; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.ttf'); font-weight: 700; }

/* ── Base Tokens ── */
:root {
  /* --- Typography Families --- */
  --font-display: 'Be Vietnam Pro', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- Brand Colors --- */
  --amber-gold: #D57800;
  --amber-gold-light: #FFB778;
  --international-orange: #FF4F00;
  --international-orange-bright: #FF5717;

  /* --- Eucalyptus Green (Pantone 7736 C) — category tags, badges, subtle highlights --- */
  --eucalyptus-green: #395542;
  --eucalyptus-green-light: #5A7A68;
  --eucalyptus-green-dim: #2A3F32;

  /* --- Fog Blue (Pantone 5425 C) — cards, borders, hover states, secondary bg --- */
  --fog-blue: #7A99AC;
  --fog-blue-light: #A3BDCC;
  --fog-blue-dim: #5B7A8D;

  /* --- Surfaces (Dark Mode Default) --- */
  --surface: #121414;
  --surface-dim: #0A0A0A;
  --surface-bright: #38393A;
  --surface-container-lowest: #0C0F0F;
  --surface-container-low: #1A1C1C;
  --surface-container: #1E2020;
  --surface-container-high: #282A2B;
  --surface-container-highest: #333535;

  /* --- On-Surface (Text) --- */
  --on-surface: #E2E2E2;
  --on-surface-variant: #DBC2AF;
  --on-surface-muted: #A38D7C;

  /* --- Primary --- */
  --primary: #FFB778;
  --on-primary: #4C2700;
  --primary-container: #D77902;
  --on-primary-container: #422100;
  --inverse-primary: #8E4E00;

  /* --- Secondary --- */
  --secondary: #FFB59E;
  --on-secondary: #5E1700;
  --secondary-container: #FF5717;
  --on-secondary-container: #521300;

  /* --- Tertiary --- */
  --tertiary: #C6C6C6;
  --on-tertiary: #303030;
  --tertiary-container: #919191;

  /* --- Eucalyptus / Fog semantic aliases --- */
  --accent-green: var(--eucalyptus-green);
  --accent-blue: var(--fog-blue);

  /* --- Error --- */
  --error: #FFB4AB;
  --on-error: #690005;
  --error-container: #93000A;

  /* --- Outline --- */
  --outline: #A38D7C;
  --outline-variant: #554335;

  /* --- Inverse --- */
  --inverse-surface: #E2E2E2;
  --inverse-on-surface: #2F3131;

  /* --- Fixed --- */
  --primary-fixed: #FFDCC1;
  --primary-fixed-dim: #FFB778;
  --secondary-fixed: #FFDBD0;
  --secondary-fixed-dim: #FFB59E;

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

  --gutter: 24px;
  --margin: 32px;
  --container-max: 1280px;

  /* --- Borders & Elevation --- */
  --border-default: 1px solid var(--outline-variant);
  --border-accent: 1px solid var(--amber-gold);
  --border-thick: 2px solid var(--international-orange);
  --hard-shadow-offset: 4px;

  /* --- Corner Radii (sharp by default) --- */
  --radius-none: 0px;
  --radius-brand: 50%; /* only for brand marks / avatars */
}

/* ── Light Mode Override ── */
:root[data-theme="light"] {
  --surface: #F8F8F8;
  --surface-dim: #EFEFEF;
  --surface-container-low: #FFFFFF;
  --surface-container: #F2F2F2;
  --surface-container-high: #E8E8E8;
  --on-surface: #1A1A1A;
  --on-surface-variant: #4A3A2D;
  --on-surface-muted: #6B5B4F;
  --primary: #D57800;
  --on-primary: #FFFFFF;
}

/* ── Semantic Typography ── */
.display-xl {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: -0.04em;
}
.headline-lg {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -0.02em;
}
.headline-md {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}
.body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.body-md {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.label-bold {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}