@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");

/* ====================================================================
   SHARED SITE THEME
   Purpose: centralize Skeptie's public-web palette, semantic tokens,
   and base document primitives in one reusable theme source.
   ==================================================================== */

:root {
  color-scheme: light;

  /* 1. Raw palette tokens aligned with lib/themes/colors.dart */
  --site-color-brilliance-ss: #fefdfc;
  --site-color-dark-charcoal-ss: #323232;
  --site-color-hint-of-orange-s1: #f8e6d8;
  --site-color-castle-in-the-clouds-s2: #f0dbc9;
  --site-color-truffle-s3: #c2a88e;
  --site-color-olive-leaf: #5a5d38;
  --site-color-black-cherry: #5f1313;

  /* 2. Shared semantic text and surface tokens */
  --site-color-text: var(--site-color-dark-charcoal-ss);
  --site-color-text-soft: rgba(50, 50, 50, 0.76);
  --site-color-text-muted: rgba(50, 50, 50, 0.54);
  --site-color-text-faint: rgba(50, 50, 50, 0.42);
  --site-color-panel: var(--site-color-castle-in-the-clouds-s2);
  --site-color-surface-soft: rgba(76, 50, 51, 0.1);
  --site-color-surface-active: rgba(90, 93, 56, 0.1);
  --site-color-surface-emphasis-soft: rgba(76, 50, 51, 0.08);
  --site-color-card-overlay-soft: rgba(76, 50, 51, 0.06);
  --site-color-card-overlay-faint: rgba(76, 50, 51, 0.05);
  --site-color-focus: rgba(90, 93, 56, 0.24);
  --site-color-success: #9ce5a2;
  --site-color-success-soft: rgba(156, 229, 162, 0.14);
  --site-color-danger: var(--site-color-black-cherry);
  --site-color-on-danger: var(--site-color-hint-of-orange-s1);
  --site-color-warning: #f1d18a;
  --site-color-warning-soft: rgba(241, 209, 138, 0.14);
  --site-color-info: rgba(50, 50, 50, 0.76);

  /* 3. Shared strength, progress, and accent tokens */
  --site-color-strength-track: rgba(76, 50, 51, 0.12);
  --site-color-strength-empty: rgba(76, 50, 51, 0.3);
  --site-color-strength-fair: #a26a3a;
  --site-color-strength-good: #8c7b48;
  --site-color-strength-strong: #5a5d38;
  --site-color-progress-track: rgba(76, 50, 51, 0.14);
  --site-color-progress-complete: rgba(76, 50, 51, 0.45);
  --site-color-olive-soft: rgba(90, 93, 56, 0.12);

  /* 4. Shared component surface tokens */
  --site-surface-feature-card:
    linear-gradient(
      145deg,
      rgba(248, 230, 216, 0.64) 0%,
      rgba(240, 219, 201, 0.92) 100%
    );
  --site-surface-feature-icon: var(--site-color-olive-soft);
  --site-surface-home-feature-card: var(--site-color-hint-of-orange-s1);

  /* 5. Shared button tokens */
  --site-button-primary-background: var(--site-color-olive-leaf);
  --site-button-primary-text: var(--site-color-hint-of-orange-s1);
  --site-button-primary-background-hover: rgba(90, 93, 56, 0.14);
  --site-button-primary-text-hover: var(--site-color-olive-leaf);
  --site-button-secondary-background: var(--site-color-dark-charcoal-ss);
  --site-button-secondary-text: var(--site-color-brilliance-ss);
  --site-button-secondary-background-hover: rgba(50, 50, 50, 0.1);
  --site-button-secondary-text-hover: var(--site-color-dark-charcoal-ss);

  /* 6. Shared page-shell primitives */
  --site-page-background: var(--site-color-truffle-s3);
  --site-page-fallback:
    radial-gradient(circle at 7% 6%, rgba(248, 230, 216, 0.88) 0%, rgba(248, 230, 216, 0) 52%),
    radial-gradient(circle at 116% 114%, rgba(90, 93, 56, 0.32) -19%, rgba(248, 230, 216, 0) 49%),
    var(--site-page-background);
  --site-radius-field: 12px;
  --site-radius-pill: 999px;
}

/* ====================================================================
   SHARED DOCUMENT BASE
   Purpose: establish consistent box sizing, typography, page
   background, and caret behavior across all public pages.
   ==================================================================== */

* {
  box-sizing: border-box;
}

html {
  background: var(--site-page-fallback);
}

body {
  color: var(--site-color-text);
  font-family: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  caret-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
}

input,
textarea,
select,
[contenteditable="true"] {
  caret-color: var(--site-color-text);
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}