/* ============================================================
   Activy — Design System Foundation
   Shared tokens, fonts, resets. Import this anywhere.
   ============================================================ */

/* --- Fonts --------------------------------------------------- */
@font-face {
  font-family: 'Epilogue';
  src: url('fonts/Epilogue-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('fonts/Epilogue-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('fonts/Epilogue-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Uncut Sans';
  src: url('fonts/UncutSans-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------- */
:root {
  /* ------- Brand palette ------- */
  --activy-green:        #2ecc70;   /* Primary action / brand */
  --activy-green-dark:   #042612;   /* Deep surface / footer */
  --activy-green-light:  #eafaf1;   /* Soft tint for pills, cards */
  --activy-green-hover:  #259253;   /* Button :hover */
  --activy-green-press:  #2e3631;   /* Button :active */

  --activy-orange:       #ff8600;   /* Team cohesion / activity accent */
  --activy-orange-light: #fff3e5;
  --activy-blue:         #3970ff;   /* Health & motivation accent */
  --activy-blue-light:   #ebf1ff;
  --activy-blue-pill:    #f0f4fa;   /* Pill background for chips/badges */
  --activy-purple:       #a738ff;   /* Corporate culture accent */
  --activy-purple-light: #f6ebff;

  /* ------- Neutrals ------- */
  --activy-white:        #ffffff;
  --activy-bg:           #f7f9fc;   /* Page surface secondary */
  --activy-black:        #000000;
  --activy-text:         #636363;   /* Body copy (warm gray) */
  --activy-text-dark:    #000000;   /* Headings */
  --activy-border:       #e9e9e9;   /* Hairlines */
  --activy-border-light: #f2f2f2;   /* Input / ultra-soft border */
  --activy-border-strong:#dce0e5;   /* Pressed / focused borders */
  --activy-neutral-light:#aaaaaa;
  --activy-neutral:      #666666;
  --activy-neutral-dark: #444444;

  /* ------- System ------- */
  --activy-success:      #027a48;
  --activy-success-bg:   #ecfdf3;
  --activy-error:        #b42318;
  --activy-error-bg:     #fef3f2;

  /* ------- Radius ------- */
  --activy-r-6:   .375rem;   /*  6px */
  --activy-r-8:   .5rem;     /*  8px — default button */
  --activy-r-12:  .75rem;    /* 12px */
  --activy-r-16:  1rem;      /* 16px — card */
  --activy-r-20:  1.25rem;   /* 20px */
  --activy-r-24:  1.5rem;    /* 24px — hero image */
  --activy-r-32:  2rem;      /* 32px */
  --activy-r-pill: 62.4375rem;

  /* ------- Elevation ------- */
  --activy-shadow-card:   0 4px 24px rgba(0,0,0,0.08);
  --activy-shadow-float:  0 12px 40px rgba(0,0,0,0.10);
  --activy-shadow-chip:   0 4px 12px rgba(0,0,0,0.06);

  /* ------- Type scale (desktop) ------- */
  --activy-h1:   3.25rem;    /* 52px */
  --activy-h2:   2.5rem;     /* 40px */
  --activy-h3:   2.5rem;     /* 40px */
  --activy-h4:   1.5rem;     /* 24px */
  --activy-h5:   1.25rem;    /* 20px */
  --activy-h6:   1.25rem;    /* 20px */
  --activy-body: 1rem;       /* 16px */
  --activy-small:.875rem;    /* 14px */
  --activy-tiny: .75rem;     /* 12px */

  /* ------- Families ------- */
  --activy-font-display: 'Uncut Sans', 'Epilogue', system-ui, sans-serif;
  --activy-font-body:    'Epilogue', system-ui, sans-serif;

  /* ------- Spacing (8pt scale) ------- */
  --activy-s-1: 4px;
  --activy-s-2: 8px;
  --activy-s-3: 12px;
  --activy-s-4: 16px;
  --activy-s-5: 24px;
  --activy-s-6: 32px;
  --activy-s-7: 48px;
  --activy-s-8: 64px;
  --activy-s-9: 96px;
  --activy-s-10: 128px;
}

/* --- Base ---------------------------------------------------- */
.activy-reset, .activy-reset * {
  box-sizing: border-box;
}
.activy-body {
  font-family: var(--activy-font-body);
  color: var(--activy-text);
  font-size: var(--activy-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.activy-display {
  font-family: var(--activy-font-display);
  color: var(--activy-text-dark);
  letter-spacing: -.01em;
  line-height: 1.15;
  font-weight: 600;
}