@font-face {
  font-family: 'Caretta Office';
  src: url('/brand/CarettaOfficeBold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root[data-tema] {
  --fundal: var(--ct-page-bg);
  --card: var(--ct-surface-card);
  --text: var(--ct-fg-1);
  --slab: var(--ct-fg-3);
  --linie: var(--ct-border-default);
  --rosu: var(--ct-brand-red);
  --albastru: var(--ct-fg-link);
  --albastru-slab: var(--ct-c-tint-1);
  --ales: var(--ct-accent);
  --ales-text: var(--ct-fg-on-accent);
  --ok: var(--ct-ok-700);
  --urgent: var(--ct-warn-700);
}
html { color-scheme: light; }
:root[data-tema="dark"] { color-scheme: dark; }

:root[data-tema] body {
  background: var(--ct-page-ambient), var(--ct-page-bg);
  background-attachment: fixed;
  font-family: var(--ct-ff-ui);
  color: var(--ct-fg-1);
}
:root[data-tema] :focus-visible { outline: 2px solid var(--ct-border-focus); outline-offset: 2px; }

:root[data-tema] .valabil,
:root[data-tema] .bloc,
:root[data-tema] .lista,
:root[data-tema] .pal-card,
:root[data-tema] .gol,
:root[data-tema] .mesaj {
  border-color: var(--ct-border-subtle);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-c-card-shadow);
}

:root[data-tema] .valabil.previzualizare { border-color: var(--rosu); }
:root[data-tema] .intrebare.lipsa,
:root[data-tema] .bloc.lipsa { border-color: var(--ct-crit-500); box-shadow: 0 0 0 1px var(--ct-crit-500); }

:root[data-tema] .nume-camp,
:root[data-tema] .cauta {
  border-color: var(--ct-c-field-border);
  background: var(--ct-c-field-bg);
  color: var(--ct-fg-1);
  border-radius: var(--ct-radius-control);
}
:root[data-tema] .nume-camp:hover,
:root[data-tema] .cauta:hover { border-color: var(--ct-c-field-border-hover); }
:root[data-tema] .nume-camp:focus,
:root[data-tema] .cauta:focus { border-color: var(--ct-border-focus); box-shadow: var(--ct-shadow-focus); }
:root[data-tema] .nume-camp.gresit { border-color: var(--ct-crit-500); }
:root[data-tema] ::placeholder { color: var(--ct-fg-4); opacity: 1; }

:root[data-tema] .varianta,
:root[data-tema] .varianta .litera,
:root[data-tema] .varianta .semn { border-color: var(--ct-c-field-border); }
:root[data-tema] .varianta { border-radius: var(--ct-radius-control); }
:root[data-tema] .varianta:hover { border-color: var(--ct-c-field-border-hover); }
:root[data-tema] .varianta[aria-checked="true"] { border-color: var(--ales); }
:root[data-tema] .varianta[aria-checked="true"] .litera,
:root[data-tema] .varianta[aria-checked="true"] .semn { border-color: var(--ales-text); }
:root[data-tema] .varianta:focus-visible,
:root[data-tema] .acord:focus-visible { outline: 2px solid var(--ct-border-focus); outline-offset: 2px; }

:root[data-tema] .trimite {
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 60%), var(--ct-accent);
  color: var(--ct-fg-on-accent);
  box-shadow: var(--ct-c-primary-shadow);
  border-radius: var(--ct-c-btn-radius);
  font-family: var(--ct-ff-ui);
}
:root[data-tema] .trimite:hover:not(:disabled) { background: var(--ct-accent-hover); }
:root[data-tema] .alt-test {
  background: var(--ct-c-btn-bg);
  border-color: var(--ct-c-btn-border);
  color: var(--ct-fg-1);
  box-shadow: var(--ct-c-btn-shadow);
  border-radius: var(--ct-c-btn-radius);
}
:root[data-tema] .alt-test:hover { background: var(--ct-c-btn-bg-hover); border-color: var(--ct-c-btn-border-hover); }

:root[data-tema] .eroare,
:root[data-tema] .nume-nota.gresit,
:root[data-tema] .nr,
:root[data-tema] .pas-semn { color: var(--ct-crit-700); }

:root[data-tema] .gata .bifa { color: var(--ct-page-bg); }

:root[data-tema] h1,
:root[data-tema] .pal-cap h3 { font-family: 'Caretta Office', var(--ct-ff-display); letter-spacing: -.02em; }
:root[data-tema] .trimite,
:root[data-tema] .sectiune,
:root[data-tema] .categorie > h2 { font-family: var(--ct-ff-ui); }
:root[data-tema] .semn { font-family: var(--ct-ff-ui); }

:root[data-tema] .jos {
  background: var(--ct-tc-topbar-glass);
  -webkit-backdrop-filter: blur(var(--ct-glass-blur));
  backdrop-filter: blur(var(--ct-glass-blur));
  border-top-color: var(--ct-chrome-border);
}

:root[data-tema] #login-form {
  background: var(--ct-surface-raised);
  border: 1px solid var(--ct-border-subtle);
  border-radius: var(--ct-radius-card);
  box-shadow: var(--ct-shadow-modal);
  color: var(--ct-fg-1);
}
:root[data-tema] #login-form h1 { font-size: 22px; color: var(--ct-fg-1); }
:root[data-tema] #login-form .nota,
:root[data-tema] #login-form .tine-minte,
:root[data-tema] #login-form .optional { color: var(--ct-fg-3); }
:root[data-tema] #login-form label { color: var(--ct-fg-2); }
:root[data-tema] #login-form input[type=text],
:root[data-tema] #login-form input[type=password] {
  border-color: var(--ct-c-field-border);
  background: var(--ct-c-field-bg);
  color: var(--ct-fg-1);
  border-radius: var(--ct-radius-control);
}
:root[data-tema] #login-form input[type=text]:hover,
:root[data-tema] #login-form input[type=password]:hover { border-color: var(--ct-c-field-border-hover); }
:root[data-tema] #login-form input:focus {
  border-color: var(--ct-border-focus);
  background: var(--ct-c-field-bg);
  box-shadow: var(--ct-shadow-focus);
}
:root[data-tema] #login-form input[type=checkbox] { accent-color: var(--ct-accent); }
:root[data-tema] #login-form button {
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 60%), var(--ct-accent);
  color: var(--ct-fg-on-accent);
  box-shadow: var(--ct-c-primary-shadow);
  border-radius: var(--ct-c-btn-radius);
}
:root[data-tema] #login-form button:hover:not(:disabled) { background: var(--ct-accent-hover); }
:root[data-tema] #login-form .subsol { border-top-color: var(--ct-border-subtle); color: var(--ct-fg-3); }

:root[data-tema="dark"] #login-logo { content: url('/brand/caretta-logo-dark.png'); }

:root[data-tema] .citat { color: var(--ct-fg-2); }
:root[data-tema] .citat figcaption { color: var(--ct-fg-3); }

@media print {
  :root[data-tema] body { background: #fff; }
  :root[data-tema] .valabil,
  :root[data-tema] .bloc,
  :root[data-tema] .lista,
  :root[data-tema] .pal-card { box-shadow: none; }
}