/* Charlie Care — "Dawn after the long night" design system.
   Single source of truth. Every surface imports this; never hardcode brand values. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Instrument+Sans:wght@400;500;600&display=swap");

:root {
  /* dawn palette — night breaking into first light */
  --night:#2b2450; --dusk:#4a3f7a; --dusk2:#3a316a; --blush:#f4c9c0; --peach:#f6d5a8;
  --lav:#cdbdf0; --peri:#a9b8f0; --mint:#c4e6d4; --cream:#fdf8f2; --ink:#2a2440; --muted:#6f6890;
  /* risk semantics (softened) */
  --r1:#e39a9a; --r2:#e6b48a; --r3:#e6d28a; --r4:#a7d4a9; --r5:#7cc08c;
  --green:#4caf6e; --yellow:#e6b800; --red:#e05a5a;
  --glass:rgba(253,248,242,.14); --glassline:rgba(253,248,242,.28);
  --display:'Fraunces',Georgia,serif; --body:'Instrument Sans',-apple-system,system-ui,sans-serif;
  --radius:18px; --shadow:0 12px 34px rgba(43,36,80,.34);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.dawn-body{margin:0;font-family:var(--body);color:var(--cream);min-height:100dvh;background:var(--night);position:relative;overflow-x:hidden;}

/* atmosphere: breathing aurora + fading stars + film grain */
.sky{position:fixed;inset:-30%;z-index:-3;filter:saturate(1.05);animation:drift 24s ease-in-out infinite;
  background:
    radial-gradient(50% 40% at 20% 18%, rgba(205,189,240,.55), transparent 70%),
    radial-gradient(55% 45% at 85% 22%, rgba(169,184,240,.45), transparent 70%),
    radial-gradient(70% 55% at 50% 108%, rgba(246,213,168,.55), transparent 65%),
    radial-gradient(60% 50% at 12% 92%, rgba(244,201,192,.5), transparent 68%),
    linear-gradient(180deg,#2b2450 0%,#3a316a 42%,#6a5a92 74%,#c9a9a0 100%);}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(2%,-2%,0) scale(1.05)}66%{transform:translate3d(-2%,1%,0) scale(1.03)}}
.stars{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55;animation:twinkle 6s ease-in-out infinite;
  background-image:radial-gradient(1.4px 1.4px at 15% 20%,#fff,transparent),radial-gradient(1px 1px at 62% 12%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 82% 28%,#fff,transparent),radial-gradient(1px 1px at 35% 34%,#fff,transparent),
  radial-gradient(1.3px 1.3px at 48% 8%,#fff,transparent),radial-gradient(1px 1px at 92% 16%,#fff,transparent);}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:.75}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@media (prefers-reduced-motion:reduce){.sky,.stars{animation:none}}

/* type */
.kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--lav);opacity:.85;font-weight:600;}
.display{font-family:var(--display);font-weight:500;letter-spacing:-.015em;font-optical-sizing:auto;}
h1.display{font-size:38px;line-height:1.05;margin:10px 0 6px;}

/* components */
.card-glass{background:var(--glass);border:1px solid var(--glassline);border-radius:var(--radius);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.btn-dawn{display:block;width:100%;background:linear-gradient(120deg,var(--peach),var(--blush));color:#4a2f2a;border:none;
  padding:16px;border-radius:30px;font-size:17px;font-weight:600;font-family:var(--body);box-shadow:0 12px 34px rgba(246,213,168,.42);
  transition:.25s;cursor:pointer;}
.btn-dawn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(246,213,168,.55);}
.btn-dawn:disabled{opacity:.4;transform:none;box-shadow:none;cursor:default;}
.btn-ghost{background:var(--glass);color:var(--cream);border:1px solid var(--glassline);border-radius:24px;
  padding:13px 18px;font-family:var(--body);font-weight:500;cursor:pointer;}
.input-dawn{width:100%;border:1px solid var(--glassline);border-radius:16px;padding:14px 16px;font-size:16px;font-family:var(--body);
  background:var(--glass);color:var(--cream);backdrop-filter:blur(14px);}
.input-dawn::placeholder{color:rgba(253,248,242,.5);}
.link-dawn{color:var(--lav);text-decoration:underline;text-underline-offset:2px;}
