/* =========================================================
   Viteezy Design System — Colors & Type
   US hybrid: EU green anchor, cleaner/more restrained than EU
   ========================================================= */

/* ---------- Fonts ---------- */
/* Sofia Pro is the Viteezy brand typeface (uploaded by user, OTF). */
@font-face { font-family: "Sofia Pro"; font-weight: 200; font-style: normal;
  src: url("fonts/Sofia_Pro_UltraLight_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 200; font-style: italic;
  src: url("fonts/Sofia_Pro_UltraLight_Italic_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 300; font-style: normal;
  src: url("fonts/Sofia_Pro_ExtraLight_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 300; font-style: italic;
  src: url("fonts/Sofia_Pro_ExtraLight_Italic_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 350; font-style: normal;
  src: url("fonts/Sofia_Pro_Light_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 350; font-style: italic;
  src: url("fonts/Sofia_Pro_Light_Italic_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 400; font-style: normal;
  src: url("fonts/Sofia_Pro_Regular_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 400; font-style: italic;
  src: url("fonts/Sofia_Pro_Regular_Italic_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 500; font-style: normal;
  src: url("fonts/Sofia_Pro_Medium_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 500; font-style: italic;
  src: url("fonts/Sofia_Pro_Medium_Italic_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 600; font-style: normal;
  src: url("fonts/Sofia_Pro_Semi_Bold_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 600; font-style: italic;
  src: url("fonts/Sofia_Pro_Semi_Bold_Italic_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 700; font-style: normal;
  src: url("fonts/Sofia_Pro_Bold_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 700; font-style: italic;
  src: url("fonts/Sofia_Pro_Bold_Italic_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 900; font-style: normal;
  src: url("fonts/Sofia_Pro_Black_Az.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Sofia Pro"; font-weight: 900; font-style: italic;
  src: url("fonts/Sofia_Pro_Black_Italic_Az.otf") format("opentype"); font-display: swap; }

/* Fraunces (serif accent) kept from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&display=swap');

:root {
  /* ---------- Brand colors (extracted from logo) ---------- */
  --viteezy-teal-500: #00AB96;   /* primary brand mark color */
  --viteezy-teal-600: #008F7E;   /* hover/press, depth */
  --viteezy-teal-700: #006B5E;   /* deep accent, high-emphasis text on light */
  --viteezy-teal-400: #3FC4B1;   /* lighter tone, highlights */
  --viteezy-teal-300: #8FDED1;   /* soft accent, bg highlights */
  --viteezy-teal-200: #BEECE4;   /* very soft, badge bg */
  --viteezy-teal-100: #E1F6F2;   /* surface, tinted card */
  --viteezy-teal-50:  #F2FBF9;   /* page-level tint */

  /* ---------- Neutrals (warm off-white + deep ink) ---------- */
  --ink-900: #0E1816;  /* body text, display */
  --ink-700: #29403C;  /* secondary text */
  --ink-500: #5A716D;  /* tertiary, captions */
  --ink-300: #9AAAA6;  /* disabled, placeholder */
  --ink-200: #C9D3D0;  /* hairline */
  --ink-100: #E6EBE9;  /* divider, input border */
  --ink-50:  #F4F6F5;  /* neutral surface */

  --paper-0:   #FFFFFF;  /* pure white card */
  --paper-50:  #FAFBFA;  /* page bg (very slight warm tint) */
  --paper-100: #F4F1EC;  /* warm cream accent bg */
  --paper-200: #EAE3D7;  /* warm cream deeper */

  /* ---------- Semantic ---------- */
  --success: #1F9D5A;
  --warning: #D99A2B;
  --danger:  #C9453A;
  --info:    #2F7CC6;

  /* ---------- Semantic token aliases ---------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-muted: var(--ink-300);
  --fg-brand: var(--viteezy-teal-700);
  --fg-on-brand: #FFFFFF;

  --bg-page: var(--paper-50);
  --bg-surface: var(--paper-0);
  --bg-tinted: var(--viteezy-teal-50);
  --bg-warm: var(--paper-100);
  --bg-brand: var(--viteezy-teal-500);
  --bg-brand-soft: var(--viteezy-teal-100);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-700);
  --border-brand: var(--viteezy-teal-500);

  /* ---------- Type families ---------- */
  --font-sans: "Sofia Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Sofia Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-display-xl: 72px;
  --fs-display-lg: 56px;
  --fs-display-md: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.14em;

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

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- Shadows — soft, physical, never colored ---------- */
  --shadow-xs: 0 1px 1px rgba(14, 24, 22, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 24, 22, 0.05), 0 1px 2px rgba(14, 24, 22, 0.04);
  --shadow-md: 0 8px 24px rgba(14, 24, 22, 0.06), 0 2px 6px rgba(14, 24, 22, 0.04);
  --shadow-lg: 0 20px 50px rgba(14, 24, 22, 0.10), 0 4px 12px rgba(14, 24, 22, 0.04);
  --shadow-ring-brand: 0 0 0 4px rgba(0, 171, 150, 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;
}

/* ---------- Semantic text rules ---------- */
body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }

h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-1); }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-1); }
h3, .h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; color: var(--fg-1); }
h4, .h4 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; color: var(--fg-1); }

.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: -0.03em; font-weight: 700; }
.display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: -0.03em; font-weight: 700; }
.display-md { font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: 600; }

.serif-display { font-family: var(--font-serif); font-style: normal; font-weight: 400; letter-spacing: -0.015em; }
.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

p, .body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }
.eyebrow { font-size: var(--fs-eyebrow); line-height: 1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--fg-brand); }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

a { color: var(--viteezy-teal-700); text-decoration: none; border-bottom: 1px solid currentColor; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--viteezy-teal-500); }

::selection { background: var(--viteezy-teal-200); color: var(--ink-900); }