/**
 * Sama Yoga brand stylesheet
 * Version: 1.0
 *
 * A quiet visual system for daily practice: deep blue, ocean, seafoam,
 * sand, and mist. This file is standalone and can be used outside Sama Yoga.
 *
 * Font note: Sama Yoga uses Cormorant Garamond (display) and Inter (body).
 * Load these through your approved web-font provider or self-hosted files
 * before applying them in production. The fallbacks below remain reliable
 * when a web-font license, consent policy, or import is not available.
 */

:root {
  /* Color */
  --sama-deep-blue: #0b1d2a;
  --sama-ocean: #1e6b7a;
  --sama-seafoam: #68a99f;
  --sama-sand: #e8e2d6;
  --sama-mist: #f7f7f2;
  --sama-paper: #fffdf8;
  --sama-slate: #43515a;
  --sama-border: #d4d5cd;
  --sama-danger: #ad3e35;

  /* Semantic color */
  --sama-color-background: var(--sama-mist);
  --sama-color-surface: var(--sama-paper);
  --sama-color-text: var(--sama-deep-blue);
  --sama-color-text-muted: var(--sama-slate);
  --sama-color-action: var(--sama-ocean);
  --sama-color-action-contrast: var(--sama-mist);
  --sama-color-accent: var(--sama-seafoam);
  --sama-color-border: var(--sama-border);

  /* Typography */
  --sama-font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sama-font-body: Inter, "Avenir Next", "Segoe UI", Helvetica, sans-serif;
  --sama-text-xs: 0.75rem;
  --sama-text-sm: 0.875rem;
  --sama-text-base: 1rem;
  --sama-text-lg: 1.125rem;
  --sama-text-xl: 1.25rem;
  --sama-text-2xl: 1.5rem;
  --sama-text-3xl: 1.875rem;
  --sama-text-4xl: 2.25rem;
  --sama-leading-tight: 1.05;
  --sama-leading-body: 1.65;
  --sama-tracking-label: 0.16em;

  /* Space */
  --sama-space-1: 0.25rem;
  --sama-space-2: 0.5rem;
  --sama-space-3: 0.75rem;
  --sama-space-4: 1rem;
  --sama-space-5: 1.25rem;
  --sama-space-6: 1.5rem;
  --sama-space-8: 2rem;
  --sama-space-10: 2.5rem;
  --sama-space-12: 3rem;
  --sama-space-16: 4rem;
  --sama-space-20: 5rem;

  /* Shape and depth */
  --sama-radius-sm: 0.5rem;
  --sama-radius-md: 0.75rem;
  --sama-radius-lg: 1.15rem;
  --sama-radius-pill: 9999px;
  --sama-shadow-sm: 0 8px 20px -16px rgb(11 29 42 / 0.36);
  --sama-shadow-md: 0 20px 44px -28px rgb(11 29 42 / 0.42);
  --sama-focus-ring: 0 0 0 3px rgb(104 169 159 / 0.45);
}

/* Practical type utilities */
.sama-display {
  color: var(--sama-color-text);
  font-family: var(--sama-font-display);
  font-size: clamp(var(--sama-text-3xl), 5vw, 4.5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.sama-body {
  color: var(--sama-color-text-muted);
  font-family: var(--sama-font-body);
  font-size: var(--sama-text-base);
  line-height: var(--sama-leading-body);
}

.sama-label {
  color: var(--sama-color-action);
  font-family: var(--sama-font-body);
  font-size: var(--sama-text-xs);
  font-weight: 600;
  letter-spacing: var(--sama-tracking-label);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Practical button utilities */
.sama-button {
  align-items: center;
  background: var(--sama-color-action);
  border: 1px solid var(--sama-color-action);
  border-radius: var(--sama-radius-pill);
  color: var(--sama-color-action-contrast);
  display: inline-flex;
  font-family: var(--sama-font-body);
  font-size: var(--sama-text-sm);
  font-weight: 600;
  gap: var(--sama-space-2);
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--sama-space-3) var(--sama-space-5);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.sama-button:hover {
  background: var(--sama-deep-blue);
  border-color: var(--sama-deep-blue);
}

.sama-button:focus-visible,
.sama-button--quiet:focus-visible {
  box-shadow: var(--sama-focus-ring);
  outline: none;
}

.sama-button:active { transform: translateY(1px); }

.sama-button--quiet {
  background: transparent;
  border-color: var(--sama-color-border);
  color: var(--sama-color-text);
}

.sama-button--quiet:hover {
  background: var(--sama-sand);
  border-color: var(--sama-sand);
  color: var(--sama-deep-blue);
}