/* ============================================================
   Skincoach Design System — Colors & Type
   Source of truth: colors_and_type.css (web) + HANDOFF.md (iOS)
   See AUDIT.md for reconciliation log.
   Brand: Skincoach (no "AI Skincoach", no persona "Lia")
   Mood:  calm, trust-first, clinical-friendly, wellness
   ============================================================ */

/* SF Pro Rounded is the actual app font (system .rounded). On the web
   we substitute Nunito (Google Fonts). SUBSTITUTION FLAGGED. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Color tokens (LIGHT) ---------- */
  /* Surfaces */
  --sc-background: #F2FAFA;
  --sc-surface: #FFFFFF;
  --sc-elevated-surface: #EEF8F8;

  /* Text */
  --sc-primary-text: #173039;
  --sc-secondary-text: #45616E;
  --sc-tertiary-text: #99B3BF;
  --sc-on-primary: #FFFFFF;

  /* Action */
  --sc-primary-action: #0894B3;
  --sc-primary-action-hover: #077A95;
  --sc-secondary-action: #D9F0F5;
  --sc-secondary-action-label: #1F7A8C;

  /* Structure */
  --sc-hairline: #D4E6E8;
  --sc-hairline-strong: #C8D6DA;

  /* State — reconciled with HANDOFF.md §2.1 (darker, more readable on #F2FAFA) */
  --sc-success: #0E7E58;
  --sc-success-soft: #DDF1E8;
  --sc-warning: #B8740E;
  --sc-warning-soft: #FCE3D2;
  --sc-danger-text: #C8412B;
  --sc-danger-soft: #FBE2DD;
  --sc-weekly: #F5A623;

  /* ---------- Spacing (4-pt scale, matches SCSpacing in HANDOFF) ---------- */
  --sc-space-xs: 4px;
  --sc-space-sm: 8px;
  --sc-space-md: 12px;
  --sc-space-lg: 16px;
  --sc-space-xl: 20px;
  --sc-space-xl2: 24px;
  --sc-space-xl3: 32px;
  --sc-space-xl4: 48px;

  /* ---------- Radius ---------- */
  --sc-radius-sm: 8px;
  --sc-radius-md: 12px;
  --sc-radius-button: 14px;
  --sc-radius-card: 16px;
  --sc-radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --sc-shadow-card: 0 4px 12px rgba(23, 48, 57, 0.06);
  --sc-shadow-card-hover: 0 6px 16px rgba(23, 48, 57, 0.08);
  --sc-shadow-card-dark: 0 2px 8px rgba(0, 0, 0, 0.30);
  --sc-shadow-sheet: 0 -4px 14px rgba(23, 48, 57, 0.10);
  --sc-shadow-tabbar: 0 8px 12px rgba(23, 48, 57, 0.08);

  /* ---------- Motion ---------- */
  --sc-motion-fast: 140ms;
  --sc-motion-base: 200ms;
  --sc-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Type families ---------- */
  --sc-font-rounded: "Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --sc-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  /* ---------- Type scale (reconciled with HANDOFF.md §2.2) ---------- */
  --sc-text-largeTitle: 28px;   /* welcome / paywall headline */
  --sc-text-title1:     22px;   /* sheet / sub-section */
  --sc-text-title2:     17px;   /* card titles, list rows */
  --sc-text-body:       15px;   /* default body, buttons */
  --sc-text-secondary:  14px;   /* body paragraphs */
  --sc-text-caption:    12px;
  --sc-text-micro:      11px;

  --sc-leading-tight: 1.18;
  --sc-leading-snug:  1.30;
  --sc-leading-normal: 1.45;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --sc-background: #171F24;
    --sc-surface: #21282E;
    --sc-elevated-surface: #293338;
    --sc-primary-text: #EDF5F8;
    --sc-secondary-text: #99B3BF;
    --sc-tertiary-text: #6E8590;
    --sc-on-primary: #FFFFFF;
    --sc-primary-action: #26B8D6;
    --sc-secondary-action: #1C2E38;
    --sc-hairline: rgba(255,255,255,0.10);
    --sc-hairline-strong: rgba(255,255,255,0.18);
    --sc-danger-text: #FF7373;
    --sc-shadow-card: var(--sc-shadow-card-dark);
  }
}

[data-sc-theme="dark"] {
  --sc-background: #171F24;
  --sc-surface: #21282E;
  --sc-elevated-surface: #293338;
  --sc-primary-text: #EDF5F8;
  --sc-secondary-text: #99B3BF;
  --sc-tertiary-text: #6E8590;
  --sc-primary-action: #26B8D6;
  --sc-secondary-action: #1C2E38;
  --sc-hairline: rgba(255,255,255,0.10);
  --sc-hairline-strong: rgba(255,255,255,0.18);
  --sc-danger-text: #FF7373;
  --sc-shadow-card: var(--sc-shadow-card-dark);
}

[data-sc-theme="light"] {
  --sc-background: #F2FAFA;
  --sc-surface: #FFFFFF;
  --sc-elevated-surface: #EEF8F8;
  --sc-primary-text: #173039;
  --sc-secondary-text: #45616E;
  --sc-tertiary-text: #99B3BF;
  --sc-primary-action: #0894B3;
  --sc-secondary-action: #D9F0F5;
  --sc-hairline: #D4E6E8;
  --sc-hairline-strong: #C8D6DA;
  --sc-danger-text: #C8412B;
}

/* ============================================================
   Semantic typography — matches SCTypography in HANDOFF §2.2
   ============================================================ */
.sc-large-title {
  font-family: var(--sc-font-rounded);
  font-weight: 800;
  font-size: var(--sc-text-largeTitle);
  line-height: var(--sc-leading-tight);
  letter-spacing: -0.02em;
  color: var(--sc-primary-text);
}

.sc-title-1 {
  font-family: var(--sc-font-rounded);
  font-weight: 700;
  font-size: var(--sc-text-title1);
  line-height: var(--sc-leading-snug);
  letter-spacing: -0.01em;
  color: var(--sc-primary-text);
}

.sc-screen-title,
.sc-title-2 {
  font-family: var(--sc-font-rounded);
  font-weight: 700;
  font-size: var(--sc-text-title2);
  line-height: var(--sc-leading-snug);
  color: var(--sc-primary-text);
}

.sc-body {
  font-family: var(--sc-font-rounded);
  font-weight: 500;
  font-size: var(--sc-text-body);
  line-height: var(--sc-leading-normal);
  color: var(--sc-primary-text);
}

.sc-secondary {
  font-family: var(--sc-font-rounded);
  font-weight: 400;
  font-size: var(--sc-text-secondary);
  line-height: var(--sc-leading-normal);
  color: var(--sc-secondary-text);
}

.sc-caption {
  font-family: var(--sc-font-rounded);
  font-weight: 500;
  font-size: var(--sc-text-caption);
  line-height: var(--sc-leading-snug);
  color: var(--sc-secondary-text);
}

.sc-micro-label {
  font-family: var(--sc-font-rounded);
  font-weight: 700;
  font-size: var(--sc-text-micro);
  line-height: var(--sc-leading-snug);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-secondary-text);
}

/* ============================================================
   Surface helpers
   ============================================================ */
.sc-screen-bg { background: var(--sc-background); }

.sc-card {
  background: var(--sc-surface);
  border-radius: var(--sc-radius-card);
  border: 1px solid color-mix(in srgb, var(--sc-hairline) 70%, transparent);
  box-shadow: var(--sc-shadow-card);
  padding: var(--sc-space-lg);
}

.sc-button-primary {
  min-height: 52px;
  border-radius: var(--sc-radius-button);
  background: var(--sc-primary-action);
  color: var(--sc-on-primary);
  font-family: var(--sc-font-rounded);
  font-weight: 700;
  font-size: var(--sc-text-body);
  border: none;
  padding: 0 16px;
  cursor: pointer;
  transition: transform var(--sc-motion-fast) var(--sc-motion-easing);
}
.sc-button-primary:active { transform: scale(0.99); }

.sc-button-secondary {
  min-height: 52px;
  border-radius: var(--sc-radius-button);
  background: var(--sc-secondary-action);
  color: var(--sc-secondary-action-label, var(--sc-primary-action));
  border: 1px solid color-mix(in srgb, var(--sc-primary-action) 25%, transparent);
  font-family: var(--sc-font-rounded);
  font-weight: 700;
  font-size: var(--sc-text-body);
  padding: 0 16px;
  cursor: pointer;
  transition: transform var(--sc-motion-fast) var(--sc-motion-easing);
}
.sc-button-secondary:active { transform: scale(0.99); }