/* ============================================================================
   Order Corrections — shared design system  (oc-core)
   Used by both the participant site and the sponsor portal pages.
   Palette: Century Blue on clean cool-slate neutrals; gold as a small accent.
   Tuned for legibility (kids and older adults). Light + dark.
   ============================================================================ */

:root {
  /* neutrals — clean, cool slate (bright and high-contrast, not warm/dark) */
  --oc-bg:        #F3F6F9;
  --oc-surface:   #FFFFFF;
  --oc-surface-2: #ECF1F5;
  --oc-border:    #DCE4EB;
  --oc-border-2:  #C4D0DA;
  --oc-ink:       #17222B;   /* dark slate — near-black, easy to read */
  --oc-ink-2:     #4B5A67;
  --oc-ink-3:     #67757F;   /* darkened so captions still meet contrast */

  /* brand — Century Blue (PMS 549 #4C9DBC) is the star */
  --oc-brand:        #4C9DBC;   /* soft fills, logo, progress, eyebrows */
  --oc-on-primary:   #FFFFFF;   /* text color on a primary fill */
  --oc-primary:      #2C6B86;   /* deepened blue so white text meets AA on buttons */
  --oc-primary-600:  #245D75;
  --oc-primary-700:  #1C4E63;
  --oc-primary-soft: #E2EEF4;
  --oc-primary-ring: rgba(76,157,188,.40);

  --oc-accent:       #B57414;   /* warm gold — used sparingly as the single warm pop */
  --oc-accent-soft:  #F6EBD5;

  /* semantic (separate from the brand hue) */
  --oc-good:       #2E7D5B;  --oc-good-soft:   #DDECE4;
  --oc-warn:       #96660F;  --oc-warn-soft:   #F5EAD0;
  --oc-danger:     #C24339;  --oc-danger-soft: #F7E2DF;
  --oc-info:       #2C6B86;  --oc-info-soft:   #E2EEF4;

  /* form */
  --oc-r-sm: 8px;
  --oc-r:    12px;
  --oc-r-lg: 16px;
  --oc-pill: 999px;

  --oc-shadow-sm: 0 1px 2px rgba(23,34,43,.06), 0 1px 3px rgba(23,34,43,.05);
  --oc-shadow:    0 2px 6px rgba(23,34,43,.07), 0 8px 24px rgba(23,34,43,.06);
  --oc-shadow-lg: 0 12px 40px rgba(23,34,43,.15);

  /* Century's mark is set in Futura; Century Gothic (Windows) / Avenir are the
     closest widely-installed geometric substitutes, then the system stack. */
  --oc-display: "Futura", "Futura PT", "Century Gothic", "Avenir Next", "Segoe UI", Roboto, sans-serif;
  --oc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --oc-mono: "Cascadia Mono", ui-monospace, Consolas, "SF Mono", Menlo, monospace;

  --oc-maxw: 560px;   /* participant form column */
}

@media (prefers-color-scheme: dark) {
  :root {
    --oc-bg:        #0F1620;   /* cool dark slate, not warm brown-black */
    --oc-surface:   #17212C;
    --oc-surface-2: #1F2B38;
    --oc-border:    #2A3745;
    --oc-border-2:  #3A4855;
    --oc-ink:       #E7EDF2;
    --oc-ink-2:     #A7B4BF;
    --oc-ink-3:     #7C8A95;

    --oc-brand:        #6FBEDD;
    --oc-on-primary:   #0F1620;   /* dark text on the bright-blue button in dark mode */
    --oc-primary:      #5FB4D6;
    --oc-primary-600:  #74C0DE;
    --oc-primary-700:  #8FCFE8;   /* light: subtle-button text / links on dark */
    --oc-primary-soft: #12303D;
    --oc-primary-ring: rgba(111,190,221,.40);

    --oc-accent:       #E0A94E;
    --oc-accent-soft:  #2C2413;

    --oc-good:  #6BC79B; --oc-good-soft:   #14261E;
    --oc-warn:  #D9B15C; --oc-warn-soft:   #2A2413;
    --oc-danger:#E58A82; --oc-danger-soft: #2E1917;
    --oc-info:  #6FBEDD; --oc-info-soft:   #12303D;

    --oc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --oc-shadow:    0 2px 8px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
    --oc-shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  }
}
/* explicit toggle wins over the media query in both directions */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --oc-bg:#0F1620; --oc-surface:#17212C; --oc-surface-2:#1F2B38;
  --oc-border:#2A3745; --oc-border-2:#3A4855;
  --oc-ink:#E7EDF2; --oc-ink-2:#A7B4BF; --oc-ink-3:#7C8A95;
  --oc-brand:#6FBEDD; --oc-on-primary:#0F1620;
  --oc-primary:#5FB4D6; --oc-primary-600:#74C0DE; --oc-primary-700:#8FCFE8;
  --oc-primary-soft:#12303D; --oc-primary-ring:rgba(111,190,221,.40);
  --oc-accent:#E0A94E; --oc-accent-soft:#2C2413;
  --oc-good:#6BC79B; --oc-good-soft:#14261E;
  --oc-warn:#D9B15C; --oc-warn-soft:#2A2413;
  --oc-danger:#E58A82; --oc-danger-soft:#2E1917;
  --oc-info:#6FBEDD; --oc-info-soft:#12303D;
}
:root[data-theme="light"] {
  --oc-bg:#F3F6F9; --oc-surface:#FFFFFF; --oc-surface-2:#ECF1F5;
  --oc-border:#DCE4EB; --oc-border-2:#C4D0DA;
  --oc-ink:#17222B; --oc-ink-2:#4B5A67; --oc-ink-3:#67757F;
  --oc-brand:#4C9DBC; --oc-on-primary:#FFFFFF;
  --oc-primary:#2C6B86; --oc-primary-600:#245D75; --oc-primary-700:#1C4E63;
  --oc-primary-soft:#E2EEF4; --oc-primary-ring:rgba(76,157,188,.40);
  --oc-accent:#B57414; --oc-accent-soft:#F6EBD5;
  --oc-good:#2E7D5B; --oc-good-soft:#DDECE4;
  --oc-warn:#96660F; --oc-warn-soft:#F5EAD0;
  --oc-danger:#C24339; --oc-danger-soft:#F7E2DF;
  --oc-info:#2C6B86; --oc-info-soft:#E2EEF4;
}

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--oc-bg);
  color: var(--oc-ink);
  font-family: var(--oc-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,p,figure { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--oc-primary-700); }
:where(:root[data-theme="dark"], .oc-dark) a { color: var(--oc-primary); }

/* ---- typography helpers --------------------------------------------------- */
.oc-eyebrow {
  font-family: var(--oc-display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--oc-primary);   /* deepened blue: readable at small size (brand blue is too light) */
}
.oc-h1 { font-family: var(--oc-display); font-size: clamp(24px, 4.5vw, 31px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
.oc-h2 { font-family: var(--oc-display); font-size: 21px; font-weight: 700; letter-spacing: -.005em; line-height: 1.25; text-wrap: balance; }
.oc-lead { color: var(--oc-ink-2); font-size: 16px; }
.oc-muted { color: var(--oc-ink-3); }
.oc-num { font-variant-numeric: tabular-nums; }

/* ---- buttons -------------------------------------------------------------- */
.oc-btn {
  --_bg: var(--oc-primary); --_fg: var(--oc-on-primary); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--_bd); border-radius: var(--oc-r);
  background: var(--_bg); color: var(--_fg);
  font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  box-shadow: var(--oc-shadow-sm);
  transition: transform .06s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.oc-btn:hover { filter: brightness(1.04); }
.oc-btn:active { transform: translateY(1px); }
.oc-btn:disabled, .oc-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.oc-btn--block { width: 100%; }
.oc-btn--lg { min-height: 54px; font-size: 17px; }
.oc-btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: var(--oc-r-sm); }
.oc-btn--ghost   { --_bg: transparent; --_fg: var(--oc-ink); --_bd: var(--oc-border-2); box-shadow: none; }
.oc-btn--ghost:hover { background: var(--oc-surface-2); filter: none; }
.oc-btn--subtle  { --_bg: var(--oc-primary-soft); --_fg: var(--oc-primary-700); box-shadow: none; }
:where(:root[data-theme="dark"]) .oc-btn--subtle { --_fg: var(--oc-primary); }
.oc-btn--danger  { --_bg: var(--oc-danger); --_fg: #fff; }
.oc-btn--danger-ghost { --_bg: transparent; --_fg: var(--oc-danger); --_bd: color-mix(in srgb, var(--oc-danger) 40%, transparent); box-shadow: none; }

/* ---- fields --------------------------------------------------------------- */
.oc-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.oc-field > label, .oc-label {
  font-size: 15px; font-weight: 600; color: var(--oc-ink);
}
.oc-req { color: var(--oc-danger); font-weight: 700; }
.oc-optional { color: var(--oc-ink-3); font-weight: 400; }
.oc-input, .oc-select, .oc-textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--oc-surface); color: var(--oc-ink);
  border: 1px solid var(--oc-border-2); border-radius: var(--oc-r);
  font-size: 16px; line-height: 1.3;      /* 16px avoids iOS zoom-on-focus */
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none; -webkit-appearance: none;
}
.oc-textarea { min-height: 96px; padding-top: 12px; resize: vertical; }
.oc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A938C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
.oc-input::placeholder, .oc-textarea::placeholder { color: var(--oc-ink-3); }
.oc-input:focus, .oc-select:focus, .oc-textarea:focus {
  outline: none; border-color: var(--oc-primary);
  box-shadow: 0 0 0 4px var(--oc-primary-ring);
}
.oc-field--invalid .oc-input,
.oc-field--invalid .oc-select,
.oc-field--invalid .oc-textarea { border-color: var(--oc-danger); }
.oc-field--invalid .oc-input:focus,
.oc-field--invalid .oc-select:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc-danger) 22%, transparent); }
.oc-help  { font-size: 14px; color: var(--oc-ink-3); }
.oc-error { font-size: 14px; color: var(--oc-danger); font-weight: 600; display: none; align-items: center; gap: 6px; }
.oc-field--invalid .oc-error { display: flex; }

/* ---- cards / surfaces ----------------------------------------------------- */
.oc-card {
  background: var(--oc-surface); border: 1px solid var(--oc-border);
  border-radius: var(--oc-r-lg); box-shadow: var(--oc-shadow-sm);
}
.oc-card--pad { padding: 22px; }

/* ---- chips / status pills ------------------------------------------------- */
.oc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--oc-pill);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--oc-surface-2); color: var(--oc-ink-2);
  border: 1px solid transparent; white-space: nowrap;
}
.oc-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.oc-chip--review  { background: var(--oc-warn-soft);   color: var(--oc-warn); }
.oc-chip--approved{ background: var(--oc-good-soft);   color: var(--oc-good); }
.oc-chip--denied  { background: var(--oc-danger-soft); color: var(--oc-danger); }
.oc-chip--locked  { background: var(--oc-surface-2);   color: var(--oc-ink-3); }
.oc-chip--extra   { background: var(--oc-info-soft);   color: var(--oc-info); }
/* Reason chips (Missing / Damaged / Extra) are neutral on purpose: colour is
   reserved for STATUS, so the two adjacent columns never speak the same
   colour language about different things. Outlined so it still reads as a chip. */
.oc-chip--reason  { background: transparent; color: var(--oc-ink-2); border-color: var(--oc-border-2); }

/* Billing warning revealed when the "Purchase Item" reason is selected.
   Red on purpose — it is the one reason that costs the group money. */
.oc-billnote { display: none; margin-top: 8px; color: var(--oc-danger); font-weight: 600; }
.oc-billnote.is-on { display: block; }
.oc-chip--prize   { background: var(--oc-accent-soft); color: var(--oc-accent); }
.oc-chip--unread  { background: var(--oc-primary-soft); color: var(--oc-primary-700); }
:where(:root[data-theme="dark"]) .oc-chip--unread { color: var(--oc-primary); }

/* ---- misc ----------------------------------------------------------------- */
/* ---- brand logo (theme-swapping) ------------------------------------------ */
/* URLs resolve against this CSS file, so both surfaces load /corrections/assets/*. */
.cr-logo {
  display: inline-block; width: 150px; height: 40px;
  background: url("cr-logo.png") left center / contain no-repeat;
}
.cr-logo--sm { width: 120px; height: 32px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cr-logo { background-image: url("cr-logo-white.png"); }
}
:root[data-theme="dark"]  .cr-logo { background-image: url("cr-logo-white.png"); }
:root[data-theme="light"] .cr-logo { background-image: url("cr-logo.png"); }

.oc-divider { height: 1px; background: var(--oc-border); border: 0; margin: 0; }
.oc-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;
}
:focus-visible { outline: 3px solid var(--oc-primary); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}