/* ==========================================================================
   PINPOINT SAAS PLATFORM — Brand Design Tokens & Shared Styles
   Source of truth: Employer Admin Suite & Obsidian Minimal Design System
   ========================================================================== */

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

:root {
    /* ── Primary Brand Palette (Admin Theme) ── */
    --brand-indigo:        #4F46E5;  /* Primary Interactive / CTA */
    --brand-indigo-hover:  #3730A3;  /* Active / Hover State */
    --brand-indigo-active: #312E81;
    --brand-indigo-tint:   #EEEEFF;  /* Soft Badges, Active Pills */
    --brand-indigo-ring:   rgba(79, 70, 229, 0.16);
    --brand-indigo-glow:   rgba(79, 70, 229, 0.08);

    /* ── Canvas & Surface Tokens ── */
    --canvas-bg:           #F7F7FB;  /* Clean Enterprise Off-White Canvas */
    --canvas-subtle:       #F1F1F6;  /* Contrast Tinted Sections */
    --surface-card:        #FFFFFF;  /* Pure White Elevated Surface */
    --surface-input:       #FFFFFF;  /* Form Input Background */
    --surface-hover:       #F8FAFC;  /* Interactive Row/Button Hover */
    --surface-active:      #F1F5F9;

    /* ── Hairline Borders ── */
    --border-subtle:       #E9E9F1;  /* Structural Card & Divider Line */
    --border-input:        #D8DAE5;  /* Form Control Border */
    --border-input-focus:  #4F46E5;  /* Focused Control Border */
    --border-dark:         #1E2235;

    /* ── Ink & Typography Hierarchy ── */
    --ink-primary:         #0F1020;  /* Main Headings & Body Ink */
    --ink-secondary:       #444659;  /* Secondary Labels & Details */
    --ink-muted:           #6A6C80;  /* Meta Information & Muted Notes */
    --ink-subtle:          #94A3B8;  /* Icons & Placeholders */
    --ink-inverse:         #FFFFFF;  /* Inverted Ink for Dark/Primary Fills */

    /* ── Functional Status Accents ── */
    --status-success:      #059669;
    --status-success-bg:   #ECFDF5;
    --status-success-line: #A7F3D0;

    --status-danger:       #DC2626;
    --status-danger-bg:    #FEF2F2;
    --status-danger-line:  #FECACA;

    --status-warning:      #D97706;
    --status-warning-bg:   #FFFBEB;
    --status-warning-line: #FDE68A;

    --status-info:         #2563EB;
    --status-info-bg:      #EFF6FF;
    --status-info-line:    #BFDBFE;

    /* ── Typography Stack ── */
    --font-sans:           'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display:        'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ── Geometric Radii ── */
    --radius-xs:           4px;
    --radius-sm:           8px;
    --radius-md:           12px;
    --radius-lg:           16px;
    --radius-xl:           24px;
    --radius-pill:         9999px;

    /* ── Elevation & Shadows ── */
    --shadow-flat:         0 1px 2px rgba(15, 16, 32, 0.04);
    --shadow-card:         0 1px 3px rgba(15, 16, 32, 0.04), 0 10px 24px -6px rgba(15, 16, 32, 0.05);
    --shadow-floating:     0 20px 48px -12px rgba(15, 16, 32, 0.10);
    --shadow-focus:        0 0 0 3.5px var(--brand-indigo-ring);

    /* ── Motion & Transitions ── */
    --transition-fast:     150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base:     220ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth:   300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Generic Utility Classes ── */
.brand-bg-canvas { background-color: var(--canvas-bg); }
.brand-surface-card {
    background-color: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* ── Common Typography ── */
.brand-text-ink { color: var(--ink-primary); }
.brand-text-secondary { color: var(--ink-secondary); }
.brand-text-muted { color: var(--ink-muted); }

/* ── Primary Action Button ── */
.btn-brand-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    background-color: var(--brand-indigo);
    color: var(--ink-inverse);
    padding: 11px 20px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2);
}

.btn-brand-primary:hover {
    background-color: var(--brand-indigo-hover);
    transform: translateY(-0.5px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    color: var(--ink-inverse);
}

.btn-brand-primary:active {
    background-color: var(--brand-indigo-active);
    transform: translateY(0);
}

.btn-brand-primary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn-brand-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── Secondary Outlined Button ── */
.btn-brand-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    background-color: var(--surface-card);
    color: var(--ink-primary);
    padding: 11px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn-brand-secondary:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-input);
    color: var(--ink-primary);
    transform: translateY(-0.5px);
}

.btn-brand-secondary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ── Standard Input Field ── */
.input-brand {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-primary);
    background-color: var(--surface-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.input-brand::placeholder {
    color: var(--ink-muted);
    opacity: 0.75;
}

.input-brand:focus {
    border-color: var(--border-input-focus);
    box-shadow: var(--shadow-focus);
}

/* ── Soft Status Badges ── */
.badge-brand-indigo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--brand-indigo-tint);
    color: var(--brand-indigo);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(79, 70, 229, 0.12);
}

.alert-brand-danger {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--status-danger-bg);
    border: 1px solid var(--status-danger-line);
    color: var(--status-danger);
    font-size: 13px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    font-weight: 500;
}

/* ── Inline SVG Icon System (Phosphor-compatible, replaces Bootstrap Icons) ── */
.pp-icon {
    display: inline-block;
    vertical-align: -0.125em;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}