/* awayyy — Design tokens come CSS variables
 * Allineato a docs/foundations/09-design-tokens.json
 */

:root {
  /* ────── Color: Surface ────── */
  --surface-canvas:  #FAF8F3; /* sfondo principale (warm white) */
  --surface-raised:  #FFFFFF; /* card, sheet, modali */
  --surface-sunken:  #F2EFE8; /* sfondi secondari */

  /* ────── Color: Accent (lime, max 5-10% per schermo) ────── */
  --accent-primary:       #B6F500;
  --accent-primary-press: #9DD600;

  /* ────── Color: Text ────── */
  --text-primary:   #1A1A1A;
  --text-secondary: #5A5A5A;
  --text-disabled:  #A0A0A0;
  --text-on-accent: #1A1A1A; /* nero su lime, mai bianco */

  /* ────── Color: Border ────── */
  --border-subtle:  #E8E5DD;
  --border-default: #D8D5CD;

  /* ────── Color: Feedback ────── */
  --feedback-success: #2E7A3D;
  --feedback-warning: #B8860B;
  --feedback-error:   #B8362E;

  /* ────── Typography: families ────── */
  --font-display: 'Pacaembu', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ────── Typography: scale (mobile baseline) ────── */
  --fs-display-xl: 36px;  --lh-display-xl: 40px;
  --fs-display-lg: 28px;  --lh-display-lg: 32px;
  --fs-display-md: 22px;  --lh-display-md: 28px;
  --fs-body-lg:    17px;  --lh-body-lg:    26px;
  --fs-body-md:    15px;  --lh-body-md:    22px;
  --fs-body-sm:    13px;  --lh-body-sm:    18px;
  --fs-label:      13px;  --lh-label:      18px;
  --fs-cta:        16px;  --lh-cta:        20px;

  /* ────── Spacing ────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ────── Border radius ────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ────── Elevation (sottile sempre, mai heavy) ────── */
  --shadow-1: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-2: 0 4px 12px rgba(26, 26, 26, 0.06);
  --shadow-3: 0 12px 32px rgba(26, 26, 26, 0.08);

  /* ────── Motion ────── */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-base:    300ms;
  --duration-slow:    500ms;
  --easing-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --easing-soft-in:  cubic-bezier(0.16, 1, 0.3, 1);
  --easing-soft-out: cubic-bezier(0.7, 0, 0.84, 0);
}

/* ────── Reset & base ────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-primary);
  background: #E8E5DD; /* outside iPhone frame */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; cursor: pointer; border: none; background: transparent; }

/* ────── Typography utility classes ────── */
.t-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: 600; letter-spacing: -0.5px; }
.t-display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: 600; letter-spacing: -0.3px; }
.t-display-md { font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-display-md); font-weight: 500; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 400; }
.t-body-md { font-size: var(--fs-body-md); line-height: var(--lh-body-md); font-weight: 400; }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: 400; }
.t-label { font-family: var(--font-display); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; }
.t-cta { font-family: var(--font-display); font-size: var(--fs-cta); line-height: var(--lh-cta); font-weight: 600; }
.t-secondary { color: var(--text-secondary); }

/* ────── Button base ────── */
.btn-primary {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-cta);
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--r-md);
  width: 100%;
  transition: background var(--duration-fast) var(--easing-default);
}
.btn-primary:active { background: var(--accent-primary-press); }

.btn-secondary {
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  font-family: var(--font-display);
  font-size: var(--fs-cta);
  font-weight: 500;
  padding: 14px 24px;
  border-radius: var(--r-md);
  width: 100%;
}

.btn-ghost {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-cta);
  font-weight: 500;
  padding: 14px 24px;
  text-decoration: underline;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-full);
}
.chip-lime {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}

.avatar {
  border-radius: var(--r-full);
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }