/**
 * Esthetichka Design System v3
 * Canonical tokens for all newly designed and migrated customer-facing pages.
 * Legacy brand.css stays in place until each page has passed visual QA.
 */

:root {
    /* Color */
    --ds-black: #111111;
    --ds-ink: #2c2933;
    --ds-white: #ffffff;
    --ds-blue: #3e2bff;
    --ds-blue-dark: #2718c9;
    --ds-pink: #ff5bb7;
    --ds-lilac: #c9adff;
    --ds-lilac-soft: #eee7ff;
    --ds-muted: #625e6b;
    --ds-line: #d8d6df;

    /* Typography */
    --ds-font-display: 'Prata', Georgia, serif;
    --ds-font-display-readable: 'Prata', Georgia, serif;
    --ds-font-text: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ds-weight-regular: 400;
    --ds-weight-medium: 500;
    --ds-weight-semibold: 650;
    --ds-weight-bold: 750;

    /* Shape */
    --ds-radius-control: 2px;
    --ds-radius-panel: 2px;
    --ds-radius-sheet: 24px;

    /* Layout */
    --ds-page-max: 1440px;
    --ds-reading-max: 760px;
    --ds-page-gutter: clamp(18px, 3.2vw, 48px);

    /* Motion */
    --ds-ease: 160ms ease;
}

/*
 * Page foundation for screens migrated to v3.
 * The explicit class is intentional: legacy pages keep their own skin until
 * migration, while v3 pages never need to fight it with !important rules.
 */
.ds-page {
    min-height: 100vh;
    margin: 0;
    background: var(--ds-white);
    color: var(--ds-ink);
    font-family: var(--ds-font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.ds-page *,
.ds-page *::before,
.ds-page *::after {
    box-sizing: border-box;
}

.ds-page button,
.ds-page input,
.ds-page select,
.ds-page textarea {
    font: inherit;
}

.ds-label {
    color: var(--ds-blue);
    font: var(--ds-weight-bold) 12px/1.2 var(--ds-font-text);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ds-button-primary {
    display: inline-flex;
    min-height: 48px;
    padding: 14px 22px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ds-radius-control);
    background: var(--ds-blue);
    color: var(--ds-white);
    font: var(--ds-weight-bold) 14px/1 var(--ds-font-text);
    text-decoration: none;
    transition: background var(--ds-ease), transform var(--ds-ease);
}
.ds-button-primary:hover { background: var(--ds-blue-dark); }
.ds-button-primary:active { transform: translateY(1px); }

.ds-button-primary:focus-visible,
.ds-link:focus-visible {
    outline: 3px solid var(--ds-pink);
    outline-offset: 3px;
}

.ds-link {
    color: var(--ds-black);
    font-weight: var(--ds-weight-bold);
    text-decoration-color: var(--ds-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
    .ds-button-primary { transition: none; }
}