/* =============================================================
   Nowambee Design Tokens
   Self-contained copy of design-system/colors_and_type.css, which
   mirrors lib/theme/app_tokens.dart. Keep in lock-step with the app:
   when a token changes in app_tokens.dart, change it here too.
   (The legacy Calisto MT @font-face was dropped — it's bundled-but-
   unused in the app and the local font file isn't shipped with the site.)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

:root {
  /* ---------- Color: brand ---------- */
  --jungle-primary:       #2E5742;   /* moss — primary brand */
  --jungle-primary-dark:  #1F3C2E;
  --jungle-primary-soft:  #E7EFE8;   /* tinted surface */
  --jungle-accent:        #E08A50;   /* terracotta sun */
  --jungle-accent-soft:   #FBE8D7;
  --jungle-leaf:          #6E9380;   /* sage secondary */

  /* ---------- Color: ink / text ---------- */
  --jungle-ink:           #111714;
  --jungle-text:          #1B231E;
  --jungle-text-muted:    #6D736C;
  --jungle-text-faint:    #9AA098;

  /* ---------- Color: surface / canvas ---------- */
  --jungle-canvas:        #F8F9FB;   /* page background */
  --jungle-canvas-alt:    #F1F2F5;
  --jungle-surface:       #FFFFFF;   /* cards */
  --jungle-surface-muted: #F4F4F5;   /* inputs, chips */
  --jungle-border:        #E8E8EC;
  --jungle-border-strong: #D6D6DC;

  /* ---------- Color: status ---------- */
  --jungle-success:       #3B8C5F;
  --jungle-danger:        #C2553F;
  --jungle-warning:       #D8993E;

  /* ---------- Color: moment viewer (only dark surface) ---------- */
  --jungle-moment-canvas:         #1B231E;
  --jungle-moment-canvas-overlay: #201827;

  /* ---------- Spacing scale ---------- */
  --jungle-space-xxs: 4px;
  --jungle-space-xs:  8px;
  --jungle-space-sm:  12px;
  --jungle-space-md:  16px;
  --jungle-space-lg:  24px;
  --jungle-space-xl:  32px;
  --jungle-space-xxl: 48px;

  /* ---------- Radii ---------- */
  --jungle-radius-sm:   12px;
  --jungle-radius-md:   16px;
  --jungle-radius-lg:   22px;
  --jungle-radius-xl:   28px;
  --jungle-radius-pill: 999px;

  /* ---------- Layout ---------- */
  --jungle-width-compact: 420px;
  --jungle-width-regular: 560px;
  --jungle-width-wide:    860px;

  /* ---------- Elevation: two-layer shadows ---------- */
  --jungle-shadow-soft:
    0 3px 6px rgba(27, 35, 30, 0.06),
    0 10px 16px rgba(27, 35, 30, 0.03);
  --jungle-shadow-raised:
    0 4px 8px rgba(17, 23, 20, 0.08),
    0 14px 22px rgba(17, 23, 20, 0.04);
  --jungle-shadow-floating:
    0 6px 12px rgba(17, 23, 20, 0.12),
    0 18px 28px rgba(17, 23, 20, 0.06);
  --jungle-glow-primary:
    0 8px 18px rgba(46, 87, 66, 0.32);
  --jungle-glow-accent:
    0 8px 18px rgba(224, 138, 80, 0.32);

  /* ---------- Gradients ---------- */
  --jungle-canvas-atmosphere:
    linear-gradient(135deg, #FCFDFE 0%, var(--jungle-canvas) 50%, var(--jungle-canvas-alt) 100%);
  --jungle-surface-rim:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 8%);
  --jungle-surface-lift:
    linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%);
  --jungle-button-convex:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.08) 100%);
  --jungle-story-ring:
    linear-gradient(135deg, var(--jungle-primary) 0%, var(--jungle-accent) 100%);

  /* ---------- Type: families ---------- */
  --jungle-font-ui:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --jungle-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --jungle-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: weights ---------- */
  --jungle-weight-regular:  400;
  --jungle-weight-medium:   500;
  --jungle-weight-semibold: 600;
  --jungle-weight-bold:     700;
  --jungle-weight-black:    800;

  /* ---------- Type: sizes ---------- */
  --jungle-size-display-lg: 44px;
  --jungle-size-display-md: 36px;
  --jungle-size-display-sm: 30px;
  --jungle-size-headline-lg: 26px;
  --jungle-size-headline-md: 22px;
  --jungle-size-headline-sm: 18px;
  --jungle-size-title-lg:    17px;
  --jungle-size-title-md:    15px;
  --jungle-size-title-sm:    13px;
  --jungle-size-body-lg:     15px;
  --jungle-size-body-md:    13.5px;
  --jungle-size-body-sm:    12.5px;
  --jungle-size-label-lg:   14.5px;
  --jungle-size-label-md:   12.5px;
  --jungle-size-label-sm:    11px;

  /* ---------- Easing & duration ---------- */
  --jungle-ease-standard: cubic-bezier(0.33, 1, 0.68, 1);  /* easeOutCubic */
  --jungle-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack */
  --jungle-dur-fast:    180ms;
  --jungle-dur-medium:  220ms;
  --jungle-dur-slow:    360ms;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--jungle-font-ui);
  font-size: var(--jungle-size-body-lg);
  font-weight: var(--jungle-weight-regular);
  line-height: 1.5;
  color: var(--jungle-text);
  background: var(--jungle-canvas-atmosphere);
  background-color: var(--jungle-canvas);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--jungle-size-display-md);
  font-weight: var(--jungle-weight-black);
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--jungle-text);
  margin: 0;
}

h2, .h2 {
  font-size: var(--jungle-size-headline-lg);
  font-weight: var(--jungle-weight-black);
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--jungle-text);
  margin: 0;
}

h3, .h3 {
  font-size: var(--jungle-size-headline-md);
  font-weight: var(--jungle-weight-black);
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--jungle-text);
  margin: 0;
}

h4, .h4 {
  font-size: var(--jungle-size-headline-sm);
  font-weight: var(--jungle-weight-bold);
  line-height: 1.25;
  color: var(--jungle-text);
  margin: 0;
}

p, .body {
  font-size: var(--jungle-size-body-lg);
  line-height: 1.55;
  color: var(--jungle-text);
  margin: 0;
}

.body-md, small {
  font-size: var(--jungle-size-body-md);
  line-height: 1.5;
  color: var(--jungle-text-muted);
}

.body-sm, .caption {
  font-size: var(--jungle-size-body-sm);
  line-height: 1.4;
  color: var(--jungle-text-muted);
}

/* Small caps section labels — the recurring "PEOPLE SHARING TODAY" pattern */
.eyebrow, .section-label {
  font-size: var(--jungle-size-label-sm);
  font-weight: var(--jungle-weight-black);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--jungle-text-muted);
}
.eyebrow--dark { color: var(--jungle-primary-dark); }
.eyebrow--white { color: #FFFFFF; }

a {
  color: var(--jungle-primary);
  font-weight: var(--jungle-weight-bold);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

hr, .divider {
  height: 1px;
  background: var(--jungle-border);
  border: 0;
  margin: var(--jungle-space-md) 0;
}

/* =============================================================
   COMPONENTS
   ============================================================= */

.surface {
  background: var(--jungle-surface-lift);
  border-radius: var(--jungle-radius-lg);
  box-shadow: var(--jungle-shadow-soft);
  position: relative;
  overflow: hidden;
}
.surface::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--jungle-surface-rim);
  pointer-events: none;
}
.surface--floating { box-shadow: var(--jungle-shadow-floating); }
.surface--muted { background: var(--jungle-canvas-alt); }
.surface--ink { background: var(--jungle-ink); color: #FFFFFF; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 54px; padding: 0 24px;
  background: var(--jungle-ink); color: #FFFFFF;
  border-radius: var(--jungle-radius-md); border: 0;
  font-family: var(--jungle-font-ui);
  font-size: var(--jungle-size-label-lg); font-weight: var(--jungle-weight-bold);
  letter-spacing: 0.1px; cursor: pointer;
  box-shadow: var(--jungle-shadow-raised);
  transition: transform var(--jungle-dur-fast) var(--jungle-ease-spring), filter var(--jungle-dur-fast) ease;
}
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn-primary:active { transform: scale(0.97); }

.btn-moss {
  background: var(--jungle-primary);
  box-shadow: var(--jungle-shadow-raised), var(--jungle-glow-primary);
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 54px; padding: 0 24px;
  background: transparent; color: var(--jungle-text);
  border: 1.4px solid var(--jungle-border-strong);
  border-radius: var(--jungle-radius-md);
  font-family: var(--jungle-font-ui);
  font-size: var(--jungle-size-label-lg); font-weight: var(--jungle-weight-bold);
  cursor: pointer;
  transition: background var(--jungle-dur-fast) ease;
}
.btn-secondary:hover { background: var(--jungle-surface-muted); text-decoration: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--jungle-radius-pill);
  background: var(--jungle-surface-muted);
  font-size: var(--jungle-size-label-md);
  font-weight: var(--jungle-weight-semibold);
  color: var(--jungle-text);
}
.pill--primary { background: var(--jungle-primary-soft); color: var(--jungle-primary-dark); }
.pill--accent  { background: var(--jungle-accent-soft);  color: #92471F; }
.pill--ink     { background: var(--jungle-ink); color: #FFFFFF; }

.icon, .icon * {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga' 1;
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0;
  -webkit-font-smoothing: antialiased;
}
.icon { font-size: 24px; display: inline-block; }

.dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jungle-primary);
  vertical-align: middle;
}
.dot--accent { background: var(--jungle-accent); }
.dot--muted  { background: var(--jungle-border-strong); }