/* brand.css -- Larkspur Family Dental. Loads after app.css and overrides the house tokens. */

:root{
  --a-l:#0A6E80;
  --a-d:#52C6D6;
  --display:Optima,Candara,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  --serif:Optima,Candara,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  --sans:Optima,Candara,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  --t-xs:.75rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.25rem;--t-xl:1.5625rem;--t-2xl:1.9375rem;--t-3xl:2.5rem;
  --r:10px;--r-card:16px;
}

/* the kit's own token block is :root:root:root -- match it so these win */
:root:root:root{
  --ik:light-dark(#0C1A1E,#EAF2F4);
  --i2:light-dark(#46585E,#A7B8BE);
  --ak:light-dark(var(--a-l),var(--a-d));
  --oa:light-dark(#FFFFFF,#06202A);
  --ink:var(--ik);
  --ink-2:var(--i2);
  --accent:var(--ak);
  --on-accent:var(--oa);
  --hover:light-dark(#085A69,#7FD9E6);
  --bg:light-dark(#F2F6F7,#0B1418);
  --surface:light-dark(#FFFFFF,#121E23);
  --sunk:light-dark(#E6EDEF,#17262C);
  --line:light-dark(#D3E0E3,#24363D);
  --edge:light-dark(#6C8A90,#6E8890);
  --bd:light-dark(#DCEAEC,#12262C);
  --dp:light-dark(#0A3D47,#0A2E36);
  --co:#C4622E;
  --su:#8A6A0A;
  --sk:#2F6FA8;
  --sf:0 18px 40px -20px light-dark(#0C1A1E40,#000);
}

/* the oversized tabular numeral is the anchor: fees, step numbers, prices */
:root #services .price,
:root #services li>.kicker{
  font-size:var(--t-xl);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--accent);
}
:root #how li::before{
  font-size:var(--t-2xl);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
:root #services h3{font-weight:750;letter-spacing:-.02em}
:root :is(h1,h2,h3){font-family:var(--display)}
:root h1{font-weight:800;letter-spacing:-.03em;line-height:1.05}
:root h2{font-weight:750;letter-spacing:-.03em;line-height:1.08}

/* the arc motif and the deep panels, in this brand's teal */
:root .brand::before,
:root .kicker::before{border-color:var(--co)}
:root #services [data-list]{background:var(--surface);box-shadow:var(--sf)}
:root #services li{border-top-color:var(--line)}
:root #services h3::after{border-bottom-color:var(--edge)}
:root #how li{background:var(--surface);box-shadow:var(--sf)}
:root #how li::before{background:var(--accent);color:var(--on-accent)}
:root .hours-card,
:root [data-list]+[data-list]{background:var(--surface);box-shadow:var(--sf)}

/* footer in the brand's deep teal rather than the kit's navy */
html:root footer.foot{background:light-dark(#0A3D47,#07181C);color:#E4F1F0}
html:root .foot .foot-in :is(p,.brand){color:#D4E6E8!important}
html:root .foot .foot-in a{color:#9BE8D9!important}

/* the emergency strip under the first screen */
:root [data-sec=emergency],
:root .emergency{border-color:var(--accent)}

/* focus stays visible on the teal */
:root :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  :root *{transition:none!important;animation:none!important}
}

/* tap-targets: comfortable phone taps -- the sizes win on phones, the page's own layout stays */
@media (max-width: 600px) {
  a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a), button, [role=button], [onclick], summary, select, input:not([type=hidden], [type=checkbox], [type=radio], [type=range]) { min-height: 44px !important; min-width: 44px !important; }
  :where(a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a)) { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
}