@font-face {
  font-family: "Inter";
  src: url("../assets/brand-v2/fonts/Inter-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../assets/brand-v2/fonts/Rajdhani-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../assets/brand-v2/fonts/Rajdhani-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand primitives: update these values to recolor the whole product. */
  --brand-black: #080a08;
  --brand-charcoal: #11150f;
  --brand-graphite: #20241f;
  --brand-lime-700: #718c13;
  --brand-lime-500: #b6d60a;
  --brand-lime-300: #c1e64b;
  --brand-olive: #8d9135;
  --brand-silver: #bfc4b8;
  --brand-fog: #edf0e8;
  --brand-white: #f4f6f0;

  /* Supporting primitives retained by the original light direction. */
  --support-blue-700: #0756d7;
  --support-blue-500: #0768f7;
  --support-blue-100: #eaf3ff;
  --support-green-700: #238b16;
  --support-green-500: #43b51f;
  --support-green-100: #effbe9;
  --support-orange-500: #ff6508;
  --support-orange-100: #fff2e9;
  --support-danger-500: #d62d3a;

  /* Typography primitives. */
  --font-family-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: Rajdhani, var(--font-family-body);
  --font-xs: clamp(10px, 2.75vw, 12px);
  --font-sm: clamp(11px, 3.1vw, 13px);
  --font-md: clamp(13px, 3.65vw, 15px);
  --font-lg: clamp(16px, 4.65vw, 20px);
  --font-xl: clamp(22px, 7vw, 31px);

  /* Layout primitives. */
  --page-x: clamp(14px, 4.2vw, 20px);
  --section-gap: clamp(16px, 4.8vw, 22px);
  --card-gap: clamp(9px, 2.8vw, 14px);
  --radius-sm: clamp(10px, 3vw, 14px);
  --radius-md: clamp(14px, 4.2vw, 20px);
  --radius-lg: clamp(18px, 5vw, 24px);
  --hero-height: clamp(238px, 67vw, 292px);
  --button-height: clamp(44px, 12vw, 50px);
  --nav-height: clamp(64px, 18vw, 76px);
  --header-height: clamp(66px, 19vw, 82px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --content-max: 1160px;
}

:root,
html[data-theme="light"] {
  color-scheme: light;
  --ink: #091a3a;
  --ink-soft: #536078;
  --blue: var(--support-blue-500);
  --blue-dark: var(--support-blue-700);
  --blue-soft: var(--support-blue-100);
  --green: var(--support-green-500);
  --green-dark: var(--support-green-700);
  --green-soft: var(--support-green-100);
  --orange: var(--support-orange-500);
  --orange-soft: var(--support-orange-100);
  --gold: #ffb400;
  --danger: var(--support-danger-500);
  --favorite: #e83352;
  --surface: var(--brand-white);
  --surface-card: var(--brand-white);
  --surface-soft: #f7f9fc;
  --surface-muted: #edf2f6;
  --surface-accent: #eef7ff;
  --surface-success: #fbfff8;
  --tint-base: var(--brand-white);
  --border: #e1e6ef;
  --border-strong: #cfd7e4;
  --on-primary: var(--brand-white);
  --header-bg: rgba(255, 255, 255, 0.96);
  --nav-bg: rgba(255, 255, 255, 0.98);
  --glass-bg: rgba(255, 255, 255, 0.92);
  --modal-scrim: rgba(9, 26, 58, 0.48);
  --scrim-strong: rgba(9, 26, 58, 0.86);
  --scrim-soft: rgba(9, 26, 58, 0.32);
  --toast-bg: rgba(9, 26, 58, 0.95);
  --primary-gradient-start: #0c72ff;
  --primary-gradient-end: #0758e6;
  --hero-overlay: linear-gradient(90deg, rgba(245, 250, 255, 0.98) 0%, rgba(245, 250, 255, 0.91) 38%, rgba(245, 250, 255, 0.16) 70%, transparent 100%);
  --promo-gradient: linear-gradient(120deg, #eef8ff, var(--surface-card) 54%, #fff6ef);
  --brand-mark-primary: var(--green);
  --brand-mark-secondary: var(--blue);
  --brand-mark-core: var(--brand-white);
  --focus-ring: rgba(7, 104, 247, 0.32);
  --shadow-card: 0 8px 24px rgba(20, 39, 78, 0.07), 0 1px 2px rgba(20, 39, 78, 0.04);
  --shadow-float: 0 14px 36px rgba(20, 39, 78, 0.14);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f5ee;
  --ink-soft: var(--brand-silver);
  --blue: var(--brand-lime-500);
  --blue-dark: var(--brand-lime-300);
  --blue-soft: #222d10;
  --green: var(--brand-lime-500);
  --green-dark: var(--brand-lime-300);
  --green-soft: #1b260c;
  --orange: #c4c150;
  --orange-soft: #292812;
  --gold: #d9dc72;
  --danger: #ff707a;
  --favorite: #ff6f8e;
  --surface: var(--brand-black);
  --surface-card: var(--brand-charcoal);
  --surface-soft: #0d110c;
  --surface-muted: var(--brand-graphite);
  --surface-accent: #1a220f;
  --surface-success: #151e0c;
  --tint-base: var(--surface-card);
  --border: #293125;
  --border-strong: #3b4633;
  --on-primary: var(--brand-black);
  --header-bg: rgba(8, 11, 7, 0.95);
  --nav-bg: rgba(10, 13, 8, 0.98);
  --glass-bg: rgba(17, 21, 15, 0.94);
  --modal-scrim: rgba(0, 0, 0, 0.72);
  --scrim-strong: rgba(0, 0, 0, 0.84);
  --scrim-soft: rgba(0, 0, 0, 0.48);
  --toast-bg: rgba(243, 245, 238, 0.96);
  --primary-gradient-start: var(--brand-lime-300);
  --primary-gradient-end: var(--brand-lime-500);
  --hero-overlay: linear-gradient(90deg, rgba(8, 11, 7, 0.98) 0%, rgba(8, 11, 7, 0.88) 39%, rgba(8, 11, 7, 0.2) 72%, transparent 100%);
  --promo-gradient: linear-gradient(120deg, #171e0e, var(--surface-card) 55%, #262611);
  --brand-mark-primary: var(--brand-lime-500);
  --brand-mark-secondary: var(--brand-white);
  --brand-mark-core: var(--brand-black);
  --focus-ring: rgba(193, 230, 75, 0.42);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.34), 0 1px 1px rgba(255, 255, 255, 0.03);
  --shadow-float: 0 18px 42px rgba(0, 0, 0, 0.5);
}