/* css/base.css */
@layer reset, tokens, base, layout, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { overflow-x: hidden; }
  body { margin: 0; }
  img { max-width: 100%; display: block; }
  ul { margin: 0; padding: 0; }
  button { font: inherit; }
}

@layer tokens {
  :root{
    /* Colors */
    --bg:#f7fdff;
    --text:#062135;
    --muted:#4a6b78;

    --brand:#1D8EBC;
    --brand2:#3984D0;

    --card:#ffffff;
    --soft:#e8f7ff;
    --events-bg:#F6FCFF;
    --footer-bg:#fff0da;

    --border:rgba(6,33,53,.12);

    /* Shadows */
    --shadow-sm: 0 10px 28px rgba(6,33,53,.06);
    --shadow-md: 0 12px 30px rgba(6,33,53,.08);
    --shadow-lg: 0 16px 44px rgba(6,33,53,.10);
    --shadow-xl: 0 22px 60px rgba(6,33,53,.16);

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --pill: 999px;

    /* Header */
    --header-bg: rgba(29, 142, 188, .88);
    --header-text:#f7fbff;
    --header-border: rgba(255,255,255,.16);
    --header-active: rgba(255,255,255,.14);
    --header-pill: rgba(255,255,255,.12);

    /* Footer */
    --footer-text: var(--text);
    --footer-muted: var(--muted);

    /* Layout */
    --container: 1200px;
    --pad: 20px;
    --header-h: 64px;
    --header-h-m: 56px;

    /* Availability */
    --av-free-bg:#d6ffe3;
    --av-free-bd:#20b45a;
    --av-free-t:#0a5a2a;

    --av-busy-bg:#ffd3d6;
    --av-busy-bd:#ff4d5a;
    --av-busy-t:#8e1e2a;
  }
}

@layer base {
  body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  a { color: inherit; }

  /* Better keyboard accessibility */
  :focus-visible{
    outline: 3px solid rgba(29,142,188,.55);
    outline-offset: 3px;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    html:focus-within { scroll-behavior: auto; }

    *, *::before, *::after{
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }

    .carousel-track{ transition: none !important; }
    .card-media img{ transition: none !important; transform: none !important; }
    .day{ transition: none !important; }
    .filter{ transition: none !important; }
    .btn{ transition: none !important; }
  }
}


@layer layout {
  .container{
    width: 100%;
    max-width: var(--container);
    padding-inline: var(--pad);
    margin-inline: auto;
  }

  .section{ padding: 64px 0; }
  .section-soft{ background: var(--soft); }
  .section-events{ background: var(--events-bg); }

  .section-head{ margin-bottom: 18px; }
  .section-head h2{
    margin:0 0 6px 0;
    font-size: 30px;
    letter-spacing:-.01em;
  }
  .section-head p{
    margin:0;
    color: var(--muted);
    font-weight:700;
  }
}


@layer utilities {
  .sr-only{
    position:absolute !important;
    height:1px; width:1px;
    overflow:hidden;
    clip:rect(1px, 1px, 1px, 1px);
    white-space:nowrap;
  }

  .skip-link{
    position:absolute;
    left:-999px;
    top:0;
    background:#fff;
    padding:.6rem .8rem;
    border-radius: 10px;
    z-index:9999;
  }
  .skip-link:focus{ left:12px; top:12px; }

  .muted{ color: var(--muted); }
  .small{ font-size: 13px; font-weight: 700; }

  /* Honeypot */
  .hp{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }
}