/* ============================================================
   KeyStamp Design System — Colors & Type
   Product: KeyStamp (by Keystone) — email signature management
   Font: Inter. Source: KeyStamp BRD, Style doc, editor prototype.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* ============================================================
       PALETTE — "Luminous Enterprise Blue". Bright, futuristic,
       professional: Electric Azure primary, Signal Cyan accent,
       Sync Emerald success, cool cloud-white surfaces, Ink Slate
       text. (Revised from the powder-blue/beige system.)
       ============================================================ */

    /* ---- Primary: Electric Azure ---- */
    --ks-primary: #2563FF; /* primary action / brand (Electric Azure) */
    --ks-primary-deep: #1D4FD8; /* pressed / text-on-light / deep accent */
    --ks-primary-mid: #3B82F6; /* azure gradient mid */
    --ks-primary-soft: #EAF1FF; /* azure surface / selected */

    /* ---- Cool slate neutrals (replaces beige/sand) ---- */
    --ks-beige: #EEF2F8; /* cool tinted surface */
    --ks-beige-deep: #CBD5E1; /* slate accent / switch track */
    --ks-sand: #F1F5F9; /* soft cool fill */

    /* ---- Bright accent: Signal Cyan (use sparingly) ---- */
    --ks-accent: #22D3EE; /* Signal Cyan */

    /* ---- Legacy aliases (kept so existing component CSS keeps working) ---- */
    --ks-purple: var(--ks-primary);
    --ks-rose: var(--ks-primary-mid);
    --ks-orange: var(--ks-accent);
    --ks-soft-purple: var(--ks-primary-soft);
    --ks-soft-rose: #DBE7FF;
    --ks-soft-orange: var(--ks-beige);
    --ks-deep-purple: var(--ks-primary-deep);
    --ks-near-black: #07111F; /* Midnight Ink */

    /* ---- Surfaces & lines ---- */
    --ks-page: #F8FAFC; /* app background (Cloud White) */
    --ks-soft: #EEF2F8; /* tinted surface (chips, thumbs, table head) */
    --ks-surface: #FFFFFF; /* cards */
    --ks-line: #E2E8F0; /* Frost Gray hairline border */
    --ks-line-cool: #E2E8F0; /* cool hairline for data-dense surfaces */

    /* ---- Text — Ink Slate scale ---- */
    --ks-fg1: #0F172A; /* primary text / headings (Ink Slate) */
    --ks-fg2: #475569; /* secondary text, muted body (Cool Slate) */
    --ks-fg3: #64748B; /* tertiary / placeholder (Soft Slate) */
    --ks-on-brand: #FFFFFF; /* text on blue fills */

    /* ---- Semantic — bright, conventional ---- */
    --ks-success: #10B981;
    --ks-success-bg: #ECFDF5;
    --ks-success-line: #A7F3D0;
    --ks-warning: #F59E0B;
    --ks-warning-bg: #FFFBEB;
    --ks-warning-line: #FDE68A;
    --ks-danger: #EF4444;
    --ks-danger-bg: #FEF2F2;
    --ks-danger-line: #FECACA;

    /* ---- Gradient tokens — futuristic azure/cyan ---- */
    --ks-gradient-strong: linear-gradient(135deg, var(--ks-accent), var(--ks-primary));
    --ks-gradient-soft: linear-gradient(135deg, var(--ks-primary-soft), #E0F7FB);
    --ks-gradient-dark: linear-gradient(135deg, var(--ks-primary-deep), var(--ks-near-black));
    /* Ambient page glow: subtle blue + cyan */
    --ks-page-glow: radial-gradient(circle at 8% 6%, rgba(37, 99, 255, .07), transparent 32%),
    radial-gradient(circle at 94% 16%, rgba(34, 211, 238, .08), transparent 34%);

    /* ---- Radii — tightened for a more standardized, professional feel ---- */
    --ks-r-xs: .35rem; /* tiny chips, swatch wells */
    --ks-r-sm: .5rem; /* small controls */
    --ks-r-md: .625rem; /* buttons, inputs */
    --ks-r-lg: .75rem; /* tiles, table wrap, icon tiles */
    --ks-r-xl: 1rem; /* cards */
    --ks-r-2xl: 1rem; /* editor shells */
    --ks-r-pill: 999px;

    /* ---- Shadows — soft, cool slate ---- */
    --ks-shadow-card: 0 1px 2px rgba(15, 23, 42, .06);
    --ks-shadow-pop: 0 18px 44px rgba(15, 23, 42, .12);
    --ks-shadow-lift: 0 10px 24px rgba(37, 99, 255, .18), 0 0 0 3px rgba(37, 99, 255, .12);

    /* ---- Spacing scale (rem) ---- */
    --ks-space-1: .25rem;
    --ks-space-2: .5rem;
    --ks-space-3: .75rem;
    --ks-space-4: 1rem;
    --ks-space-5: 1.25rem;
    --ks-space-6: 1.5rem;
    --ks-space-8: 2rem;
    --ks-space-12: 3rem;

    /* ---- Type ---- */
    --ks-font: 'Inter', Arial, system-ui, sans-serif;
    --ks-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Motion */
    --ks-ease: cubic-bezier(.2, .7, .3, 1);
    --ks-dur: .2s;
}

/* ============================================================
   Semantic type styles
   Headings are heavy (900) with tight tracking; eyebrows are
   uppercase, wide-tracked, also heavy.
   ============================================================ */
.ks-display {
    font-family: var(--ks-font);
    font-weight: 800;
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--ks-fg1);
}

.ks-h1 {
    font-family: var(--ks-font);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--ks-fg1);
}

.ks-h2 {
    font-family: var(--ks-font);
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ks-fg1);
}

.ks-h3 {
    font-family: var(--ks-font);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ks-fg1);
}

.ks-stat {
    font-family: var(--ks-font);
    font-weight: 800;
    font-size: 1.9rem;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ks-fg1);
}

.ks-eyebrow {
    font-family: var(--ks-font);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ks-fg3);
}

.ks-label {
    font-family: var(--ks-font);
    font-weight: 700;
    font-size: .86rem;
    color: var(--ks-fg1);
}

.ks-body {
    font-family: var(--ks-font);
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--ks-fg2);
}

.ks-small {
    font-family: var(--ks-font);
    font-weight: 600;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ks-fg2);
}

.ks-mono {
    font-family: var(--ks-mono);
    font-size: .78rem;
    color: var(--ks-fg1);
}