/* Puffy Design System — Colors & Typography tokens
 * Source: puffy-mobile/Presentation/DesignSystem/DesignTokens.swift
 * iOS 26 Liquid Glass base + Puffy brand overlay.
 */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --puffy-mint:            #7FEFE3; /* BackgroundPrimary — primary accent */
  --puffy-mint-disabled:   #CCF9F3; /* 40% mint pre-mixed over white */
  --puffy-mint-stroke:     #9CFFF4; /* teal stroke on primary buttons */
  --puffy-teal:            #00C8B3; /* TealAccent — onboarding icons */
  --puffy-teal-deep:       #00C9B4; /* DarkerTeal */
  --puffy-mint-bottom:     #C8F0EB; /* Gradient bottom */

  /* ── Text ──────────────────────────────────────────────── */
  --puffy-text-primary:    #333333; /* Dark — all body + titles */
  --puffy-text-secondary:  rgba(60, 60, 67, 0.60); /* iOS secondary label */
  --puffy-text-tertiary:   rgba(60, 60, 67, 0.30);
  --puffy-text-on-mint:    #000000; /* button text on mint */

  /* ── Surfaces ──────────────────────────────────────────── */
  --puffy-bg:              #FFFFFF;
  --puffy-bg-grouped:      #F2F2F7; /* iOS grouped table background */
  --puffy-bg-card:         #FFFFFF;
  --puffy-placeholder:     #D9D9D9;
  --puffy-separator:       rgba(60, 60, 67, 0.29); /* iOS separator */

  /* Glass materials (approximations of iOS 26 Liquid Glass) */
  --puffy-glass-regular:   rgba(255, 255, 255, 0.55);
  --puffy-glass-thin:      rgba(255, 255, 255, 0.40);
  --puffy-glass-thick:     rgba(255, 255, 255, 0.75);
  --puffy-glass-border:    rgba(255, 255, 255, 0.80);
  --puffy-glass-shadow:    0 2px 12px rgba(0, 0, 0, 0.06);
  --puffy-glass-blur:      saturate(180%) blur(20px);

  /* Secondary button fill (iOS system gray) */
  --puffy-btn-secondary:   rgba(118, 118, 128, 0.12);

  /* ── Semantic (iOS palette) ────────────────────────────── */
  --puffy-blue:            #007AFF;
  --puffy-orange:          #FF9500;
  --puffy-warn:            #FFB151;

  /* ── Gradient ──────────────────────────────────────────── */
  --puffy-gradient-onboarding: linear-gradient(
    180deg,
    #FFFFFF 0%,
    rgba(200, 240, 235, 0.50) 55%,
    #7FEFE3 100%
  );

  /* ── Radii ─────────────────────────────────────────────── */
  --puffy-radius-frame:    62px; /* iPhone screen mask */
  --puffy-radius-card:     26px; /* Cards / glass containers */
  --puffy-radius-sheet:    20px; /* Sheet inner cards */
  --puffy-radius-row:      14px;
  --puffy-radius-btn:      999px; /* Pill */
  --puffy-radius-chip:     20px;
  --puffy-radius-avatar:   50%;

  /* ── Spacing (8px base) ────────────────────────────────── */
  --puffy-s-1:  4px;
  --puffy-s-2:  8px;
  --puffy-s-3:  12px;
  --puffy-s-4:  16px; /* form padding */
  --puffy-s-5:  20px;
  --puffy-s-6:  24px;
  --puffy-s-8:  32px;
  --puffy-s-9:  36px; /* form item spacing */
  --puffy-s-12: 48px;

  /* ── Elevation ─────────────────────────────────────────── */
  --puffy-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --puffy-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
  --puffy-shadow-lg: 0 8px 28px rgba(113, 113, 113, 0.25);
  --puffy-shadow-float: 0 10px 40px rgba(0, 0, 0, 0.08);

  /* ── Motion ────────────────────────────────────────────── */
  --puffy-ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --puffy-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --puffy-dur-fast:       150ms;
  --puffy-dur-base:       250ms;
  --puffy-dur-slow:       500ms;

  /* ── Typography ────────────────────────────────────────── */
  --puffy-font-sans: -apple-system, "SF Pro Text", "SF Pro Display",
                      "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --puffy-font-rounded: "SF Pro Rounded", -apple-system, "Nunito",
                         system-ui, sans-serif;

  /* Weights — match SF Pro numeric weights */
  --puffy-w-regular:  400;
  --puffy-w-medium:   510;
  --puffy-w-semibold: 590;
  --puffy-w-bold:     700;
  --puffy-w-heavy:    860;

  /* Type scale */
  --puffy-t-hero:     45px; /* Login title — SF Pro Heavy */
  --puffy-t-large:    36px; /* Large title / email input */
  --puffy-t-title:    28px; /* Screen titles */
  --puffy-t-title2:   22px; /* Section titles */
  --puffy-t-headline: 17px; /* Row titles, buttons */
  --puffy-t-body:     16px;
  --puffy-t-subhead:  15px;
  --puffy-t-footnote: 14px;
  --puffy-t-caption:  12px;

  /* Letter spacing */
  --puffy-ls-tight:  -0.43px;
  --puffy-ls-title:  -0.26px;
  --puffy-ls-loose:   0.4px;

  /* Line heights */
  --puffy-lh-tight:  1.1;
  --puffy-lh-base:   1.25;
  --puffy-lh-loose:  1.4;
}

/* ── Semantic type utility classes ───────────────────────── */
.puffy-hero {
  font-family: var(--puffy-font-sans);
  font-size: var(--puffy-t-hero);
  font-weight: var(--puffy-w-heavy);
  letter-spacing: var(--puffy-ls-loose);
  line-height: var(--puffy-lh-tight);
  color: #000;
}
.puffy-title {
  font-family: var(--puffy-font-sans);
  font-size: var(--puffy-t-title);
  font-weight: var(--puffy-w-bold);
  letter-spacing: var(--puffy-ls-title);
  color: var(--puffy-text-primary);
}
.puffy-title2 {
  font-family: var(--puffy-font-sans);
  font-size: var(--puffy-t-title2);
  font-weight: var(--puffy-w-bold);
  letter-spacing: var(--puffy-ls-title);
  color: var(--puffy-text-primary);
}
.puffy-headline {
  font-family: var(--puffy-font-sans);
  font-size: var(--puffy-t-headline);
  font-weight: var(--puffy-w-semibold);
  letter-spacing: var(--puffy-ls-tight);
  color: var(--puffy-text-primary);
}
.puffy-body {
  font-family: var(--puffy-font-sans);
  font-size: var(--puffy-t-body);
  font-weight: var(--puffy-w-regular);
  color: var(--puffy-text-primary);
  line-height: var(--puffy-lh-loose);
}
.puffy-subhead {
  font-family: var(--puffy-font-sans);
  font-size: var(--puffy-t-subhead);
  font-weight: var(--puffy-w-medium);
  color: var(--puffy-text-primary);
}
.puffy-footnote {
  font-family: var(--puffy-font-sans);
  font-size: var(--puffy-t-footnote);
  font-weight: var(--puffy-w-regular);
  color: var(--puffy-text-secondary);
}
.puffy-caption {
  font-family: var(--puffy-font-sans);
  font-size: var(--puffy-t-caption);
  font-weight: var(--puffy-w-medium);
  color: var(--puffy-text-secondary);
}
.puffy-brand-pill-text {
  font-family: var(--puffy-font-sans);
  font-size: 15px;
  font-weight: var(--puffy-w-bold);
  color: var(--puffy-text-primary);
}

/* ── Reusable glass surface mixin ────────────────────────── */
.puffy-glass {
  background: var(--puffy-glass-regular);
  backdrop-filter: var(--puffy-glass-blur);
  -webkit-backdrop-filter: var(--puffy-glass-blur);
  border: 1px solid var(--puffy-glass-border);
  box-shadow: var(--puffy-glass-shadow);
}

/* ── Body defaults ───────────────────────────────────────── */
body {
  font-family: var(--puffy-font-sans);
  color: var(--puffy-text-primary);
  background: var(--puffy-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}