/* Design tokens of the RicreativoB intranet design system (from docs/design, built on the custom Bootstrap).
   Components and pages use these variables, never raw values. */

:root {
    /* Palette */
    --navy-900: #172b4d;
    --navy-700: #344767;
    --navy-500: #61718c;
    --slate-500: #8392ab;
    --slate-300: #b8c2d1;
    --surface-pill: #d3dbe7;
    --surface-body: #f8f9fb;
    --white: #ffffff;
    --dark-900: #212329;
    --teal-500: #2dcec1;
    --purple-500: #6f68e4;
    --indigo-500: #5e72e4;
    --orange-400: #fba440;
    --orange-600: #fd7e14;
    --red-500: #f5593c;
    --cyan-500: #11cdef;
    --blue-500: #3679c1;

    /* Semantic colors */
    --text-heading: var(--navy-700);
    --text-body: var(--navy-700);
    --text-muted: var(--slate-500);
    --text-inverse: var(--white);
    --surface-card: var(--white);
    --surface-app: var(--navy-700);
    --surface-page: var(--surface-body);
    --surface-muted: var(--surface-pill);
    --border-subtle: #e9ecf3;
    --brand-teal: var(--teal-500);
    --brand-purple: var(--purple-500);
    --brand-orange: var(--orange-400);
    --brand-red: var(--red-500);
    --link: var(--blue-500);
    --link-hover: var(--indigo-500);

    /* Typography */
    --font-sans: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --fs-display: 2.25rem;
    --fs-h1: 1.5rem;
    --fs-h2: 1.25rem;
    --fs-stat: 1.75rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.8125rem;
    --fs-label: 0.75rem;
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --ls-label: 0.06em;

    /* Spacing, radii, shadows */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow-card: 0 4px 18px rgba(52, 71, 103, 0.08);
    --shadow-pop: 0 8px 26px rgba(52, 71, 103, 0.14);
}
