/* ============================================================
   calcyou.org — Brand Design Tokens & Logo CSS
   Version 1.0
   ============================================================ */

/* ------------------------------------------------------------
   1. BRAND TOKENS (CSS Custom Properties)
   ------------------------------------------------------------ */
:root {
  /* Primary palette */
  --cy-dark:        #085041;   /* Primary dark green — logo bg, navbar */
  --cy-teal:        #1D9E75;   /* Primary teal — "calc" wordmark, CTA */
  --cy-light:       #5DCAA5;   /* Accent light — dots, highlights */
  --cy-pale:        #9FE1CB;   /* Subtle borders, hover states */
  --cy-bg:          #E1F5EE;   /* Tinted background, card fills */
  --cy-off-white:   #F1EFE8;   /* Page background */

  /* Neutrals */
  --cy-ink:         #2C2C2A;   /* Body text */
  --cy-muted:       #888780;   /* Secondary text, labels */
  --cy-border:      #D3D1C7;   /* Default borders */
  --cy-surface:     #ffffff;   /* Card surfaces */

  /* Typography */
  --cy-font:        system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cy-font-mono:   "SF Mono", "Fira Code", "Fira Mono", monospace;

  /* Font weights */
  --cy-fw-light:    300;  /* "you" part of wordmark */
  --cy-fw-regular:  400;
  --cy-fw-medium:   500;  /* "calc" part of wordmark */

  /* Letter spacing */
  --cy-tracking-logo:    -2px;
  --cy-tracking-tag:     2.5px;
  --cy-tracking-label:   1.5px;

  /* Radius */
  --cy-radius-sm:   7px;
  --cy-radius-md:   10px;
  --cy-radius-lg:   14px;
  --cy-radius-xl:   20px;

  /* Accent bar height (top stripe on all logo blocks) */
  --cy-bar-height:  4px;

  /* Transitions */
  --cy-transition:  160ms ease;
}

/* Dark mode token overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --cy-off-white:  #0d1c18;
    --cy-surface:    #122b24;
    --cy-ink:        #e8e6e0;
    --cy-muted:      #7a8c86;
    --cy-border:     #1f3d34;
    --cy-bg:         #0f2820;
  }
}


/* ------------------------------------------------------------
   2. LOGO COMPONENT — .cy-logo
   Usage:
     <a class="cy-logo" href="/">
       <span class="cy-logo__calc">calc</span>
       <span class="cy-logo__you">you</span>
       <span class="cy-logo__dot" aria-hidden="true"></span>
     </a>
   ------------------------------------------------------------ */
.cy-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  line-height: 1;
  position: relative;
  font-family: var(--cy-font);
  user-select: none;
}

.cy-logo__calc {
  font-size: 2.5rem;         /* 40px default — override with modifier */
  font-weight: var(--cy-fw-medium);
  color: var(--cy-teal);
  letter-spacing: var(--cy-tracking-logo);
  line-height: 1;
  transition: color var(--cy-transition);
}

.cy-logo__you {
  font-size: 2.5rem;
  font-weight: var(--cy-fw-light);
  color: var(--cy-ink);
  letter-spacing: var(--cy-tracking-logo);
  line-height: 1;
  opacity: 0.82;
  transition: color var(--cy-transition);
}

.cy-logo__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cy-light);
  align-self: center;
  margin-left: 3px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* Hover: brighten teal slightly */
.cy-logo:hover .cy-logo__calc { color: var(--cy-light); }
.cy-logo:hover .cy-logo__you  { opacity: 1; }


/* --- Size Modifiers --- */
.cy-logo--sm .cy-logo__calc,
.cy-logo--sm .cy-logo__you  { font-size: 1.375rem; }  /* 22px — navbar */
.cy-logo--sm .cy-logo__dot  { width: 5px; height: 5px; margin-bottom: 4px; }

.cy-logo--md .cy-logo__calc,
.cy-logo--md .cy-logo__you  { font-size: 2rem; }       /* 32px */
.cy-logo--md .cy-logo__dot  { width: 6px; height: 6px; }

.cy-logo--lg .cy-logo__calc,
.cy-logo--lg .cy-logo__you  { font-size: 3.5rem; }     /* 56px */
.cy-logo--lg .cy-logo__dot  { width: 9px; height: 9px; margin-bottom: 8px; }

.cy-logo--xl .cy-logo__calc,
.cy-logo--xl .cy-logo__you  { font-size: 5.5rem; }     /* 88px — hero */
.cy-logo--xl .cy-logo__dot  { width: 12px; height: 12px; margin-bottom: 12px; }


/* --- Color Variants --- */

/* On dark background */
.cy-logo--reversed .cy-logo__calc { color: #ffffff; }
.cy-logo--reversed .cy-logo__you  { color: rgba(255,255,255,0.38); opacity: 1; }
.cy-logo--reversed .cy-logo__dot  { background: var(--cy-light); }
.cy-logo--reversed:hover .cy-logo__calc { color: var(--cy-pale); }
.cy-logo--reversed:hover .cy-logo__you  { color: rgba(255,255,255,0.55); }

/* Monochrome dark */
.cy-logo--mono .cy-logo__calc,
.cy-logo--mono .cy-logo__you  { color: var(--cy-dark); opacity: 1; }
.cy-logo--mono .cy-logo__dot  { background: var(--cy-dark); }


/* ------------------------------------------------------------
   3. LOGO BLOCK — .cy-logo-block
   Full branded container (navbar, cards, hero bg)
   Usage:
     <div class="cy-logo-block">
       <a class="cy-logo cy-logo--reversed" href="/">…</a>
     </div>
   ------------------------------------------------------------ */
.cy-logo-block {
  position: relative;
  background: var(--cy-dark);
  border-radius: var(--cy-radius-lg);
  padding: 1.25rem 1.75rem;
  overflow: hidden;
}

/* Top accent bar */
.cy-logo-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--cy-bar-height);
  background: var(--cy-teal);
  border-radius: var(--cy-radius-lg) var(--cy-radius-lg) 0 0;
}

/* Subtle grid texture overlay */
.cy-logo-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}


/* ------------------------------------------------------------
   4. NAVBAR LOGO STRIP — .cy-navbar
   ------------------------------------------------------------ */
.cy-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cy-dark);
  padding: 0 1.5rem;
  height: 56px;
  position: relative;
}

/* Top accent bar on navbar */
.cy-navbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--cy-bar-height);
  background: var(--cy-teal);
}

.cy-navbar__brand {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cy-navbar__divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.1);
}

.cy-navbar__tagline {
  font-family: var(--cy-font);
  font-size: 0.6875rem;   /* 11px */
  font-weight: var(--cy-fw-regular);
  color: rgba(255,255,255,0.38);
  letter-spacing: var(--cy-tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}


/* ------------------------------------------------------------
   5. HERO LOGO SECTION — .cy-hero-logo
   ------------------------------------------------------------ */
.cy-hero-logo {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 0.92;
  user-select: none;
}

.cy-hero-logo__calc {
  font-family: var(--cy-font);
  font-size: clamp(4rem, 14vw, 10rem);
  font-weight: var(--cy-fw-medium);
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.cy-hero-logo__you {
  font-family: var(--cy-font);
  font-size: clamp(4rem, 14vw, 10rem);
  font-weight: var(--cy-fw-light);
  color: rgba(255,255,255,0.34);
  letter-spacing: -0.04em;
  line-height: 0.92;
}


/* ------------------------------------------------------------
   6. TAGLINE — .cy-tagline
   ------------------------------------------------------------ */
.cy-tagline {
  font-family: var(--cy-font);
  font-size: 0.6875rem;
  font-weight: var(--cy-fw-regular);
  letter-spacing: var(--cy-tracking-tag);
  text-transform: uppercase;
  color: var(--cy-muted);
}

.cy-tagline--light { color: rgba(255,255,255,0.45); }
.cy-tagline--accent { color: var(--cy-light); }


/* ------------------------------------------------------------
   7. BRAND BADGE / PILL — .cy-badge
   Compact inline branding
   ------------------------------------------------------------ */
.cy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--cy-dark);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  text-decoration: none;
}

.cy-badge__calc {
  font-family: var(--cy-font);
  font-size: 1.0625rem;
  font-weight: var(--cy-fw-medium);
  color: #ffffff;
  letter-spacing: -0.03em;
}

.cy-badge__you {
  font-family: var(--cy-font);
  font-size: 1.0625rem;
  font-weight: var(--cy-fw-light);
  color: var(--cy-pale);
  letter-spacing: -0.03em;
}

.cy-badge__org {
  font-family: var(--cy-font);
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.3);
  margin-left: 1px;
  align-self: flex-end;
  padding-bottom: 1px;
}


/* ------------------------------------------------------------
   8. BRAND COLORS — utility classes
   ------------------------------------------------------------ */
.cy-text-dark    { color: var(--cy-dark); }
.cy-text-teal    { color: var(--cy-teal); }
.cy-text-light   { color: var(--cy-light); }
.cy-text-muted   { color: var(--cy-muted); }
.cy-text-white   { color: #ffffff; }

.cy-bg-dark      { background-color: var(--cy-dark); }
.cy-bg-teal      { background-color: var(--cy-teal); }
.cy-bg-pale      { background-color: var(--cy-bg); }
.cy-bg-surface   { background-color: var(--cy-surface); }
.cy-bg-page      { background-color: var(--cy-off-white); }

.cy-border       { border: 0.5px solid var(--cy-border); }
.cy-border-teal  { border: 0.5px solid var(--cy-pale); }

/* Accent top bar — can apply to any container */
.cy-accent-bar {
  position: relative;
}
.cy-accent-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--cy-bar-height);
  background: var(--cy-teal);
  border-radius: inherit;
}


/* ------------------------------------------------------------
   9. CTA BUTTON — .cy-btn
   ------------------------------------------------------------ */
.cy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--cy-font);
  font-size: 0.9375rem;
  font-weight: var(--cy-fw-medium);
  letter-spacing: 0.01em;
  padding: 0.65rem 1.4rem;
  border-radius: var(--cy-radius-md);
  border: none;
  cursor: pointer;
  transition: background var(--cy-transition), transform var(--cy-transition);
  text-decoration: none;
}

.cy-btn--primary {
  background: var(--cy-teal);
  color: #ffffff;
}
.cy-btn--primary:hover  { background: var(--cy-dark); }
.cy-btn--primary:active { transform: scale(0.98); }

.cy-btn--outline {
  background: transparent;
  color: var(--cy-teal);
  border: 1.5px solid var(--cy-teal);
}
.cy-btn--outline:hover {
  background: var(--cy-bg);
}

.cy-btn--ghost {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  border: 0.5px solid rgba(255,255,255,0.15);
}
.cy-btn--ghost:hover {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
}


/* ------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .cy-logo--xl .cy-logo__calc,
  .cy-logo--xl .cy-logo__you { font-size: 3.5rem; }

  .cy-logo--lg .cy-logo__calc,
  .cy-logo--lg .cy-logo__you { font-size: 2.5rem; }

  .cy-navbar { padding: 0 1rem; }
  .cy-navbar__tagline { display: none; }
}