/*
 * Tidewell admin — design tokens.
 * Colours are CSS variables so a colour mode is one attribute on <html>
 * (data-mode="raspberry" | "night-coral" | "night-mint"). The values match the
 * Figma file's Color collection, mode for mode.
 */
@import 'tailwindcss';
@import '@fontsource/sora/300.css';
@import '@fontsource/sora/400.css';
@import '@fontsource/sora/600.css';
@import '@fontsource/sora/700.css';
@import '@fontsource/sora/800.css';
@import '@fontsource/spline-sans-mono/500.css';
@import '@fontsource/spline-sans-mono/600.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

:root {
    --tw-canvas: #ffffff;
    --tw-sunken: #f4f5f9;
    --tw-raised: #ffffff;
    --tw-tint: #fff0ec;
    --tw-ink: #10172a;
    --tw-ink-raised: #1c2540;
    --tw-brand: #0047FF;
    --tw-brand-soft: #aedbff;
    --tw-brand-on: #10172a;
    --tw-figure: #8178ff;
    --tw-text: #10172a;
    --tw-muted: #4a5366;
    --tw-subtle: #5b6477;
    --tw-link: #c2331f;
    --tw-on-ink: #ffffff;
    --tw-on-ink-muted: #b8c0d4;
    --tw-ok: #00ac58;
    --tw-ok-soft: #e2f6ee;
    --tw-alert: #b42318;
    --tw-alert-soft: #fde7e4;
    --tw-line: #e3e6ee;
    --tw-line-strong: #8a93a6;
}

[data-mode='raspberry'] {
    --tw-tint: #fdebf3;
    --tw-brand: #e8458b;
    --tw-brand-soft: #fbd3e4;
    --tw-figure: #f37fb0;
    --tw-link: #b11d5f;
    --tw-sunken: #f5f4fa;
    --tw-line: #e6e3ee;
}

[data-mode='night-coral'],
[data-mode='night-mint'] {
    --tw-canvas: #0b1120;
    --tw-sunken: #070b16;
    --tw-raised: #141c30;
    --tw-tint: #1d1a2c;
    --tw-ink: #141c30;
    --tw-ink-raised: #1f2944;
    --tw-brand-soft: #3a2230;
    --tw-text: #f3f5fa;
    --tw-muted: #aab3c8;
    --tw-subtle: #98a2b8;
    --tw-link: #ff8a78;
    --tw-ok: #4ad7a0;
    --tw-ok-soft: #0f2a22;
    --tw-alert: #ff8577;
    --tw-alert-soft: #34161a;
    --tw-line: #232c44;
    --tw-line-strong: #5a6480;
}

[data-mode='night-mint'] {
    --tw-tint: #10261f;
    --tw-brand: #3dd6a3;
    --tw-brand-soft: #123a2e;
    --tw-brand-on: #07241b;
    --tw-figure: #5fe0b4;
    --tw-link: #5fe0b4;
}

@theme inline {
    --font-sans: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Spline Sans Mono', ui-monospace, monospace;

    --color-canvas: var(--tw-canvas);
    --color-sunken: var(--tw-sunken);
    --color-raised: var(--tw-raised);
    --color-tint: var(--tw-tint);
    --color-ink: var(--tw-ink);
    --color-ink-raised: var(--tw-ink-raised);
    --color-brand: var(--tw-brand);
    --color-brand-soft: var(--tw-brand-soft);
    --color-brand-on: var(--tw-brand-on);
    --color-figure: var(--tw-figure);
    --color-text: var(--tw-text);
    --color-muted: var(--tw-muted);
    --color-subtle: var(--tw-subtle);
    --color-link: var(--tw-link);
    --color-on-ink: var(--tw-on-ink);
    --color-on-ink-muted: var(--tw-on-ink-muted);
    --color-ok: var(--tw-ok);
    --color-ok-soft: var(--tw-ok-soft);
    --color-alert: var(--tw-alert);
    --color-alert-soft: var(--tw-alert-soft);
    --color-line: var(--tw-line);
    --color-line-strong: var(--tw-line-strong);
}

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
    }

    body {
        @apply bg-sunken font-sans text-text;
    }

    /* Headings tighten as they grow; no italics anywhere in the product. */
    h1,
    h2,
    h3 {
        letter-spacing: -0.03em;
    }

    em,
    i {
        font-style: normal;
    }

    :focus-visible {
        outline: 2px solid var(--tw-brand);
        outline-offset: 2px;
    }
}

@layer components {

    /* Numbers — times, minutes, money, codes — are always mono. */
    .figure {
        @apply font-mono tabular-nums;
        letter-spacing: -0.02em;
    }

    .card {
        @apply rounded-3xl border border-line bg-raised;
    }

    .kicker {
        @apply font-mono text-xs font-medium uppercase tracking-[0.06em] text-link;
    }
}