/* Brand tokens extracted from https://collabsphereplatform.com/ (Astra / WordPress).
   Faza 1: role colors expanded into ramps, spacing/radius/elevation scales added.
   Every value below either already existed in the codebase or fills a gap in a
   ramp built around one that did — no new brand colors were introduced. */

:root {
    /* ---------- Type ---------- */
    --cs-font-body: "Karla", Helvetica, Arial, sans-serif;
    --cs-font-heading: "Rubik", Helvetica, Arial, sans-serif;
    --cs-font-size-body: 17px;
    --cs-line-height-body: 1.65;
    --cs-font-weight-body: 400;
    --cs-font-weight-heading: 600;
    --cs-font-weight-button: 500;

    --cs-text-display: 40px;
    --cs-text-h1: 28px;
    --cs-text-h2: 22px;
    --cs-text-h3: 18px;
    --cs-text-body: 17px;
    --cs-text-small: 14px;
    --cs-text-micro: 12px;

    /* ---------- Neutral ramp (slate) ---------- */
    --cs-color-neutral-50: #f8fafc;
    --cs-color-neutral-100: #f1f5f9;
    --cs-color-neutral-200: #e2e8f0;
    --cs-color-neutral-300: #cbd5e1;
    --cs-color-neutral-400: #94a3b8;
    --cs-color-neutral-500: #64748b;
    --cs-color-neutral-600: #475569;
    --cs-color-neutral-700: #334155;
    --cs-color-neutral-800: #1e293b;
    --cs-color-neutral-900: #0f172a;

    /* ---------- Primary ramp (brand #046bd2 = step 500) ---------- */
    --cs-color-primary-50: #eff6ff;
    --cs-color-primary-100: #dbeafe;
    --cs-color-primary-200: #bfdbfe;
    --cs-color-primary-300: #93c5fd;
    --cs-color-primary-400: #3b82f6;
    --cs-color-primary-500: #046bd2;
    --cs-color-primary-600: #045cb4;
    --cs-color-primary-700: #034a91;
    --cs-color-primary-800: #023a72;
    --cs-color-primary-900: #002d52;

    /* ---------- Status roles: tint / base / text-on-tint ---------- */
    --cs-color-success-50: #e8f7ef;
    --cs-color-success-200: #bfe8d0;
    --cs-color-success-500: #198754;
    --cs-color-success-700: #1f6b45;

    --cs-color-warning-50: #fff8e6;
    --cs-color-warning-200: #fde3a7;
    --cs-color-warning-500: #d97706;
    --cs-color-warning-700: #92400e;

    --cs-color-danger-50: #fef2f2;
    --cs-color-danger-200: #fecaca;
    --cs-color-danger-500: #dc3545;
    --cs-color-danger-700: #b02a37;

    /* ---------- Semantic aliases (what views should reference) ---------- */
    --cs-color-primary: var(--cs-color-primary-500);
    --cs-color-primary-hover: var(--cs-color-primary-600);
    --cs-color-primary-rgb: 4, 107, 210;
    --cs-color-heading: var(--cs-color-neutral-800);
    --cs-color-body: var(--cs-color-neutral-700);
    --cs-color-muted: var(--cs-color-neutral-500);
    --cs-color-page: #ffffff;
    --cs-color-surface: #f0f5fa;
    --cs-color-ink: var(--cs-color-neutral-900);
    --cs-color-border: var(--cs-color-neutral-200);
    --cs-color-border-strong: var(--cs-color-neutral-300);
    --cs-color-footer: var(--cs-color-primary-900);
    --cs-color-on-dark: #ffffff;
    --cs-color-on-dark-muted: #c8d6e5;
    --cs-color-selection: var(--cs-color-primary-500);
    --cs-color-active-soft: var(--cs-color-primary-50);

    /* ---------- Spacing (4px base) ---------- */
    --cs-space-1: 4px;
    --cs-space-2: 8px;
    --cs-space-3: 12px;
    --cs-space-4: 16px;
    --cs-space-6: 24px;
    --cs-space-8: 32px;
    --cs-space-12: 48px;
    --cs-space-16: 64px;

    /* ---------- Radius: three values, not six ---------- */
    --cs-radius-control: 6px;
    --cs-radius-card: 10px;
    --cs-radius-pill: 999px;
    --cs-button-radius: var(--cs-radius-pill);

    /* ---------- Elevation: two levels + focus ring ---------- */
    --cs-shadow-rest: 0 1px 2px rgba(15, 23, 42, 0.04);
    --cs-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08);
    --cs-focus-ring: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem rgba(var(--cs-color-primary-rgb), 0.45);
}

body {
    font-family: var(--cs-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cs-font-heading);
    font-weight: var(--cs-font-weight-heading);
    color: var(--cs-color-heading);
}

/* Fixed type scale — decouples heading level from Bootstrap's .h3/.h5/.h6 hacks. */
.cs-app h1 { font-size: var(--cs-text-h1); line-height: 1.25; }
.cs-app h2 { font-size: var(--cs-text-h2); line-height: 1.3; }
.cs-app h3 { font-size: var(--cs-text-h3); line-height: 1.35; }
.cs-display { font-family: var(--cs-font-heading); font-size: var(--cs-text-display); line-height: 1.1; color: var(--cs-color-heading); }

:focus-visible {
    outline: 2px solid var(--cs-color-primary);
    outline-offset: 2px;
}

::selection {
    background: var(--cs-color-selection);
    color: var(--cs-color-on-dark);
}