/*
 * Fortitude product theme.
 *
 * The supplied landing page remains the source of truth for the mortar palette,
 * typographic voices, rhythm, mark, and structural hairlines. This layer adds
 * product semantics and an automatic dark counterpart for authenticated tools.
 */

:root,
html[data-palette="mortar"] {
  color-scheme: light;

  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
  --display-weight: 400;

  --color-bg: #e8e6e1;
  --color-surface: #dcd9d2;
  --color-surface-soft: #efede8;
  --color-surface-raised: #f4f3ef;
  --color-text: #1a1a16;
  --color-text-muted: #67675f;
  --color-accent: #55642f;
  --color-accent-2: #55642f;
  --color-divider: color-mix(in srgb, #1a1a16 18%, transparent);
  --control-border: color-mix(in srgb, #1a1a16 52%, transparent);

  --color-neutral-100: #f4f3ef;
  --color-neutral-200: #e6e4de;
  --color-neutral-300: #d3d1c9;
  --color-neutral-400: #b6b3aa;
  --color-neutral-500: #97948b;
  --color-neutral-600: #7a776e;
  --color-neutral-700: #5d5a53;
  --color-neutral-800: #413f39;
  --color-neutral-900: #2a2823;

  --color-accent-100: #eef2e4;
  --color-accent-200: #dbe4c7;
  --color-accent-300: #c0cda6;
  --color-accent-400: #a2b183;
  --color-accent-500: #859564;
  --color-accent-600: #6b7b4a;
  --color-accent-700: #526132;
  --color-accent-800: #3b4722;
  --color-accent-900: #262f16;

  --color-accent-2-100: var(--color-accent-100);
  --color-accent-2-200: var(--color-accent-200);
  --color-accent-2-300: var(--color-accent-300);
  --color-accent-2-400: var(--color-accent-400);
  --color-accent-2-500: var(--color-accent-500);
  --color-accent-2-600: var(--color-accent-600);
  --color-accent-2-700: var(--color-accent-700);
  --color-accent-2-800: var(--color-accent-800);
  --color-accent-2-900: var(--color-accent-900);

  --color-good: #3f6b4c;
  --color-good-strong: #28523a;
  --color-good-wash: color-mix(in srgb, var(--color-good) 13%, transparent);
  --color-warn: #886322;
  --color-warn-strong: #674810;
  --color-warn-wash: color-mix(in srgb, var(--color-warn) 14%, transparent);
  --color-danger: #8a4038;
  --color-danger-strong: #6f2e28;
  --color-danger-wash: color-mix(in srgb, var(--color-danger) 13%, transparent);
  --color-info: #3f6076;
  --color-info-wash: color-mix(in srgb, var(--color-info) 13%, transparent);

  --data-1: #55642f;
  --data-2: #3f6076;
  --data-3: #8a6a1f;
  --data-4: #8f3a34;
  --data-5: #5e4e76;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2a2823 12%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2a2823 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2a2823 20%, transparent);
}

html[data-rhythm="tight"] {
  --leading: 24px;
  --half: 12px;
}

html[data-rhythm="airy"] {
  --leading: 34px;
  --half: 17px;
}

@media (prefers-color-scheme: dark) {
  :root,
  html[data-palette="mortar"] {
    color-scheme: dark;

    --color-bg: #11130f;
    --color-surface: #1a1d17;
    --color-surface-soft: #161914;
    --color-surface-raised: #20241c;
    --color-text: #ece9df;
    --color-text-muted: #a7aa9f;
    --color-accent: #a9ba76;
    --color-accent-2: #a9ba76;
    --color-divider: color-mix(in srgb, #ece9df 20%, transparent);
    --control-border: color-mix(in srgb, #ece9df 44%, transparent);

    --color-neutral-100: #181b16;
    --color-neutral-200: #21251e;
    --color-neutral-300: #31362c;
    --color-neutral-400: #4a5045;
    --color-neutral-500: #696f63;
    --color-neutral-600: #8a8f83;
    --color-neutral-700: #adb0a7;
    --color-neutral-800: #d0d1ca;
    --color-neutral-900: #ece9df;

    --color-accent-100: #1c2314;
    --color-accent-200: #28331b;
    --color-accent-300: #3e4b2b;
    --color-accent-400: #6e8145;
    --color-accent-500: #8fa25f;
    --color-accent-600: #a9ba76;
    --color-accent-700: #c0cd99;
    --color-accent-800: #d7dfba;
    --color-accent-900: #eef2df;

    --color-good: #7fb58a;
    --color-good-strong: #9ac6a2;
    --color-warn: #d0a85b;
    --color-warn-strong: #e0be7a;
    --color-danger: #d77b70;
    --color-danger-strong: #e79a91;
    --color-info: #8fb3c9;

    --data-1: #a9ba76;
    --data-2: #8fb3c9;
    --data-3: #d0a85b;
    --data-4: #d77b70;
    --data-5: #c2a3db;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 28%);
    --shadow-md: 0 3px 10px rgb(0 0 0 / 32%);
    --shadow-lg: 0 14px 36px rgb(0 0 0 / 42%);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.brand-lockup {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.brand-mark {
  align-items: center;
  display: inline-flex;
  flex: none;
  justify-content: center;
  padding: 5px;
  position: relative;
}

.mark {
  display: block;
  height: var(--mark-size, 28px);
  width: var(--mark-size, 28px);
}

.mark .arm {
  fill: none;
  stroke: var(--color-accent);
  stroke-dasharray: var(--mark-dash, none);
  stroke-linecap: butt;
  stroke-linejoin: var(--mark-join, round);
  stroke-width: var(--mark-weight, 2.6);
}

.mark .lobe {
  fill: url("#fh-courses");
}

#fh-courses rect {
  fill: color-mix(in srgb, var(--color-accent) 42%, transparent);
}

.fillshape {
  display: none;
  transform: translateY(calc((1 - var(--heart-fill, 0.65)) * 22.9px));
  transform-origin: 16px 4.1px;
}

html[data-fill-shape="dome"] .sh-dome {
  display: block;
}

html[data-heart-rise="on"] .fillshape {
  animation: fortitude-heart-rise 1.8s cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes fortitude-heart-rise {
  from {
    transform: translateY(22.9px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fillshape {
    animation: none !important;
  }
}

.rule {
  background: var(--color-divider);
  border: 0;
  height: 1px;
  margin: 0;
}

.kicker,
.eyebrow {
  color: var(--color-accent);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: var(--half);
  text-transform: uppercase;
}

.display {
  font-family: var(--font-heading);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}