/*
 * Shared visual layer.
 *
 * This stylesheet is loaded before tool-specific styles. It defines the
 * semantic theme and recurring states that specialist views can extend.
 */

:root {
    --theme-color-text: var(--color-text);
    --theme-color-subtext: var(--color-subtext);
    --theme-color-heading: var(--color-heading);
    --theme-color-accent: var(--color-accent);
    --theme-color-accent-hover: var(--color-accent-hover);
    --theme-color-input-bg: var(--color-input-bg);
    --theme-color-input-text: var(--color-input-text);
    --theme-color-input-border: var(--color-input-border);

    /* Compatibility aliases for standalone tool styles. */
    --bg: var(--color-bg);
    --surface: var(--color-surface);
    --surface-subtle: var(--color-surface-muted);
    --surface-color: var(--color-surface);
    --surface-2: var(--color-surface-muted);
    --text: var(--color-text);
    --text-muted: var(--color-muted);
    --text-strong: var(--color-text);
    --border: var(--color-border);
    --shadow: var(--shadow-md);
    --ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent);
    --brand-primary: var(--color-accent);
    --danger-color: var(--color-error);
    --success-color: var(--color-success);
}

html,
body {
    background: var(--color-bg);
    color: var(--color-text);
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--color-selected);
    color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);
}

p,
small,
dl,
dt,
dd,
li {
    color: inherit;
}

p {
    color: var(--color-subtext);
}

a {
    color: var(--color-link);
}

a:hover,
a:focus-visible {
    color: var(--color-accent-hover);
}

:where(button, input, select, textarea) {
    font: inherit;
}

:where(button, input, select, textarea):disabled,
:where(button, input, select, textarea)[aria-disabled="true"] {
    background-color: var(--color-disabled-bg);
    border-color: var(--color-border);
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

:where(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-focus) 72%, transparent);
    outline-offset: 2px;
}

/* Navigation and page chrome */
.site-header {
    background: var(--navbar-bg);
    border-color: var(--color-border);
    box-shadow: var(--navbar-shadow);
}

/* Shared surfaces */
:where(
    .card,
    .panel,
    .converter-panel,
    .converter-section,
    .calculator-section,
    .subnet-card,
    .subnet-results,
    .find-ip-panel,
    .find-ip-results,
    .clock-app,
    .week-card,
    .rate-dashboard,
    .rate-card,
    .iban-card,
    .pg-card,
    .contact-card,
    .form-card,
    .result-card,
    .copy-surface,
    .tool-info-card__inner
) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

:where(.card, .panel, .pg-card, .contact-card, .clock-app) {
    border-radius: var(--radius-lg);
}

.tool-page-header {
    color: var(--color-text);
}

.tool-page-header__subtitle,
.tool-page-header__breadcrumbs {
    color: var(--color-subtext);
}

.tool-page-header__breadcrumbs li + li::before {
    color: var(--color-accent);
}

.tool-page-header__description--secondary {
    color: var(--color-muted);
}

.home-hero::before {
    background: var(--color-surface-muted);
}

html.dark-mode .home-hero::before {
    background: var(--color-surface-muted);
}

.tool-category-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.tool-category-card__header {
    border-bottom-color: var(--color-accent);
}

.tool-category-card__title,
.tool-link {
    color: var(--color-text);
}

.tool-link {
    background: var(--color-surface-muted);
    border-color: transparent;
}

.tool-link:hover,
.tool-link:focus-visible {
    background: var(--color-hover);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.tool-link-icon,
.tool-category-card__title-icon {
    color: var(--color-muted);
}

.tool-category-filter__button {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
}

.tool-category-filter__button:hover,
.tool-category-filter__button:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-hover);
    color: var(--color-text);
}

.tool-category-filter__button.is-active,
.tool-category-filter__button[aria-pressed="true"] {
    border-color: var(--color-action-bg);
    background: var(--color-action-bg);
    color: var(--color-action-text);
}

.clock-app {
    background: var(--color-surface);
}

.random-number-generator .card {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

/* Buttons */
.btn,
.pg-btn,
.site-nav__icon-button,
.site-nav__menu-toggle {
    border-color: var(--color-border-strong);
}

.btn-primary,
.pg-btn-primary {
    border-color: var(--color-action-bg);
    background: var(--color-action-bg);
    color: var(--color-action-text);
    text-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.pg-btn-primary:hover:not(:disabled),
.pg-btn-primary:focus-visible {
    border-color: var(--color-action-hover);
    background: var(--color-action-hover);
    color: var(--color-action-text);
}

.btn-outline,
.pg-btn-ghost {
    border-color: var(--color-action-bg);
    background: transparent;
    color: var(--color-action-bg);
}

.btn-outline:hover,
.btn-outline:focus-visible,
.pg-btn-ghost:hover:not(:disabled),
.pg-btn-ghost:focus-visible {
    border-color: var(--color-action-hover);
    background: var(--color-hover);
    color: var(--color-action-hover);
}

.btn-secondary,
.pg-btn-secondary {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.pg-btn-secondary:hover:not(:disabled),
.pg-btn-secondary:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-hover);
    color: var(--color-text);
}

/* Form controls */
:where(
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    select,
    textarea,
    .form-control,
    .pg-input,
    .pg-select,
    .channel-input,
    .result-input,
    .contact-form__input,
    .contact-form__textarea
) {
    background: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-input-text);
}

:where(input, select, textarea)::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

:where(
    input,
    select,
    textarea,
    .form-control,
    .pg-input,
    .pg-select,
    .channel-input,
    .result-input,
    .contact-form__input,
    .contact-form__textarea
):focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent);
}

label,
.field-label,
.section-label,
.contact-form__label {
    color: var(--color-text);
}

.help-text,
.hint,
.muted,
.contact-form__help,
.contact-form__privacy,
.contact-security-note {
    color: var(--color-muted);
}

/* Tables, result values and status messages */
table {
    background: var(--color-table-bg);
    color: var(--color-text);
}

th {
    background: var(--color-table-header-bg);
    color: var(--color-text);
}

th,
td {
    border-color: var(--color-table-border);
}

code,
pre,
.result-number,
.rate-number,
.ip-value,
.clock-app__time {
    color: var(--color-text);
}

.text-red,
.pg-warning,
.pg-error,
.error-message,
.find-ip-message--error {
    color: var(--color-error);
}

.form-alert {
    border-left-color: var(--color-info);
    background: var(--color-info-bg);
    color: var(--color-text);
}

.form-alert--error {
    border-left-color: var(--color-error);
    background: var(--color-error-bg);
}

.contact-success__icon {
    background: var(--color-success);
    box-shadow: var(--shadow-md);
}

.toast {
    background: var(--color-info);
    color: var(--color-on-accent);
    box-shadow: var(--shadow-md);
}

/* Tool-specific aliases: these tools retain their internal component names,
   but now inherit the shared mode-specific values. */
.keyboard-tool {
    --kb-surface: var(--color-surface);
    --kb-surface-muted: var(--color-surface-muted);
    --kb-border: var(--color-border);
    --kb-text: var(--color-text);
    --kb-muted: var(--color-muted);
    --kb-accent: var(--color-secondary-accent);
    --kb-accent-strong: var(--color-link);
    --kb-active: var(--color-success);
    --kb-tested: var(--color-warning);
    --kb-shadow: var(--shadow-md);
}

.refresh-tool {
    --rrt-surface: var(--color-surface);
    --rrt-surface-alt: var(--color-surface-muted);
    --rrt-border: var(--color-border);
    --rrt-text: var(--color-text);
    --rrt-muted: var(--color-muted);
    --rrt-accent: var(--color-secondary-accent);
    --rrt-accent-strong: var(--color-link);
    --rrt-positive: var(--color-info);
    --rrt-success: var(--color-success);
    --rrt-warning: var(--color-warning);
    --rrt-shadow: var(--shadow-md);
}

main.password-generator {
    --pg-bg: var(--color-bg);
    --pg-card: var(--color-surface);
    --pg-text: var(--color-text);
    --pg-muted: var(--color-muted);
    --pg-border: var(--color-border);
    --pg-accent: var(--color-accent);
    --pg-button: var(--color-action-bg);
    --pg-button-text: var(--color-action-text);
    --pg-button-secondary: var(--color-surface-muted);
    --pg-button-secondary-text: var(--color-text);
    --pg-shadow: var(--shadow-md);
    --pg-accent-rgb: 13, 172, 219;
}

html.dark-mode main.password-generator {
    --pg-accent-rgb: 219, 101, 0;
}

main.random-number-generator {
    --color-text: var(--theme-color-text);
    --color-subtext: var(--theme-color-subtext);
    --color-heading: var(--theme-color-heading);
    --color-accent: var(--theme-color-accent);
    --color-accent-hover: var(--theme-color-accent-hover);
    --color-input-bg: var(--theme-color-input-bg);
    --color-input-text: var(--theme-color-input-text);
    --color-input-border: var(--theme-color-input-border);
}

.iban-tool {
    --iban-surface: var(--color-surface);
    --iban-surface-alt: var(--color-surface-muted);
    --iban-surface-muted: var(--color-surface-muted);
    --iban-text: var(--color-text);
    --iban-text-muted: var(--color-muted);
    --iban-border: var(--color-border);
    --iban-shadow: var(--shadow-md);
    --iban-ring: color-mix(in srgb, var(--color-focus) 28%, transparent);
    --iban-success-bg: var(--color-success);
    --iban-success-text: var(--color-action-text);
    --iban-warn-bg: var(--color-warning);
    --iban-warn-text: var(--color-text);
    --iban-error-bg: var(--color-error);
    --iban-error-text: var(--color-action-text);
    --iban-neutral-bg: var(--color-surface-muted);
    --iban-neutral-text: var(--color-text);
    --iban-muted-bg: var(--color-surface-muted);
}

/* Keep motion restrained and make the new hierarchy work on small screens. */
@media (max-width: 42rem) {
    :where(.card, .panel, .pg-card, .contact-card, .clock-app) {
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}