@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Variable.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Italic-Variable.woff2") format("woff2");
}

:root {
    color-scheme: light;

    /* Typography */
    --ca-font-family-sans: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --ca-font-size-sm: .875rem;
    --ca-font-size-base: 1rem;
    --ca-font-size-lg: 1.125rem;
    --ca-font-size-xl: 1.25rem;
    --ca-font-size-2xl: 1.5rem;
    --ca-font-size-3xl: 2rem;
    --ca-font-size-display: clamp(2.7rem, 6vw, 5.4rem);
    --ca-font-weight-regular: 400;
    --ca-font-weight-medium: 500;
    --ca-font-weight-semibold: 600;
    --ca-font-weight-bold: 700;
    --ca-font-weight-extrabold: 800;

    /* Brand */
    --ca-brand-navy: #173f73;
    --ca-brand-teal: #2c8d8f;
    --ca-brand-child: #f2b544;
    --ca-brand-ink: #17324d;
    --ca-brand-slate: #526579;

    /* Navy */
    --ca-navy-50: #f2f6fa;
    --ca-navy-100: #e2eaf3;
    --ca-navy-200: #c1d2e4;
    --ca-navy-300: #92b1cf;
    --ca-navy-400: #5f8eb8;
    --ca-navy-500: #376d9e;
    --ca-navy-600: #245581;
    --ca-navy-700: #173f73;
    --ca-navy-800: #12345f;
    --ca-navy-900: #0d2747;
    --ca-navy-950: #07182d;

    /* Teal */
    --ca-teal-50: #f1f9f9;
    --ca-teal-100: #d9eeee;
    --ca-teal-200: #b3ddde;
    --ca-teal-300: #7fc4c6;
    --ca-teal-400: #4aa7a9;
    --ca-teal-500: #2c8d8f;
    --ca-teal-600: #247779;
    --ca-teal-700: #1f6264;
    --ca-teal-800: #194e50;
    --ca-teal-900: #123b3c;
    --ca-teal-950: #092426;

    /* Child Gold */
    --ca-child-50: #fff9eb;
    --ca-child-100: #fff0c9;
    --ca-child-200: #ffdf8f;
    --ca-child-300: #f8c85b;
    --ca-child-400: #f2b544;
    --ca-child-500: #d99a20;
    --ca-child-600: #b8790e;
    --ca-child-700: #925a08;
    --ca-child-800: #704306;
    --ca-child-900: #503003;
    --ca-child-950: #2e1b01;

    /* Neutral */
    --ca-neutral-0: #ffffff;
    --ca-neutral-50: #f7f9fb;
    --ca-neutral-100: #eef2f5;
    --ca-neutral-200: #d8e1e8;
    --ca-neutral-300: #bbc8d2;
    --ca-neutral-400: #8a9ba8;
    --ca-neutral-500: #697c8b;
    --ca-neutral-600: #526579;
    --ca-neutral-700: #3d4f60;
    --ca-neutral-800: #293b4d;
    --ca-neutral-900: #17324d;
    --ca-neutral-950: #0b1d2d;

    /* Semantic surfaces and content */
    --ca-color-canvas: var(--ca-neutral-50);
    --ca-color-surface: var(--ca-neutral-0);
    --ca-color-surface-subtle: var(--ca-neutral-100);
    --ca-color-text-primary: var(--ca-neutral-900);
    --ca-color-text-secondary: var(--ca-neutral-600);
    --ca-color-text-disabled: var(--ca-neutral-400);
    --ca-color-border: var(--ca-neutral-200);
    --ca-color-border-strong: var(--ca-neutral-300);

    /* Semantic actions */
    --ca-color-action-primary: var(--ca-navy-700);
    --ca-color-action-primary-hover: var(--ca-navy-800);
    --ca-color-action-primary-pressed: var(--ca-navy-900);
    --ca-color-action-on-primary: var(--ca-neutral-0);
    --ca-color-action-secondary: var(--ca-teal-700);
    --ca-color-action-secondary-hover: var(--ca-teal-800);
    --ca-color-focus: var(--ca-teal-600);
    --ca-color-focus-rgb: 36, 119, 121;

    /* Child identity */
    --ca-color-child: var(--ca-child-400);
    --ca-color-child-subtle: var(--ca-child-100);
    --ca-color-child-on-accent: var(--ca-neutral-900);

    /* Status */
    --ca-color-success: #237a57;
    --ca-color-success-subtle: #e7f5ee;
    --ca-color-info: var(--ca-navy-600);
    --ca-color-info-subtle: var(--ca-navy-100);
    --ca-color-warning: #8a4b08;
    --ca-color-warning-subtle: #fff3e0;
    --ca-color-danger: #b4232e;
    --ca-color-danger-subtle: #fcebed;

    /* Spacing */
    --ca-spacing-xs: .25rem;
    --ca-spacing-sm: .5rem;
    --ca-spacing-md: 1rem;
    --ca-spacing-lg: 1.5rem;
    --ca-spacing-xl: 2rem;
    --ca-spacing-2xl: 3rem;
    --ca-spacing-3xl: 4.5rem;
    --ca-spacing-4xl: 6rem;

    /* Shape and elevation */
    --ca-radius-sm: .25rem;
    --ca-radius-md: .375rem;
    --ca-radius-lg: .5rem;
    --ca-radius-xl: .875rem;
    --ca-radius-2xl: 1.25rem;
    --ca-radius-pill: 999px;
    --ca-shadow-sm: 0 .125rem .25rem rgba(11, 29, 45, .075);
    --ca-shadow-md: 0 1.25rem 3rem rgba(11, 29, 45, .1);
    --ca-shadow-lg: 0 2rem 5rem rgba(11, 29, 45, .14);

    /* Motion and stacking */
    --ca-duration-fast: 150ms;
    --ca-z-navigation: 1000;

    /* Bootstrap integration */
    --bs-primary: var(--ca-color-action-primary);
    --bs-primary-rgb: 23, 63, 115;
    --bs-secondary: var(--ca-color-action-secondary);
    --bs-secondary-rgb: 31, 98, 100;
    --bs-success: var(--ca-color-success);
    --bs-info: var(--ca-color-info);
    --bs-warning: var(--ca-color-warning);
    --bs-danger: var(--ca-color-danger);
    --bs-light: var(--ca-neutral-50);
    --bs-dark: var(--ca-neutral-900);
    --bs-body-color: var(--ca-color-text-primary);
    --bs-body-bg: var(--ca-color-canvas);
    --bs-border-color: var(--ca-color-border);
    --bs-tertiary-bg: var(--ca-color-surface-subtle);
    --bs-link-color: var(--ca-navy-600);
    --bs-link-hover-color: var(--ca-navy-800);
    --bs-body-font-family: var(--ca-font-family-sans);
}