/* =========================================
   AThetalife • tokens.css (v2.1, light-only, clean)
   Single source of truth for design tokens
   ========================================= */

/* Default: LIGHT THEME (inviting) — forced */
:root{
  /* Backgrounds & text */
  --color-bg:        #f7f5ef;   /* warm ivory page background */
  --color-surface:   #ffffff;   /* cards / panels */
  --color-elev:      #f1f2f6;   /* raised surfaces */
  --color-ink:       #21242a;   /* primary text (dark) */
  --color-ink-muted: #5b6168;   /* secondary text */
  --color-border:    #dfe3ea;

  /* Brand & accents */
  --brand:           #4b3f72;   /* Deep Wisdom purple */
  --brand-ink:       #0f0c19;   /* text-on-brand if needed */
  --accent:          #2f8e8c;   /* teal accent */

  /* Elevation / focus */
  --shadow-1:        0 6px 24px rgba(0,0,0,.08);
  --shadow-2:        0 12px 32px rgba(0,0,0,.10);
  --shadow-inset:    inset 0 0 0 1px rgba(0,0,0,.04);
  --focus-ring:      0 0 0 3px rgba(75, 63, 114, 0.35);

  /* Image-safe faint wash (for hero backdrops, etc.) */
  --img-safe:        rgba(0,0,0,.02);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;

  --fs-100: 0.8125rem;  /* 13px */
  --fs-200: 0.875rem;   /* 14px */
  --fs-300: 1rem;       /* 16px (body) */
  --fs-400: 1.125rem;   /* 18px */
  --fs-500: 1.25rem;    /* 20px */
  --fs-600: 1.5rem;     /* 24px */
  --fs-700: 1.875rem;   /* 30px */
  --fs-800: 2.25rem;    /* 36px */
  --fs-900: clamp(2rem, 4vw, 3rem); /* hero */

  --lh-tight: 1.2;
  --lh-base:  1.55;

  /* Spacing (8px rhythm) */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* Radii */
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 14px;
  --radius-round: 999px;

  /* Motion */
  --ease-std: cubic-bezier(.2,.6,.2,1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* Z-index */
  --z-nav:   50;
  --z-modal: 900;
  --z-toast: 950;

  /* Optional second background stop for subtle gradients */
  --color-bg-2: #f2efe7;

  /* Force light UI chrome for form controls/scrollbars */
  color-scheme: light;
}

/* ---- Compatibility aliases (one block only) ---- */
:root {
  --bg:      var(--color-bg);
  --surface: var(--color-surface);
  --elev:    var(--color-elev);
  --ink:     var(--color-ink);
  --muted:   var(--color-ink-muted);
  --border:  var(--color-border);
  --shadow:  var(--shadow-1);
}

/* Compact breakpoint adjustments (optional) */
@media (max-width: 720px) {
  :root {
    --fs-900: clamp(1.75rem, 5vw, 2.5rem);
    --container-pad: 0.75rem;
  }
}

/* === Button token set (site-wide) === */
:root {
  --btn-primary-bg: #2B5BD7;          /* passes AA on white */
  --btn-primary-bg-hover: #234CC0;
  --btn-primary-text: #FFFFFF;
  --btn-primary-ring: rgba(43, 91, 215, .45);

  /* Secondary: tuned for light */
  --btn-secondary-text: #2b3138;
  --btn-secondary-border: #c9d1e0;
  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: #eef2f7;

  --btn-radius: 12px;
  --btn-pad-y: .65rem;
  --btn-pad-x: 1rem;
  --btn-font-w: 600;
}

/* Base button + variants (consider moving to base.css later) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-w);
  text-decoration: none; user-select: none; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .05s ease;
  border: 1px solid transparent;
}

/* Dot-notation variants */
.btn.primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn.primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
.btn.primary:active { transform: translateY(.5px); }
.btn.primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-primary-ring); }

.btn.secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn.secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--btn-primary-bg); }
.btn.secondary:active { transform: translateY(.5px); }
.btn.secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-primary-ring); }

/* Kebab-case aliases (match your HTML) */
.btn.btn-primary { composes: btn primary; }     /* if PostCSS not available, duplicate rules below */
.btn.btn-secondary { composes: btn secondary; }

/* Fallback when `composes:` is not supported */
.btn.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn.btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
.btn.btn-primary:active { transform: translateY(.5px); }
.btn.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-primary-ring); }

.btn.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn.btn-secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--btn-primary-bg); }
.btn.btn-secondary:active { transform: translateY(.5px); }
.btn.btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-primary-ring); }

/* Link-style button (for nav items) */
.btn.btn-link,
.btn.link {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  padding: .25rem .5rem;
}
.btn.btn-link:hover,
.btn.link:hover { color: var(--brand); text-decoration: none; }

/* Optional: slightly stronger outline inside dark-ish cards */
.section-card .btn.btn-secondary { border-color: #415171; }