/* 118M8 Global Styles (Tailwind-first, light theme) */
/* Brand tokens */
:root{
  --118-red:#E6232E; /* primary */
  --coal:#1E1E1E;    /* ink */
  --chalk:#FFFFFF;   /* bg */
  --pebble:#F3F4F6;  /* ui gray */
  --mint:#2BB673;    /* positive */
}

html{scroll-behavior:smooth}
body{color:var(--coal); background:var(--chalk)}

/* Double-stripe motif */
.stripe-double{position:relative;padding-top:1.25rem}
.stripe-double:before,.stripe-double:after{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--118-red);transform-origin:left center}
.stripe-double:after{top:6px}

/* Speech bubble */
.speech{position:relative;border:2px solid var(--118-red);border-radius:14px;padding:1rem 1.25rem;box-shadow:0 0 0 2px var(--chalk) inset}
.speech:after{content:"";position:absolute;left:22px;bottom:-10px;border-width:10px 10px 0 10px;border-style:solid;border-color:var(--118-red) transparent transparent transparent}

/* Cards */
.card{background:#fff;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.06)}

/* Badges */
.badge-118red{background:color-mix(in srgb,var(--118-red) 16%,white);color:var(--118-red);border:1px solid var(--118-red)}

/* Motion */
@media (prefers-reduced-motion:no-preference){
  .anim-fade{opacity:0;transform:translateY(8px);animation:fadeUp .24s ease-out .05s forwards}
  .anim-stripe:before,.anim-stripe:after{transform:scaleX(0);animation:stripeIn .3s ease-out forwards}
}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes stripeIn{to{transform:scaleX(1)}}

/* Cookie banner */
.cookie-banner{position:fixed;z-index:60;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #E5E7EB;box-shadow:0 -8px 24px rgba(0,0,0,.06)}
.cookie-btn{border-radius:9999px;padding:.5rem 1rem;font-weight:600}
.cookie-accept{background:#F3F4F6}
.cookie-reject{background:#F3F4F6}

/* Utility tweaks */
.shadow-soft{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.rounded-brand{border-radius:12px}

/* App store badges alignment helper */
.store-badges img{height:44px;width:auto}

/* Link underline on hover */
.link-underline{position:relative}
.link-underline:after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--118-red);transition:width .2s ease-out}
.link-underline:hover:after{width:100%}

/* Interactive demo helpers */
[data-demo-ring]{transition:stroke-dashoffset .4s ease,stroke .3s ease}
.demo-tip-warn{border-color:rgba(230,35,46,.25);background:rgba(230,35,46,.06);color:#E6232E}
.demo-tip-think{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.16);color:#B45309}
.demo-tip-ok{border-color:rgba(43,182,115,.25);background:rgba(43,182,115,.15);color:#0F5132}

/* Sleep ring animation */
.sleep-ring [data-sleep-ring]{animation:sleepDash 6s ease-in-out infinite}
.sleep-card{background:#fff;border-radius:20px;padding:1.75rem;border:1px solid rgba(230,35,46,.12);box-shadow:0 20px 45px rgba(17,24,39,.08)}
.animate-pulse-slow{animation:sleepGlow 3s ease-in-out infinite}
@keyframes sleepDash{
  0%{stroke-dashoffset:552}
  45%{stroke-dashoffset:140}
  55%{stroke-dashoffset:140}
  100%{stroke-dashoffset:552}
}
@keyframes sleepGlow{
  0%,100%{opacity:.7;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2px)}
}