/**
 * Source of truth for SWS design tokens.
 *
 * Plain custom properties rather than Tailwind syntax, because this file is read by Tailwind (mapped into utilities by resources/css/tailwind.css), by dashboard.css and by any future stylesheet.
 *
 * To add a token, define it here and map it in resources/css/tailwind.css only if markup needs a
 * Tailwind utility for it.
 */

:root {
    /* Brand colour */
    --sw-color-ink: #191919;
    --sw-color-ink-strong: #242222;
    --sw-color-paper: #f7f7f5;
    --sw-color-surface: #ffffff;
    --sw-color-surface-muted: #f1f1ee;
    --sw-color-border: #e3e2de;
    --sw-color-accent: #56b3ff;

    /* Muted body text. Replaces #8d8a8a, which was too light to read on paper
       at body sizes. This measures 4.92:1. */
    --sw-color-smoke: #6e6b6b;

    /* Section and card tints */
    --sw-color-mist: #e7f2ed;
    --sw-color-lilac: #eeebf1;
    --sw-color-sky: #bed6ea;
    --sw-color-coral: #f3aaa0;
    --sw-color-blush: #f5eeee;
    --sw-color-haze: #eef2f4;
    --sw-color-sage: #edf4ee;

    /* Hero .soft-noise radials */
    --sw-color-glow-warm: #f1cadc;
    --sw-color-glow-cool: #bed6ea;

    /* Status. Each foreground has enough contrast on its own -soft background:
       success 5.59:1, warning 5.96:1, danger 6.36:1, neutral 6.74:1. */
    --sw-color-success: #216e39;
    --sw-color-success-soft: #e9f5ec;
    --sw-color-success-border: #c7ddcc;
    --sw-color-warning: #805500;
    --sw-color-warning-soft: #fff4d6;
    --sw-color-warning-border: #e3c56c;
    --sw-color-danger: #9e2a2b;
    --sw-color-danger-soft: #fbe9e9;
    --sw-color-danger-border: #e3b2b2;
    --sw-color-info: #2563eb;
    --sw-color-info-soft: #dbeafe;
    --sw-color-info-border: #bfdbfe;
    --sw-color-neutral: #4b5563;
    --sw-color-neutral-soft: #f0f2f5;
    --sw-color-neutral-border: #cfd4dc;

    /* Pressed/hover shade for a status-coloured control. */
    --sw-color-neutral-strong: #374151;
    --sw-color-danger-strong: #7a2223;

    /* Dashboard sidebar. Lightening the panel from near-black to brand ink costs
       contrast, so the muted foreground is raised to hold the ~7.5:1 it had before
       (#a5a5a0 would drop to 5.15:1 on this ink). */
    --sw-color-sidebar: #101c2b;
    --sw-color-sidebar-raised: #3f4145;
    --sw-color-sidebar-line: #334155;
    --sw-color-sidebar-muted: #c8cdd5;

    /* The dimmer of the two sidebar text levels, for section labels. Still 4.59:1
       on the sidebar; the #81817c it replaces measured 3.25:1 there. */
    --sw-color-sidebar-dim: #a2aab6;

    /* Typeface */
    --sw-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
    --sw-font-serif: Fraunces, Georgia, ui-serif, serif;

    /* Body type scale */
    --sw-text-xs: 0.75rem;
    --sw-text-sm: 0.875rem;
    --sw-text-base: 1rem;
    --sw-text-lg: 1.125rem;
    --sw-text-xl: 1.25rem;
    --sw-text-2xl: 1.5rem;
    --sw-text-3xl: 2rem;
    --sw-leading-tight: 1.2;
    --sw-leading-snug: 1.5;
    --sw-leading-relaxed: 1.7;

    /* Heading steps. Each has one job, so a new page picks a step instead of
       inventing a size: display is the landing hero only, page-title is an h1 on a
       wide subpage, section-title is every h2, card-title is an h3 inside a panel. */
    --sw-text-display: clamp(4rem, 8vw, 6.8rem);
    --sw-leading-display: 0.9;
    --sw-text-page-title: clamp(2.625rem, 7vw, 4.5rem);
    --sw-leading-page-title: 0.95;
    --sw-text-section-title: clamp(2.25rem, 4vw, 3.75rem);
    --sw-leading-section-title: 1.1;
    --sw-text-card-title: 1.5rem;
    --sw-leading-card-title: 1.25;

    /* Serif display text inside a constrained column, such as pull quotes and the auth
       screen's card heading. Sized well below section-title because clamp() tracks the
       viewport, not the column it sits in. */
    --sw-text-subhead: clamp(1.5rem, 2.6vw, 2.5rem);
    --sw-leading-subhead: 1.15;

    /* Eyebrow, the uppercase kicker above a heading and every form label. */
    --sw-text-eyebrow: 0.875rem;
    --sw-tracking-eyebrow: 0.18em;

    /* Radius. Marketing draws from the top of this one scale and the dashboard from the
       bottom, so the two densities cannot drift apart. */
    --sw-radius-xs: 0.375rem;
    --sw-radius-sm: 0.5rem;
    --sw-radius-md: 0.75rem;
    --sw-radius-lg: 1.1rem;
    --sw-radius-xl: 1.35rem;
    --sw-radius-2xl: 2rem;
    --sw-radius-pill: 999px;

    /* Elevation, ink-tinted rather than pure black. A neutral-black shadow over warm
       paper reads grey and made the dashboard look like a separate product. */
    --sw-shadow-xs: 0 1px 2px rgb(52 50 50 / 6%);
    --sw-shadow-sm: 0 0.35rem 1rem rgb(52 50 50 / 7%);
    --sw-shadow-md: 0 0.65rem 1.5rem rgb(52 50 50 / 10%);
    --sw-shadow-soft: 0 24px 80px rgb(52 50 50 / 10%);
    --sw-shadow-button:
        inset 0 1px 0 rgb(255 255 255 / 22%), 0 10px 24px rgb(52 50 50 / 16%);
    --sw-shadow-dialog: 0 1.5rem 4rem rgb(52 50 50 / 24%);

    /* Warm lift for the one summary card that needs attention. */
    --sw-shadow-priority: 0 0.65rem 1.5rem
        color-mix(in srgb, var(--sw-color-warning) 16%, transparent);

    /* Motion */
    --sw-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sw-duration-fast: 150ms;
    --sw-duration-base: 250ms;
    --sw-duration-slow: 420ms;

    /* Focus. The inverse ring is for dark surfaces like the sidebar, where the
       ink ring cannot be seen. */
    --sw-focus-ring-color: var(--sw-color-ink);
    --sw-focus-ring-color-inverse: var(--sw-color-paper);
    --sw-focus-ring-width: 3px;
    --sw-focus-ring-offset: 3px;

    /* Layout tiers */
    --sw-container-wide: 80rem;
    --sw-container-base: 64rem;
    --sw-container-narrow: 56rem;
    --sw-container-form: 28rem;
    --sw-prose-max: 42rem;

    --sw-gutter: 1.25rem;
    --sw-gutter-lg: 2rem;
    --sw-section-y: 6rem;
    --sw-section-y-lg: 8rem;
    --sw-nav-height: 6rem;

    /* Clearing the fixed navbar then applying the normal rhythm. Inlining this
       arithmetic per page is what let the contact and login pages pick different
       top offsets. */
    --sw-page-top: calc(var(--sw-nav-height) + var(--sw-section-y));
    --sw-page-top-lg: calc(var(--sw-nav-height) + var(--sw-section-y-lg));

    --sw-gap-tight: 1.25rem;
    --sw-gap-base: 1.5rem;
    --sw-gap-loose: 3rem;
}

/* Base. Agrees with Tailwind's preflight, so it changes nothing on a page that
   loads Tailwind and supplies the same defaults to the dashboard, which does not. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* iOS Safari keeps a native width on date fields that ignores width 100%, so they ran
   past their card. Dropping the native look lets them fit and the picker still opens. */
input[type="date"],
input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

/* Native dropdown arrows hug the right edge, so every single-choice select draws its own chevron with room around it. */
select:not([multiple], [size]) {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-right: 2.75rem;
}


[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Shared focus ring. Set here rather than per stylesheet so the public pages and
   the dashboard cannot drift apart on focus visibility. */
:focus-visible {
    outline: var(--sw-focus-ring-width) solid var(--sw-focus-ring-color);
    outline-offset: var(--sw-focus-ring-offset);
}

/* Flash messages. The shared templates/element/flash/* elements emit `.message`,
   which was previously restyled in three places (the auth layout, the contact
   template and dashboard.css) because no layer owned it. */
.message {
    background: var(--sw-color-surface);
    border: 1px solid var(--sw-color-border);
    border-radius: var(--sw-radius-lg);
    color: var(--sw-color-ink);
    /* The flash elements dismiss on click, so the cursor has to say so. */
    cursor: pointer;
    font-weight: 700;
    margin-bottom: var(--sw-gap-base);
    padding: 1rem 1.25rem;
}

.message.success {
    background: var(--sw-color-success-soft);
    border-color: var(--sw-color-success-border);
    color: var(--sw-color-success);
}

.message.warning {
    background: var(--sw-color-warning-soft);
    border-color: var(--sw-color-warning-border);
    color: var(--sw-color-warning);
}

.message.error {
    background: var(--sw-color-danger-soft);
    border-color: var(--sw-color-danger-border);
    color: var(--sw-color-danger);
}

.message.hidden {
    display: none;
}

/* CakePHP's FormHelper wraps each control in `div.input`, and marks a failed one
   `.error` with a sibling `.error-message`. Styling those here gives every
   server-rendered form the same error treatment without overriding form templates. */
.input {
    display: block;
}

.input.error input,
.input.error textarea,
.input.error select {
    border-color: var(--sw-color-danger);
}

.error-message {
    color: var(--sw-color-danger);
    font-size: var(--sw-text-sm);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Canonical brand mark (templates/element/brand.php), shared by every layout */
.brand {
    align-items: center;
    display: inline-flex;
    gap: 0.875rem;
    min-height: 2.75rem;
    text-decoration: none;
}

.brand__waveform {
    align-items: center;
    display: flex;
    gap: 0.18rem;
    height: 2rem;
}

.brand__waveform span {
    background: var(--brand-fg, var(--sw-color-ink));
    border-radius: var(--sw-radius-pill);
    display: block;
    width: 0.18rem;
}

.brand__waveform span:nth-child(1),
.brand__waveform span:nth-child(5) {
    height: 0.75rem;
}

.brand__waveform span:nth-child(2),
.brand__waveform span:nth-child(4) {
    height: 1.35rem;
}

.brand__waveform span:nth-child(3) {
    height: 2rem;
}

.brand__copy {
    color: var(--brand-fg, var(--sw-color-ink));
    display: grid;
    line-height: 1.05;
}

.brand__copy strong {
    font-size: var(--sw-text-base);
    letter-spacing: 0.02em;
}

.brand__copy span {
    color: var(--brand-muted, var(--sw-color-smoke));
    font-size: var(--sw-text-xs);
    letter-spacing: 0.18em;
    margin-top: 0.25rem;
    text-transform: uppercase;
}