/* =====================================================================
   inevidence — Design Tokens
   Brand: inevidence (alternative, alpha)
   ===================================================================== */

@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/InterTight-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Source palette ---------- */
  --color-deep-grape: #261244;
  --color-deep-grape-hover: #351A5C;
  --color-deep-grape-active: #1B0D31;
  --color-bright-turquoise: #2CE6D6;
  --color-hot-pink: #FF4D8A;
  --color-soft-grey: #E9E9F0;

  --color-purple: #895EF7;
  --color-indigo: #6A84ED;
  --color-blue: #4DA1F7;
  --color-teal: #21CBDD;
  --color-green: #79E3A9;
  --color-yellow: #FFC63C;
  --color-orange: #FF7640;
  --color-red: #F03062;

  /* ---------- Neutral scale ---------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F8F8FB;
  --neutral-100:  #F1F1F6;
  --neutral-200:  #E9E9F0;
  --neutral-300:  #D7DAE5;
  --neutral-400:  #A6ACC4;
  --neutral-500:  #7D849D;
  --neutral-600:  #5F667D;
  --neutral-700:  #40465C;
  --neutral-800:  #252A3A;
  --neutral-900:  #11131C;
  --neutral-1000: #000000;

  /* ---------- Backgrounds ---------- */
  --bg-canvas: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-subtle: var(--neutral-100);
  --bg-surface-muted: var(--neutral-200);
  --bg-deep-grape: var(--color-deep-grape);

  /* ---------- Text ---------- */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-inverse: var(--neutral-0);
  --text-deep-grape: var(--color-deep-grape);

  /* ---------- Icons ---------- */
  --icon-default: var(--color-deep-grape);
  --icon-muted: var(--neutral-500);
  --icon-subtle: var(--neutral-400);
  --icon-inverse: var(--neutral-0);
  --icon-accent: var(--color-bright-turquoise);

  /* ---------- Borders / dividers ---------- */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-bright-turquoise: var(--color-bright-turquoise);
  --divider-default: var(--neutral-200);
  --divider-strong: var(--neutral-300);
  --divider-accent: var(--color-bright-turquoise);

  /* ---------- Semantic — success ---------- */
  --success-surface: #E8FAF0;
  --success-border: #79E3A9;
  --success-icon: #16784C;
  --success-text: #0F5C39;
  --success-solid: #16784C;
  --success-solid-hover: #0F5C39;

  /* ---------- Semantic — warning ---------- */
  --warning-surface: #FFF6D8;
  --warning-border: #FFC63C;
  --warning-icon: #8A5B00;
  --warning-text: #684400;
  --warning-solid: #8A5B00;
  --warning-solid-hover: #684400;

  /* ---------- Semantic — danger ---------- */
  --danger-surface: #FFE8EF;
  --danger-border: #F03062;
  --danger-icon: #B3123C;
  --danger-text: #8F0F31;
  --danger-solid: #B3123C;
  --danger-solid-hover: #8F0F31;

  /* ---------- Semantic — info ---------- */
  --info-surface: #EAF4FF;
  --info-border: #4DA1F7;
  --info-icon: #145DA0;
  --info-text: #104A80;
  --info-solid: #145DA0;
  --info-solid-hover: #104A80;

  /* ---------- Accent surface tints ---------- */
  --hot-pink-surface: #FFF0F6;
  --purple-surface: #F2ECFF;
  --blue-surface: #EAF4FF;
  --teal-surface: #E6FBFD;
  --bright-turquoise-surface: #E6FBF9;
  --bright-turquoise-surface-strong: #CCF8F4;

  /* ---------- Footer ---------- */
  --footer-bg: var(--color-deep-grape);
  --footer-bg-elevated: #2E1754;
  --footer-border: #3D246A;
  --footer-text: var(--neutral-0);
  --footer-text-muted: var(--neutral-300);
  --footer-link: var(--neutral-0);
  --footer-link-hover: var(--color-bright-turquoise);

  /* ---------- Buttons ---------- */
  --btn-primary-bg: var(--color-deep-grape);
  --btn-primary-bg-hover: var(--color-deep-grape-hover);
  --btn-primary-bg-active: var(--color-deep-grape-active);
  --btn-primary-text: var(--neutral-0);
  --btn-secondary-bg: var(--neutral-0);
  --btn-secondary-text: var(--color-deep-grape);
  --btn-secondary-border: var(--neutral-300);

  /* ---------- Typography ---------- */
  --font-family-base: 'Inter Tight', sans-serif;

  /* Display */
  --type-display-lg: 700 56px/1.08 var(--font-family-base);
  --type-display-md: 700 44px/1.12 var(--font-family-base);

  /* Headlines */
  --type-headline-lg: 650 32px/1.20 var(--font-family-base);
  --type-headline-md: 650 24px/1.25 var(--font-family-base);
  --type-headline-sm: 650 20px/1.30 var(--font-family-base);

  /* Body */
  --type-body-lg: 400 18px/1.55 var(--font-family-base);
  --type-body-md: 400 16px/1.50 var(--font-family-base);
  --type-body-sm: 400 14px/1.45 var(--font-family-base);

  /* Labels */
  --type-label-lg: 650 16px/1.25 var(--font-family-base);
  --type-label-md: 650 14px/1.35 var(--font-family-base);
  --type-label-sm: 650 12px/1.35 var(--font-family-base);

  /* Caption */
  --type-caption: 400 12px/1.35 var(--font-family-base);

  /* Letter spacing (applied via utility classes; see below) */
  --tracking-display-lg: -0.04em;
  --tracking-display-md: -0.035em;
  --tracking-headline-lg: -0.025em;
  --tracking-headline-md: -0.020em;
  --tracking-headline-sm: -0.015em;
  --tracking-body: 0em;
  --tracking-label-sm: 0.08em;
  --tracking-caption: 0.02em;

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0px;
  --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;

  --gutter-sm: 16px;
  --gutter-md: 24px;
  --gutter-lg: 32px;
  --page-max-width: 1200px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(17, 19, 28, 0.08);
  --shadow-md: 0 4px 12px rgba(17, 19, 28, 0.12);
  --shadow-lg: 0 12px 32px rgba(17, 19, 28, 0.16);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
}

/* =====================================================================
   Base type — semantic helpers
   ===================================================================== */
html, body {
  font-family: var(--font-family-base);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h-display-lg { font: var(--type-display-lg); letter-spacing: var(--tracking-display-lg); margin: 0; }
h2, .h-display-md { font: var(--type-display-md); letter-spacing: var(--tracking-display-md); margin: 0; }
.h-headline-lg    { font: var(--type-headline-lg); letter-spacing: var(--tracking-headline-lg); margin: 0; }
h3, .h-headline-md { font: var(--type-headline-md); letter-spacing: var(--tracking-headline-md); margin: 0; }
h4, .h-headline-sm { font: var(--type-headline-sm); letter-spacing: var(--tracking-headline-sm); margin: 0; }

.body-lg { font: var(--type-body-lg); }
p, .body-md { font: var(--type-body-md); margin: 0; }
.body-sm { font: var(--type-body-sm); }

.label-lg { font: var(--type-label-lg); }
.label-md { font: var(--type-label-md); }
.label-sm { font: var(--type-label-sm); letter-spacing: var(--tracking-label-sm); text-transform: uppercase; }
.caption  { font: var(--type-caption); letter-spacing: var(--tracking-caption); color: var(--text-muted); }

/* No italics — enforce normal style globally */
em, i, cite, address, dfn, var { font-style: normal; }

/* =====================================================================
   Utility — wordmark
   ===================================================================== */
.wordmark {
  font-family: var(--font-family-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-deep-grape);
  text-transform: lowercase;
  font-style: normal;
  line-height: 1;
}
.wordmark--inverse { color: var(--text-inverse); }

/* =====================================================================
   Focus ring — Bright Turquoise, always visible
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--border-bright-turquoise);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}