/* CODE Eye Care design tokens — sampled from the institute logo. */
:root {
  --terracotta:      #C8452A;
  --terracotta-dark: #A5351E;
  --terracotta-soft: #FBEAE5;
  --coral:           #F2714A;
  --coral-soft:      #FEF0EA;
  --cyan:            #29ABD6;
  --cyan-dark:       #1B8CB3;
  --cyan-soft:       #E6F5FB;
  --charcoal:        #414042;
  --grey:            #6B6C6E;
  --grey-light:      #9A9B9E;
  --line:            #E3E1DF;
  --line-strong:     #CFCCC9;
  --bg:              #FFFAF7;
  --card:            #FFFFFF;
  --ok:              #1E9E6A;
  --ok-soft:         #E8F7F0;
  --warn:            #B7791F;
  --warn-soft:       #FDF6E7;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(65, 64, 66, .06);
  --shadow-md: 0 4px 14px rgba(65, 64, 66, .09);
  --shadow-lg: 0 12px 34px rgba(65, 64, 66, .14);

  /* Indic scripts need their own faces; these ship on Android and iOS. */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto,
          "Noto Sans", "Noto Sans Tamil", "Noto Sans Devanagari",
          "Nirmala UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }

/* Focus must be obvious — many users here navigate by tabbing on a kiosk. */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Shown only when CEC_DEMO is set, on both the patient form and the dashboard. */
.demo-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: repeating-linear-gradient(45deg, #B7791F, #B7791F 12px, #9C6516 12px, #9C6516 24px);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  padding: 7px 12px;
  text-transform: uppercase;
}
body.has-demo-bar { padding-top: var(--demo-bar-h, 32px); }
body.has-demo-bar .hdr,
body.has-demo-bar .top { top: var(--demo-bar-h, 32px); }