/* Shared design tokens and primitive components for Personalas static pages. */

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

:root {
    color-scheme: light;
    accent-color: var(--accent-primary);

    /* Spin-off Nr. 3 – HR atranka, PA ekosistemos paletė (navy + auksas) */
    --bg: #F7F8FA;
    --white: #FFFFFF;
    --text: #1A202C;
    --text-light: #4A5568;
    --border: #CBD5E0;

    /* Design tokens – premium SaaS (C-level) */
    --r-card: 16px;
    --r-btn: 12px;
    --r-badge: 10px;
    --r-hero: 24px;
    --border-width: 1px;
    --border-subtle: rgba(203, 213, 224, 0.6);
    --border-subtle-dark: rgba(60, 72, 90, 0.15);
    --shadow-soft: 0 2px 8px rgba(60, 72, 90, 0.06), 0 1px 2px rgba(60, 72, 90, 0.04);
    --shadow-medium: 0 4px 16px rgba(60, 72, 90, 0.08), 0 2px 4px rgba(60, 72, 90, 0.04);
    --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
    /* DEPRECATED — REMOVED IN v0.3.1. Use --shadow-soft / --shadow-medium instead. */
    --shadow-card: var(--shadow-soft);
    --shadow-card-hover: var(--shadow-medium);
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;

    /* Motion – C-level (nuoseklus ritmas) */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Tipografija – leading */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* Pagrindinis akcentas – PA navy; WCAG2AA 11.5:1 ant balto */
    --accent-primary: #103b5a;
    --accent-primary-hover: #0b1320;
    --accent-gold: #cfa73a;
    --accent-gold-dark: #b8922f;

    /* Antrinis akcentas (tamsiai pilka) – outline mygtukai, body antraštės */
    --accent-dark: #3C485A;
    --accent-dark-hover: #2D3848;

    /* Hero: navy gradientas – PA ekosistemos kalba, autoritetingas SaaS */
    --hero-gradient-start: #0b1320;
    --hero-gradient-mid: #103b5a;
    --hero-gradient-end: #1f5e88;
    --cta-bg: var(--accent-primary);
    --cta-text: #FFFFFF;
    --cta-hover: var(--accent-primary-hover);

    /* Hero pagrindinis CTA – baltas mygtukas, navy tekstas */
    --cta-hero-bg: #FFFFFF;
    --cta-hero-text: #103b5a;
    --cta-hero-hover-bg: #EEF2F7;
    --cta-hero-hover-text: #0b1320;

    /* Prompt Anatomy (motina) – ekosistemos akcentas */
    --brand-prompt-anatomy-dark: #0b1320;
    --brand-prompt-anatomy: #103b5a;
    --brand-prompt-anatomy-accent: #cfa73a;
    --brand-prompt-anatomy-accent-hover: #e8b93c;

    /* Tertiarinė – PA ekosistemos akcentas */
    --tertiary: #2e9e7e;
    --tertiary-dark: #1f6d5c;
    --tertiary-hover: #27856d;
    --tertiary-light: #e8f5f1;

    /* Semantiniai – suderinti su navy + auksu */
    --blue: #3C485A;
    --green: #38A169;
    --green-dark: #2F855A;
    --error: #E53E3E;
    --bg-subtle: #F7FAFC;

    /* =============================================================
     * DEPRECATED ALIASES — REMOVED IN v0.3.1
     * Kept only for backward compatibility with any external HTML
     * still linking assets/styles.css. New uses are blocked by
     * tests/structure.test.js (deprecated alias guard, DS v0.3.0 PR-4).
     *
     * Migration map (v0.2 -> v0.3 -> v0.3.1):
     *   --orange                      -> --accent-primary
     *   --orange-light                -> --surface-3
     *   --blue-light                  -> --surface-2
     *   --community-cta-green         -> --cta-primary-bg
     *   --community-cta-green-hover   -> --cta-primary-bg-hover
     *   --shadow-card                 -> --shadow-soft (declared above)
     *   --shadow-card-hover           -> --shadow-medium (declared above)
     * ============================================================= */
    --blue-light: #E8ECF0;
    --orange: var(--accent-primary);
    --orange-light: #EEF2F7;
    --community-cta-green: var(--accent-primary);
    --community-cta-green-hover: var(--accent-primary-hover);

    /*
     * Tertiarinė – PA ecosystem accent. SCOPED: info/educational asides only
     * (.info-box, .info-icon, .faq-panel border-left). Do NOT use for primary
     * actions or "next steps" — those should be --accent-primary.
     */
    /* (--tertiary* tokens defined above stay; this comment documents scope) */

    /* Lucide ikonų dydžiai – premium SaaS */
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;

    /* Shared page aliases */
    --panel: var(--white);
    --accent: var(--accent-primary);
    --accent-hover: var(--accent-primary-hover);
    --shadow-privacy: var(--shadow-elevated);

    /*
     * v1 additions — semantic surfaces, focus, missing tokens, type scale.
     * Newly-authored CSS should consume these (not the deprecated aliases above).
     */

    /* Semantic surfaces */
    --surface: var(--white);
    --surface-0: var(--bg);          /* page background */
    --surface-1: var(--white);       /* card background */
    --surface-2: var(--bg-subtle);   /* subtle tint */
    --surface-3: #EEF2F7;            /* accented tint (gradient stop) */

    /* Text colors */
    --text-on-accent: #FFFFFF;
    --text-muted: #6B7280;

    /* Focus + CTA tokens (previously undefined → silent sticky-CTA bug) */
    --cta-primary-bg: var(--accent-primary);
    --cta-primary-bg-hover: var(--accent-primary-hover);
    --ring-focus: 3px solid var(--accent-gold);

    /* Radius aliases (existing values kept; new names map to them) */
    --r-pill: 999px;
    --r-sm: 8px;
    --r-md: var(--r-btn);
    --r-lg: var(--r-card);
    --r-xl: 20px;
    --r-2xl: var(--r-hero);

    /* Spacing extensions */
    --space-4: 4px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;

    /* Reusable gradients + CTA shadow (retire one-off literals) */
    --gradient-soft: linear-gradient(180deg, var(--white) 0%, var(--bg-subtle) 100%);
    --gradient-cta-hover: linear-gradient(180deg, #1a4d6e 0%, var(--accent-primary-hover) 100%);
    --shadow-cta: 0 8px 20px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);

    /*
     * Type scale tokens. Declared in v1; existing 60+ raw font-size rules
     * will migrate in a future sweep PR. New code should reference --fs-*.
     */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 28px;
    --fs-4xl: 36px;
    --fs-display: 48px;

    /* v0.2 — semantic + elevation */
    --success: var(--green);
    --surface-overlay: rgba(11, 19, 32, 0.55);
    --shadow-toast: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-sticky: 0 -4px 16px rgba(15, 23, 42, 0.08);

    /* v0.2.3 — Hover lift scale.
     * Rule: primary CTA = --lift-md; secondary / dense / hero = --lift-sm. */
    --lift-sm: -1px;
    --lift-md: -2px;

    /* v0.2.4 — Focus ring on dark surfaces (hero / navy nav).
     * Light surfaces continue to use --ring-focus (gold). */
    --ring-focus-on-dark: 3px solid #FFFFFF;

    /* v0.2.4 — Radius xs (replaces literal 4px in landing.css). */
    --r-xs: 4px;

    /* v0.3.0 — Composable shadow primitives.
     * Rule: rest = soft, hover = medium, press = sunken, hero = elevated.
     * Inset highlight is a separate composable token — append after any base. */
    --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --shadow-inset-hi-strong: inset 0 1px 0 rgba(255, 255, 255, 0.95); /* hero CTA only */
    --shadow-cta-press: 0 1px 2px rgba(11, 19, 32, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-glow-success: 0 4px 12px rgba(16, 59, 90, 0.3), 0 0 0 2px var(--accent-primary);
    --shadow-glow-gold: 0 2px 6px rgba(207, 167, 58, 0.35), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    --shadow-glow-gold-hover: 0 4px 10px rgba(207, 167, 58, 0.4);

    /* v0.3.0 — Named gradients (replace one-off literals across landing.css). */
    --gradient-hero:
        radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 50%),
        linear-gradient(165deg, var(--hero-gradient-start) 0%, var(--hero-gradient-mid) 45%, var(--hero-gradient-end) 100%);
    --gradient-card-tint: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
    --gradient-jump-nav: linear-gradient(180deg, var(--surface-2) 0%, var(--white) 100%);
    --gradient-gold-pearl: linear-gradient(145deg, var(--accent-gold) 0%, var(--accent-gold-dark) 100%);

    /* v0.3.0 — Navy-tinted border ladder (replaces 5+ inline rgba(16, 59, 90, X) literals). */
    --border-navy-soft: rgba(16, 59, 90, 0.14);
    --border-navy: rgba(16, 59, 90, 0.25);
    --border-navy-strong: rgba(16, 59, 90, 0.35);
}


.page-shell {
    width: min(760px, 100%);
    margin: 0 auto;
}

.surface-card {
    background: var(--panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: var(--shadow-privacy);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--r-btn);
    border: none;
    background: var(--cta-bg);
    color: var(--cta-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out), background var(--duration-normal) var(--ease-out);
    box-shadow: var(--shadow-cta);
    outline: none;
}

.btn:focus-visible {
    outline: var(--ring-focus);
    outline-offset: 2px;
}

.btn:hover {
    background: var(--gradient-cta-hover);
    transform: translateY(var(--lift-md));
    box-shadow: var(--shadow-medium), var(--shadow-cta);
}

.btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-cta-press);
}

.btn.btn--ghost {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle-dark);
    color: var(--accent-primary);
    box-shadow: none;
    font-weight: 600;
}

.btn.btn--ghost:hover {
    background: var(--surface-3);
    transform: none;
    box-shadow: none;
}

.btn.btn--ghost:active {
    transform: scale(0.98);
    box-shadow: none;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}