/*
 * Free-tools design tokens.
 *
 * This layer defines the shared surface, border, accent, and dark-mode variables
 * consumed by both the directory dashboard and the routed calculator/reference shell.
 * Site-wide CSS variables from `full-site-main-style.css` remain the source of truth;
 * these aliases simply adapt them into a tool-specific token vocabulary.
 */
#mainContainer.aw-tool-shell-ready,
#mainContainer.aw-tool-template-container {
    --aw-ft-surface-radius: var(--aw-free-tools-surface-radius, 4px);
    --aw-ft-button-radius: var(--aw-free-tools-button-radius, 4px);
    --aw-ft-card-shadow: var(--aw-free-tools-card-shadow, 0 8px 18px rgba(9, 79, 113, 0.08));
    --aw-ft-surface-bg: var(--white);
    --aw-ft-surface-muted: var(--lightgrey);
    --aw-ft-surface-subtle: var(--lightgrey);
    --aw-ft-text-primary: var(--darkblue);
    --aw-ft-text-secondary: var(--grey);
    --aw-ft-text-muted: var(--grey);
    --aw-ft-input-bg: var(--white);
    --aw-ft-input-text: var(--darkoffblack);
    --aw-ft-border-color: rgba(9, 79, 113, 0.14);
    --aw-ft-border-strong: rgba(9, 79, 113, 0.18);
    --aw-ft-border-soft: rgba(9, 79, 113, 0.1);
    --aw-ft-accent-soft: rgba(48, 121, 178, 0.08);
    --aw-ft-focus-ring: rgba(48, 121, 178, 0.16);
    --aw-ft-warning-border: rgba(240, 120, 24, 0.22);
    --aw-ft-warning-bg: rgba(240, 120, 24, 0.08);
    --aw-ft-warning-text: var(--orange);
    --aw-ft-warning-strong-bg: rgba(240, 120, 24, 0.14);
    --aw-ft-warning-strong-text: var(--orange);
    --aw-ft-success-bg: rgba(81, 187, 110, 0.15);
    --aw-ft-success-text: var(--darkgreen);
    --aw-ft-danger-bg: rgba(209, 51, 51, 0.08);
    --aw-ft-danger-strong-bg: rgba(209, 51, 51, 0.12);
    --aw-ft-danger-text: #8f2323;
    --aw-ft-code-bg: var(--aw-ft-accent-soft);
    --aw-ft-code-text: var(--aw-ft-text-primary);
    --aw-ft-inverse-text: var(--white);
    max-width: 1600px;
    margin-top: 1rem;
}

body.dark-mode #mainContainer.aw-tool-shell-ready,
body.dark-mode #mainContainer.aw-tool-template-container {
    --aw-ft-card-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
    --aw-ft-surface-bg: var(--darkoffblack);
    --aw-ft-surface-muted: var(--offblack);
    --aw-ft-surface-subtle: var(--darkgrey);
    --aw-ft-text-primary: var(--white);
    --aw-ft-text-secondary: var(--lightgrey);
    --aw-ft-text-muted: var(--mediumgrey);
    --aw-ft-input-bg: var(--offblack);
    --aw-ft-input-text: var(--white);
    --aw-ft-border-color: rgba(255, 255, 255, 0.14);
    --aw-ft-border-strong: rgba(255, 255, 255, 0.18);
    --aw-ft-border-soft: rgba(255, 255, 255, 0.1);
    --aw-ft-accent-soft: rgba(114, 195, 229, 0.12);
    --aw-ft-focus-ring: rgba(114, 195, 229, 0.24);
    --aw-ft-warning-border: rgba(240, 120, 24, 0.34);
    --aw-ft-warning-bg: rgba(240, 120, 24, 0.14);
    --aw-ft-warning-text: var(--yellow);
    --aw-ft-warning-strong-bg: rgba(240, 120, 24, 0.2);
    --aw-ft-warning-strong-text: var(--yellow);
    --aw-ft-success-bg: rgba(81, 187, 110, 0.18);
    --aw-ft-success-text: var(--green);
    --aw-ft-danger-bg: rgba(209, 51, 51, 0.12);
    --aw-ft-danger-strong-bg: rgba(209, 51, 51, 0.16);
    --aw-ft-danger-text: #ff9a9a;
    --aw-ft-code-bg: rgba(114, 195, 229, 0.14);
    --aw-ft-code-text: var(--lightgrey);
}