/* ==========================================================================
   Fey — tokens, reset and the type scale.
   --------------------------------------------------------------------------
   The half of the design system that is not tied to any one app: the custom
   properties every colour and spacing decision reads from, the reset, the page
   atmosphere, the focus ring, the type classes and the layout helpers.

   It lives here rather than in Fey.Web because there is more than one Fey app
   now, and a second copy of a token file is how two products that are supposed
   to look like one thing start drifting — slowly, and always in the details
   nobody diffs.

   What stayed behind in Fey.Web is its shell: the rail, the nav, the language
   picker. Those are that app's furniture, not the system.
   ========================================================================== */

:root {
    /* ── Brand ── */
    --fey-primary:        #8B7EC8;
    --fey-primary-deep:   #6B5CA5;
    --fey-primary-soft:   rgba(139, 126, 200, 0.07);
    --fey-primary-tint:   rgba(139, 126, 200, 0.14);
    --fey-accent:         #C490D1;

    /* ── Surfaces ── */
    --fey-paper:          #F8F7FC;
    --fey-surface:        #FFFFFF;
    --fey-surface-sunken: #FBFAFE;
    --fey-veil:           rgba(45, 42, 62, 0.32);

    /* ── Ink ── */
    --fey-ink:            #2D2A3E;
    --fey-ink-soft:       #6E6982;
    --fey-ink-faint:      #A5A0B5;

    /* ── Lines ──
       Two weights only. The hairline is what most surfaces use; the second is
       for a border that has to be noticed (focus, selection, hover). */
    --fey-line:           rgba(139, 126, 200, 0.13);
    --fey-line-strong:    rgba(139, 126, 200, 0.30);

    /* ── Signal ── */
    --fey-green:          #4FB98A;
    --fey-green-soft:     rgba(79, 185, 138, 0.10);
    --fey-amber:          #D99248;
    --fey-amber-soft:     rgba(217, 146, 72, 0.10);
    --fey-red:            #D45F5F;
    --fey-red-soft:       rgba(212, 95, 95, 0.10);
    --fey-blue:           #5B93DD;
    --fey-blue-soft:      rgba(91, 147, 221, 0.10);

    /* ── Type ── */
    --fey-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --fey-sans:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fey-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ── Rhythm ──
       A 4px base. Every gap and pad in the app resolves to one of these, which
       is most of what keeps a dense screen from looking accidental. */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    --fey-radius:    12px;
    --fey-radius-sm: 8px;
    --fey-radius-lg: 18px;

    /* ── Depth ──
       Shadows stay in the brand hue rather than neutral grey. A lavender
       shadow on lavender-tinted paper reads as depth; a grey one reads as dirt. */
    --fey-lift:   0 1px 2px rgba(93, 82, 138, 0.04), 0 4px 16px rgba(93, 82, 138, 0.05);
    --fey-lift-lg: 0 2px 6px rgba(93, 82, 138, 0.06), 0 18px 48px rgba(93, 82, 138, 0.10);
    --fey-ring:   0 0 0 3px var(--fey-primary-tint);

    --fey-ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --fey-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */

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

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    font-family: var(--fey-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--fey-ink);
    background: var(--fey-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

/* The atmosphere: two very soft pools of brand light, plus a grain that keeps
   large flat areas from banding on wide-gamut displays. Fixed and inert, so it
   costs nothing but the paint. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 12% -5%,  rgba(139, 126, 200, 0.10), transparent 60%),
        radial-gradient(ellipse 70% 50% at 95% 105%, rgba(196, 144, 209, 0.08), transparent 60%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Everything the app renders sits above the atmosphere. */
#app, .fey-shell, .fey-auth { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}

a { color: var(--fey-primary-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* One focus treatment everywhere. A soft ring in the brand hue reads as part of
   the design rather than as the browser's default apology. */
:focus-visible {
    outline: none;
    box-shadow: var(--fey-ring);
    border-radius: var(--fey-radius-sm);
}

::selection { background: var(--fey-primary-tint); color: var(--fey-ink); }

/* ── Typography ── */

.fey-display {
    font-family: var(--fey-display);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--fey-ink);
}

h1.fey-display { font-size: 34px; }
h2.fey-display { font-size: 26px; }
h3.fey-display { font-size: 20px; }

/* A label is the smallest thing on screen, so it gets the most help: uppercase,
   wide tracking, and enough weight to survive at 10px. */
.fey-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fey-ink-faint);
}

.fey-mono { font-family: var(--fey-mono); font-size: 12px; letter-spacing: -0.01em; }

.fey-muted { color: var(--fey-ink-soft); }
.fey-faint { color: var(--fey-ink-faint); }

/* Figures that carry the point of a panel — a price, a capacity, a count. The
   serif at a large size is what makes a number feel considered. */
.fey-figure {
    font-family: var(--fey-display);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.fey-figure-sm { font-size: 21px; }

/* ── Entrance ──
   One orchestrated reveal on load, staggered down the page. Cheaper and calmer
   than animating every element on every interaction. */
@keyframes fey-rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}

.fey-rise { animation: fey-rise 0.5s var(--fey-ease) both; }
.fey-rise-1 { animation-delay: 0.04s; }
.fey-rise-2 { animation-delay: 0.09s; }
.fey-rise-3 { animation-delay: 0.15s; }
.fey-rise-4 { animation-delay: 0.22s; }

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

/* ── Grid helpers ── */

.fey-stack   { display: flex; flex-direction: column; gap: var(--s4); }
.fey-stack-sm { display: flex; flex-direction: column; gap: var(--s2); }
.fey-row     { display: flex; align-items: center; gap: var(--s3); }
.fey-row-tight { display: flex; align-items: center; gap: var(--s2); }
.fey-spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.fey-grid    { display: grid; gap: var(--s4); }
.fey-grid-2  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fey-grid-3  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fey-wrap    { flex-wrap: wrap; }
.fey-grow    { flex: 1; min-width: 0; }