/*
 * ═══════════════════════════════════════════════════════════
 *  1confirmed — design tokens
 * ═══════════════════════════════════════════════════════════
 *
 * Every colour, type, space, radius, shadow, duration and z-level the product
 * uses, and the only place any of them is written down.
 *
 * Cut out of portal.css so the portal is not the only surface that can have
 * them: the public landing page is built from the same tokens, and a marketing
 * page that quietly drifts half a shade off the product it is selling is worse
 * than one that looks plainer.
 *
 * Linked as its own file rather than @import-ed from the sheets that use it.
 * These are hand-written files in public/ with no fingerprint, so each one is
 * stamped with its own last-modified time by App\Support\PortalAsset — and an
 * @import inside a stamped file carries no stamp of its own, which is exactly
 * how a cached token file outlives the sheet that was edited to match it.
 *
 * Rule, unchanged: no raw colour anywhere in any sheet. If a value is missing,
 * name it here first, then reference it. A hex tucked into a hover state is how
 * a system quietly becomes a freestyle.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1confirmed client portal — cloned from the 1leado client portal
   (resources/css/client.css) and recoloured to the 1confirmed brand.

   The composition, components and type are 1leado's; only the palette
   anchors moved: indigo accent → brand green (hue 169.3), warm pink →
   brand orange (hue 49.2), warm paper → the cool #F3F8FE paper.

   Plain CSS — the Tailwind-4 @theme/@source machinery was converted so
   this file needs no build step. Served from public/portal/.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: custom (1leado identity)
 * vibe: "the landing page, signed in" — pill controls, 14–20px cards, one
 *       soft hero shadow, accent-indigo primary, dot-led uppercase eyebrows,
 *       all lifted from resources/css/theme.css + the marketing components
 * paper oklch(97.7% 0.0096 252.8) warm · accent oklch(49.9% 0.1270 169.3) cool-indigo
 * display Space Grotesk · body DM Sans · accent Instrument Serif (roman, empty states only)
 * axes: paper-band=light · display-style=grotesk-sans · accent-hue=cool
 * nav: N3 side-rail (side=left, width=252px, indicator=filled-bar) · footer: Ft2 inline single line
 * enrichment: none — drawn schematics, no chrome · motion: stage-pulse · hover-shift · one-shot entrance
 * contrast: pass (40–41, measured) · slop: pass (42–45) · honest: pass (46, sample-data marker)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30, Lucide only)
 * mobile: pass (34, 49, 50–57 — verified at 375px, no horizontal scroll)
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Space+Grotesk:wght@500;600;700&family=Instrument+Serif&display=swap');

/* ── Preflight ──────────────────────────────────────────────────────────
   The source stylesheet sat on Tailwind's preflight. That import is gone
   (this file is plain CSS), so the handful of resets the cloned rules
   actually depend on are restated here. */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; vertical-align: middle; }
a { color: inherit; text-decoration: inherit; }
button { font: inherit; color: inherit; background: none; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 600; }


/*
|--------------------------------------------------------------------------
| Client portal — design tokens
|--------------------------------------------------------------------------
|
| Every value below is the 1leado brand identity from theme.css, converted
| to OKLCH so tints and states can be derived by moving lightness alone
| instead of guessing new hexes. The five anchors are exact conversions of
| the brand colours, not approximations:
|
|   paper  #faf9f6 · ink #171a21 · accent #3653c9 · muted #74698c · pink #ca7290
|
| Rule: no raw colour anywhere below this block. If a value is missing,
| name it here first, then reference it. A hex tucked into a hover state is
| how a system quietly becomes a freestyle.
|
*/

:root {
    /* ── Type: two voices, plus one flourish ─────────────────
       display : figures, headings, the rail. Grotesk — technical, a
                 little engineered. Carries tabular figures, which is why
                 every number in the portal is set in it.
       sans    : body copy, labels, controls. The default voice.
       accent  : the brand's one flourish. Roman, never italic (italic
                 headers are the most reliable generated-UI tell), and
                 only ever in empty states — the one place the portal
                 speaks instead of reporting. */
    --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-accent: 'Instrument Serif', Georgia, serif;
    --font-body: var(--font-sans);
    --font-outlier: var(--font-accent);

    /* ── Paper and ink ───────────────────────────────────────
       Warm paper, never #fff. The warmth is the brand; a pure-white
       portal would read as a different product from the marketing site. */
    --color-paper: oklch(97.7% 0.0096 252.8);
    --color-paper-raised: oklch(100% 0.0000 89.9);
    --color-paper-sunken: oklch(96.2% 0.0080 253.0);
    --color-paper-tint: oklch(96.8% 0.0250 169.3);

    /* One shared placeholder plane for template media. It resolves from the
       active database palette, so image, video, document and carousel previews
       stay visually identical on every portal screen. */
    --background-media-preview:
        linear-gradient(135deg,
            var(--color-accent-wash) 0%,
            var(--color-paper-sunken) 55%,
            var(--color-warm-wash) 100%);

    --color-ink: oklch(24.0% 0.0201 267.8);
    --color-ink-soft: oklch(38.0% 0.0200 262.0);
    --color-muted: oklch(52.4% 0.0306 257.1);
    /*
     * 2.79:1 on white — below the 4.5:1 floor for text and the 3:1 floor for
     * a meaningful UI boundary. It is therefore a NON-TEXT token: scrollbar
     * thumbs, and metadata set on the ink surface (6.23:1 there). Anything
     * readable on paper uses --color-muted, which clears 4.82:1.
     */
    --color-muted-soft: oklch(69.0% 0.0300 257.0);

    /* Text colour for anything sitting on an accent or ink fill. */
    --color-accent-ink: oklch(97.7% 0.0096 252.8);

    /* Overlay + elevation. Named here so no rule below inlines a colour. */
    --color-scrim: oklch(24.0% 0.0201 267.8 / 0.35);
    --shadow-sheet: 0 0 0 1px oklch(24.0% 0.0201 267.8 / 0.06);

    /* ── Rules — the lavender hairlines ──────────────────────
       Three weights: the everyday hairline, a softer one for row
       dividers, and a heavier track used by the schematic only. */
    --color-rule: oklch(90.7% 0.0150 257.0);
    --color-rule-soft: oklch(93.5% 0.0110 256.7);
    --color-rule-track: oklch(87.0% 0.0150 257.0);
    /*
     * The border of a control that has nothing else to mark its edge — the
     * file drop zone, the select. Those three above are decorative hairlines
     * at 1.23–1.39:1 and would fail as the only boundary of an interactive
     * element, so this one is measured against the 3:1 floor for UI: 3.15:1
     * on paper.
     *
     * It was referenced twice before it existed, which CSS answers by
     * discarding the declaration and letting `border` fall back to
     * currentColor — the drop zone was drawing its dashed edge in the text
     * colour.
     */
    --color-rule-control: oklch(64.0% 0.0240 257.0);

    /* ── Accent — periwinkle indigo, the one signal ──────────
       Budgeted at ≤3% of any viewport: the active rail item, the
       running stage, focus rings, one primary control per screen. */
    --color-accent: oklch(49.9% 0.1270 169.3);
    --color-accent-hover: oklch(45.0% 0.1200 169.3);
    --color-accent-wash: oklch(96.8% 0.0250 169.3);
    --color-accent-line: oklch(90.5% 0.0500 169.3);

    /* Hallmark role aliases. Page sheets consume these instead of translating
       the portal palette again. */
    --color-paper-2: var(--color-paper-sunken);
    --color-paper-3: var(--color-rule-soft);
    --color-ink-2: var(--color-ink-soft);
    --color-rule-2: var(--color-rule-control);
    --color-neutral: var(--color-ink-soft);
    --color-focus: var(--color-accent);

    /*
     * OAuth provider marks. These are reserved for the recognisable identity
     * icons on the public sign-in controls — they are not product-status
     * colours and never carry meaning without the provider name beside them.
     */
    --color-provider-google-blue: oklch(55.8% 0.1900 259.0);
    --color-provider-google-green: oklch(58.4% 0.1570 145.0);
    --color-provider-google-yellow: oklch(76.1% 0.1530 85.0);
    --color-provider-google-red: oklch(59.7% 0.2170 27.0);
    --color-provider-google-wash: oklch(97.4% 0.0140 259.0);
    --color-provider-google-line: oklch(85.6% 0.0540 259.0);
    --color-provider-facebook: oklch(54.5% 0.1870 263.0);
    --color-provider-facebook-wash: oklch(97.0% 0.0150 263.0);
    --color-provider-facebook-line: oklch(84.5% 0.0590 263.0);
    --color-provider-linkedin: oklch(49.8% 0.1400 244.0);
    --color-provider-linkedin-wash: oklch(96.8% 0.0150 244.0);
    --color-provider-linkedin-line: oklch(83.4% 0.0470 244.0);
    --color-provider-github: var(--color-ink);
    --color-provider-github-wash: var(--color-paper-sunken);
    --color-provider-github-line: var(--color-rule-control);
    --color-provider-x: var(--color-ink);
    --color-provider-x-wash: var(--color-paper-sunken);
    --color-provider-x-line: var(--color-rule-control);

    /* ── Status — each has ink, wash and line ────────────────
       Never colour alone: every status also carries a glyph or a word.
       Pink is the brand's warm accent, reused here for "replied" so the
       funnel's best news is the one warm note on the page. */
    --color-live: oklch(52.90% 0.1022 157.7);
    --color-live-wash: oklch(97.28% 0.0091 161.4);
    --color-live-line: oklch(91.00% 0.0300 158.0);

    /* 54%, not 58%: amber on its own wash measured 4.03:1 at the lighter
       value, which fails badge-sized text. */
    --color-warn: oklch(54.00% 0.1300 75.0);
    --color-warn-wash: oklch(97.20% 0.0180 82.0);
    --color-warn-line: oklch(90.00% 0.0450 80.0);

    --color-halt: oklch(52.00% 0.1900 25.0);
    --color-halt-wash: oklch(96.80% 0.0160 25.0);
    --color-halt-line: oklch(90.00% 0.0400 25.0);

    /*
     * The brand pink, kept at its exact brand value for fills and for
     * display-sized figures (3.32:1 — clears the 3:1 large-text floor).
     * It measures 2.98:1 on its own wash, so badge-sized text uses the
     * darker -ink step instead. Same hue, same character, legible.
     */
    --color-warm: oklch(72.9% 0.1224 49.2);
    --color-warm-ink: oklch(54.5% 0.1220 49.0);
    --color-warm-wash: oklch(96.6% 0.0200 49.0);
    --color-warm-line: oklch(90.5% 0.0450 49.0);

    /* Brand supporting blue — exact OKLCH conversion of #85A4D0. */

    /*
    | ── Radii — the landing page's curve, not a tighter one ──
    |
    | These were 3/5/8px on the first pass: an "instrument panel" reading
    | that was internally consistent and wrong, because it made the portal
    | look like a different product from the site the client just came from.
    | The landing page rounds hard — rounded-full on every control, 12–20px
    | on every card — so the portal does too. Radius is one of the two or
    | three things a person actually registers as "same brand".
    */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --radius-card: var(--radius-md);
    --radius-input: var(--radius-sm);

    /*
    | ── Elevation — lifted from the landing hero mockup ──────
    |
    | The site's panels sit on one long, very soft, downward shadow
    | (0 20px 60px -20px at 8% ink) rather than on a hairline. Cards lift
    | off the warm paper instead of being drawn onto it.
    */
    --shadow-soft: 0 20px 60px -20px oklch(24.0% 0.0201 267.8 / 0.08);
    --shadow-rest: 0 2px 8px oklch(24.0% 0.0201 267.8 / 0.03);
    --shadow-lift: 0 12px 28px -12px oklch(49.9% 0.1270 169.3 / 0.30);

    /* ── Easing — three curves, never the browser default ──── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /*
    | The fourth curve is a spring, and only for things that arrive under the
    | reader's hand: a menu dropping open, a toast landing, a dialog, a button
    | coming back up after a press. It overshoots by under 4% and settles —
    | enough to feel physical, never enough to wobble.
    |
    | The cubic is the fallback; browsers with linear() get the real spring
    | below, sampled from a damped oscillator (ζ 0.72).
    */
    --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --ease-spring: linear(0, 0.049, 0.165, 0.312, 0.465, 0.607, 0.729, 0.829, 0.906, 0.961, 0.999, 1.022, 1.034, 1.038, 1.037, 1.034, 1.028, 1.022, 1.017, 1.012, 1.008, 1.004, 1);
    }
}

:root {
    /* 4pt scale, named by role. Nothing below types a raw pixel gap. */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* Six named levels. No ad-hoc z-index anywhere. */
    --z-base: 1;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 400;
    --z-toast: 500;
    --z-widget: 2147483000;

    --dur-tick: 100ms;
    --dur-short: 180ms;
    --dur-mid: 260ms;
    --dur-micro: var(--dur-tick);
    --dur-long: 300ms;
    /* A section arriving on load, and the step between two of them. */
    --dur-enter: 560ms;
    --dur-stagger: 70ms;
    /* One page handing over to the next — see components/motion.css. */
    --dur-page: 340ms;

    /* Major-third UI type scale. Commerce is a dense app surface, so the
       display ceiling stays intentionally modest. */
    --text-2xs: 0.7rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;

    --rule-hair: 1px;
    --rule-fine: 2px;
    --size-control-sm: 2.5rem;
    --size-control: 2.75rem;
    --size-hit: 2.75rem;

    --rail-w: 252px;
}