/* HOLA, Ari! brand tokens. Source: chillibeanmedia/HOLA (main) website/DESIGN.md, lib/theme.ts, tailwind.config.ts */
@font-face{font-family:"Inter";src:url("fonts/Inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme: light;
  /* Core palette */
  --hola-canvas:#f5f5f7;      /* page */
  --hola-sheet:#ffffff;       /* devices, cards, nav */
  --hola-sand:#e8e8ed;        /* quiet fill */
  --hola-line:#d2d2d7;        /* strong rule */
  --hola-ink:#1d1d1f;         /* headlines + body */
  --hola-mute:#6e6e73;        /* secondary */
  --hola-mute-soft:#86868b;
  --hola-hairline:rgba(0,0,0,.08);
  --hola-fill:rgba(0,0,0,.05);
  --hola-track:rgba(0,0,0,.08);
  --hola-black:#000000;       /* full-bleed night sections */
  --hola-snow:#f5f5f7;        /* text on black */
  --hola-accent:#0071e3;      /* links, primary button */
  --hola-accent-hover:#0077ed;
  --hola-accent-text:#0058b0; /* accent text on light, AA */
  --hola-accent-glow:#64b5ff;
  --hola-accent-dim:rgba(0,113,227,.10);
  --hola-gradient:linear-gradient(135deg,#64b5ff 0%,#0071e3 100%);   /* bubbles, hold control, ring */
  --hola-gradient-fill:linear-gradient(180deg,#0e73d6 0%,#0058b0 100%); /* buttons w/ white label (AA) */
  --hola-ring-gradient:linear-gradient(135deg,#9dceff 0%,#0071e3 100%);
  --hola-bubble-you:#0071e3;
  --hola-bubble-ari:#e9e9eb;
  --hola-success:#1a7f37;
  --hola-warning:#8a5a00;
  --hola-error:#c41a16;
  --hola-error-wash:rgba(196,26,22,.08);

  /* Kids' mode (calm, warm neutral, same accent; no cartoon) */
  --hola-kids-canvas:#f6f1ea;
  --hola-kids-sheet:#fffdfb;
  --hola-kids-alt:#f3ece4;
  --hola-kids-hairline:rgba(80,50,20,.10);

  /* Type */
  --hola-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hola-display:clamp(44px,7.4vw,92px); --hola-display-track:-.045em; --hola-display-lh:.96;
  --hola-section:clamp(36px,5.4vw,76px); --hola-section-track:-.04em;
  --hola-body:clamp(17px,1.5vw,21px);   --hola-body-lh:1.35;
  --hola-foot:13px;
  --hola-weight-display:600;

  /* Radii */
  --hola-radius-sm:8px; --hola-radius-ui:12px; --hola-radius-lg:16px; --hola-radius-xl:20px;
  --hola-radius-card:28px; --hola-radius-device:44px; --hola-radius-pill:999px;

  /* Shadows */
  --hola-lift:0 10px 30px -18px rgba(0,0,0,.28);
  --hola-device:0 50px 80px -36px rgba(0,0,0,.45),0 18px 30px -24px rgba(0,0,0,.28);

  /* Spacing (app) */
  --hola-sp-xs:4px; --hola-sp-sm:8px; --hola-sp-md:16px; --hola-sp-lg:20px; --hola-sp-xl:32px; --hola-sp-xxl:48px;
  --hola-page:76rem;
  --hola-tap:44px;
  --hola-ease:cubic-bezier(.22,.61,.36,1);
}

/* Dark ("night") sheet: repo uses #000 canvas with #1c1c1e cards */
[data-theme="dark"],.hola-dark{
  color-scheme: dark;
  --hola-canvas:#000000;
  --hola-sheet:#1c1c1e;
  --hola-sand:#2c2c2e;
  --hola-line:#3a3a3c;
  --hola-ink:#f5f5f7;
  --hola-mute:rgba(255,255,255,.62);
  --hola-mute-soft:rgba(255,255,255,.45);
  --hola-hairline:rgba(255,255,255,.10);
  --hola-fill:rgba(255,255,255,.08);
  --hola-track:rgba(255,255,255,.14);
  --hola-accent-text:#8ec8ff;
  --hola-accent-dim:rgba(142,200,255,.16);
  --hola-bubble-ari:#2c2c2e;
  --hola-success:#30d158; --hola-warning:#ffd60a; --hola-error:#ff6961; --hola-error-wash:rgba(255,105,97,.16);
  --hola-kids-canvas:#141210; --hola-kids-sheet:#221f1c; --hola-kids-alt:#2c2824; --hola-kids-hairline:rgba(246,241,234,.10);
  --hola-lift:0 10px 30px -18px rgba(0,0,0,.7);
}

:focus-visible{outline:2px solid var(--hola-accent);outline-offset:3px}
::selection{background:var(--hola-accent);color:#fff}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}