/* Şafak Net — shared interface foundations. All new surfaces use these tokens. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #101114;
  --ui-surface: #17191d;
  --ui-surface-raised: #1e2126;
  --ui-surface-soft: #131519;
  --ui-border: #30343c;
  --ui-border-strong: #4a505b;
  --ui-text: #f0f1f3;
  --ui-muted: #acb1bc;
  --ui-subtle: #8e95a2;
  --ui-accent: #e9ecef;
  --ui-on-accent: #17191d;
  --ui-success: #74d9a3;
  --ui-success-bg: #193029;
  --ui-danger: #ff8f9c;
  --ui-danger-bg: #351f28;
  --ui-warning: #edc783;
  --ui-warning-bg: #312b20;
  --ui-info: #9abafb;
  --ui-info-bg: #202b40;
  --ui-radius: 14px;
  --ui-shadow: 0 16px 48px #00000024;
  --ui-focus: #9fbdfa;
  --font-sans: var(--font-ui);
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --dim: var(--ui-subtle);
  --line: var(--ui-border);
  --line-bright: var(--ui-border-strong);
}
html[data-theme="light"] {
  color-scheme: light;
  --ui-bg: #f3f4f6;
  --ui-surface: #ffffff;
  --ui-surface-raised: #f6f7f9;
  --ui-surface-soft: #eceef2;
  --ui-border: #dce0e6;
  --ui-border-strong: #b6beca;
  --ui-text: #20242c;
  --ui-muted: #5d6675;
  --ui-subtle: #697382;
  --ui-accent: #20242c;
  --ui-on-accent: #ffffff;
  --ui-success: #18794f;
  --ui-success-bg: #e7f5ed;
  --ui-danger: #b72f48;
  --ui-danger-bg: #fbecef;
  --ui-warning: #88601d;
  --ui-warning-bg: #fcf3de;
  --ui-info: #315d9e;
  --ui-info-bg: #e9f0fd;
  --ui-shadow: 0 16px 48px #2530470b;
  --ui-focus: #426eb5;
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --dim: var(--ui-subtle);
  --line: var(--ui-border);
  --line-bright: var(--ui-border-strong);
}
html[data-theme] { background: var(--ui-bg); scroll-behavior: smooth; }
html[data-theme] body { background: var(--ui-bg); color: var(--ui-text); font-size: 14px; line-height: 1.5; }
html[data-theme] :is(button, input, select, textarea) { font-family: var(--font-ui); }
html[data-theme] :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
html[data-theme] :is(input, textarea)::placeholder { color: var(--ui-subtle); opacity: 1; }
html[data-theme] :is(input, textarea, select) { accent-color: var(--ui-accent); }
html[data-theme] :is(button, a) { -webkit-tap-highlight-color: transparent; }
html[data-theme] :is(button, a, input, select, textarea) { scroll-margin-block: 24px; }
html[data-theme] :is(.micro-label, .eyebrow) { color: var(--ui-subtle); font-size: 10px; line-height: 1.5; letter-spacing: .13em; font-weight: 650; }
html[data-theme] :is(h1, h2, h3, h4) { text-wrap: balance; }
html[data-theme] :is(p, small) { overflow-wrap: anywhere; }
.ui-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
html[data-theme] .ambient-grid { display: none; }
html[data-theme] .primary-action { border: 1px solid var(--ui-accent); border-radius: 9px; background: var(--ui-accent); color: var(--ui-on-accent); box-shadow: none; min-height: 48px; font-size: 12px; font-weight: 750; letter-spacing: .03em; }
html[data-theme] .primary-action b { border-color: color-mix(in srgb, var(--ui-on-accent) 18%, transparent); }
html[data-theme] .primary-action:disabled { opacity: .5; cursor: not-allowed; }
html[data-theme] :is(.secondary-submit, .secondary-action, .mini-action) { border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface-raised); color: var(--ui-text); box-shadow: none; min-height: 38px; font-size: 11px; font-weight: 650; letter-spacing: .02em; }
html[data-theme] .danger-action { border-color: var(--ui-danger); border-radius: 9px; background: var(--ui-danger-bg); color: var(--ui-danger); font-size: 12px; }
html[data-theme] .modal { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border-strong); border-radius: 18px; box-shadow: 0 32px 100px #0006; max-height: calc(100dvh - 32px); scrollbar-width: thin; scrollbar-color: var(--ui-border-strong) transparent; }
html[data-theme] .modal::backdrop { background: #080c147a; backdrop-filter: blur(9px); }
html[data-theme] .modal-close { display: grid; place-items: center; border-radius: 9px; background: var(--ui-surface-raised); border-color: var(--ui-border); color: var(--ui-muted); width: 36px; height: 36px; }
html[data-theme] .modal :is(h2, h3) { color: var(--ui-text); letter-spacing: -.025em; }
html[data-theme] .modal p { color: var(--ui-muted); font-size: 13px; line-height: 1.65; }
html[data-theme] .workspace-modal { padding: 28px; }
html[data-theme] .workspace-modal > header { padding-right: 28px; }
html[data-theme] .workspace-modal h2 { font-size: 26px; }
html[data-theme] .workspace-modal :is(input:not([type=checkbox]):not([type=range]), select, textarea) { background: var(--ui-surface-soft); color: var(--ui-text); border: 1px solid var(--ui-border-strong); min-height: 44px; border-radius: 8px; font-size: 14px; }
html[data-theme] .workspace-modal :is(label, legend) { color: var(--ui-muted); font-size: 12px; }
html[data-theme] :is(.code-categories button, .code-row, .archive-record, .mic-test-panel, .code-compose, .voice-privacy, .recovery-card) { background: var(--ui-surface-raised); color: var(--ui-text); border-color: var(--ui-border); }
html[data-theme] :is(.code-categories button.is-active, .code-row.is-selected) { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); }
html[data-theme] .code-row { padding: 14px; }
html[data-theme] .code-row b { color: inherit; }
html[data-theme] :is(.codes-group-title, .code-row small, .archive-record small, .archive-record pre, .recovery-card p, .mic-test-panel p) { color: var(--ui-muted); }
html[data-theme] .code-row.is-urgent { border-left-color: var(--ui-danger); }
html[data-theme] .code-row:hover:not(.is-selected) { background: var(--ui-surface-soft); }
html[data-theme] .emergency-audio-settings { border-color: var(--ui-danger); background: var(--ui-danger-bg); }
html[data-theme] .emergency-audio-settings > div strong { color: var(--ui-danger); }
html[data-theme] .emergency-audio-settings > div small { color: var(--ui-muted); }
html[data-theme] .form-status:empty { min-height: 0; margin-block: 0; padding: 0; }
html[data-theme] .toast { color: var(--ui-text); background: var(--ui-surface-raised); border-color: var(--ui-border-strong); border-radius: 10px; box-shadow: var(--ui-shadow); font-size: 13px; }
html[data-theme] [data-tooltip]::after { color: var(--ui-text); background: var(--ui-surface-raised); border-color: var(--ui-border-strong); border-radius: 8px; font-size: 11px; }
html[data-theme] .pagination { color: var(--ui-muted); font-size: 12px; }
html[data-theme] .pagination button { min-height: 38px; padding: 8px 12px; color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); border-radius: 8px; }
html[data-theme] .pagination button:disabled { opacity: .5; }
/* Severity retains a readable label and a color in both themes. */
html[data-theme] [data-severity="success"] { --status-color: var(--ui-success); --status-bg: var(--ui-success-bg); }
html[data-theme] [data-severity="info"] { --status-color: var(--ui-info); --status-bg: var(--ui-info-bg); }
html[data-theme] [data-severity="warning"] { --status-color: var(--ui-warning); --status-bg: var(--ui-warning-bg); }
html[data-theme] [data-severity="critical"] { --status-color: var(--ui-danger); --status-bg: var(--ui-danger-bg); }
html[data-theme] .app-shell .chat-message.status-message,
html[data-theme] .status-message.archive-record { border: 1px solid var(--ui-border); border-left: 3px solid var(--status-color); background: var(--status-bg); }
html[data-theme] .app-shell .chat-message.status-message .status-message-title strong,
html[data-theme] .status-message.archive-record .status-message-title strong { color: var(--status-color); font-size: 16px; }
html[data-theme] .app-shell .status-message .chat-code { color: var(--status-color); background: var(--ui-surface); border-color: var(--status-color); }

/* Preserve the familiar entrance while sharing typography and input surfaces. */
html[data-theme] .auth-panel { background: var(--ui-surface); }
html[data-theme] .auth-form header h2 { color: var(--ui-text); }
html[data-theme] .auth-form :is(.field-label, header > p:not(.micro-label), .account-type legend) { color: var(--ui-muted); }
html[data-theme] .auth-form .field-wrap { background: var(--ui-surface-soft); border-color: var(--ui-border-strong); border-radius: 8px; }
html[data-theme] .auth-form .field-wrap :is(input, select) { color: var(--ui-text); background: transparent; }
html[data-theme] .auth-form .field-wrap > span { color: var(--ui-subtle); border-color: var(--ui-border); }
html[data-theme] .passkey-login-button { color: var(--ui-text); background: var(--ui-surface-raised); border-color: var(--ui-border-strong); }
html[data-theme] .passkey-login-button small { color: var(--ui-muted); }
html[data-theme] .auth-tabs .auth-tab { color: var(--ui-subtle); }
html[data-theme] .auth-tabs .auth-tab.is-active { color: var(--ui-text); border-color: var(--ui-text); }
html[data-theme] .account-type label span { color: var(--ui-text); background: var(--ui-surface-soft); border-color: var(--ui-border); border-radius: 8px; }
html[data-theme] .account-type input:checked + span { background: var(--ui-surface-raised); border-color: var(--ui-accent); box-shadow: inset 3px 0 var(--ui-accent); }
html[data-theme] .profile-picker { background: var(--ui-surface-soft); border-color: var(--ui-border); border-radius: 8px; }
html[data-theme] .forgot-password { color: var(--ui-muted); border-color: var(--ui-border); }
@media (max-width: 600px) {
  html[data-theme] .workspace-modal { padding: 22px 18px; }
  html[data-theme] .workspace-modal h2 { font-size: 23px; }
  html[data-theme] :is(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}