/*
 * Sprint Enterprise Technology — design tokens
 *
 * The single source of truth for colour, typography, spacing and radii.
 * Every other stylesheet in this project consumes these custom properties
 * rather than hard-coding values. Override these on :root, on a theme
 * scope (e.g. [data-theme="finio"]), or on a component to retheme.
 *
 * See brand-guidelines.md for the rules that govern their use — most
 * importantly that --sprint-lime is reserved for primary CTAs only.
 */

:root {
    /* ----- Primary palette ----- */
    --sprint-lime: #B1C253;
    --sprint-olive: #758A58;
    --sprint-charcoal: #333333;

    /* ----- Secondary palette: products ----- */
    --sprint-teal: #1F8A8A;       /* Finio */
    --sprint-amber: #F5A623;      /* Fastrak */

    /* ----- Secondary palette: audiences ----- */
    --sprint-blue: #2F5D8C;       /* Investment platforms */
    --sprint-purple: #8661AA;     /* DFMs */
    --sprint-red: #BA5050;        /* Software providers */
    --sprint-forest: #4E6F5D;     /* Advisory firms */

    /* ----- Function palette ----- */
    --sprint-fn-red: #D64545;
    --sprint-fn-yellow: #F2C94C;
    --sprint-fn-green: #28AE60;

    /* ----- Neutrals ----- */
    --sprint-white: #FFFFFF;
    --sprint-grey-50: #F7F7F7;
    --sprint-grey-100: #EDEDED;
    --sprint-grey-200: #D9D9D9;
    --sprint-grey-300: #B8B8B8;
    --sprint-grey-500: #707070;
    --sprint-grey-700: #4A4A4A;
    --sprint-black: #000000;

    /* ----- Semantic role tokens ----- */
    /* Apps consume these in preference to the raw palette so theming
       can swap accents without touching component CSS. */
    --color-text: var(--sprint-charcoal);
    --color-text-muted: var(--sprint-grey-500);
    --color-text-inverse: var(--sprint-white);

    --color-background: var(--sprint-white);
    --color-surface: var(--sprint-white);
    --color-surface-alt: var(--sprint-grey-50);
    --color-border: var(--sprint-grey-200);

    --color-link: var(--sprint-olive);
    --color-link-hover: var(--sprint-charcoal);

    --color-accent: var(--sprint-olive);          /* Default; overridden by product themes */
    --color-cta: var(--sprint-lime);              /* Lime is always the CTA */
    --color-cta-hover: var(--sprint-olive);
    --color-cta-text: var(--sprint-charcoal);     /* Lime fails contrast with white */

    --color-success: var(--sprint-fn-green);
    --color-warning: var(--sprint-fn-yellow);
    --color-danger: var(--sprint-fn-red);

    /* ----- Typography ----- */
    --font-family-base: "Poppins", Arial, sans-serif;
    --font-family-heading: "Poppins", Arial, sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Type scale — modest 1.2 ratio, 16px base */
    --font-size-xs: 0.75rem;      /* 12px — labels only, never body */
    --font-size-sm: 0.875rem;     /* 14px — accessibility floor for body */
    --font-size-base: 1rem;       /* 16px — default body */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 1.875rem;    /* 30px */
    --font-size-3xl: 2.25rem;     /* 36px */
    --font-size-4xl: 3rem;        /* 48px */

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-base: 1.5;
    --line-height-loose: 1.7;

    /* ----- Spacing — 4px scale ----- */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px  */
    --space-2: 0.5rem;    /* 8px  */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */
    --space-8: 4rem;      /* 64px */

    /* ----- Radii ----- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;       /* cards and pop-ups/modals — small, slightly rounded */
    --radius-pill: 999px;

    /* ----- Borders ----- */
    --border-width: 1px;
    --border-default: var(--border-width) solid var(--color-border);

    /* ----- Elevation ----- */
    --shadow-sm: 0 1px 2px rgba(51, 51, 51, 0.08);
    --shadow-md: 0 2px 8px rgba(51, 51, 51, 0.10);
    --shadow-lg: 0 8px 24px rgba(51, 51, 51, 0.12);

    /* ----- Motion ----- */
    --transition-fast: 120ms ease-out;
    --transition-base: 200ms ease-out;

    /* ----- Layout ----- */
    --container-max: 1200px;
    --focus-ring: 0 0 0 3px rgba(177, 194, 83, 0.45);  /* lime, 45% */
}

/*
 * Scoped product themes — always available, no extra stylesheet needed.
 *
 * Use:
 *     <section data-theme="finio">  ... </section>
 *     <section data-theme="fastrak"> ... </section>
 *
 * For whole-page theming, include css/sprint-finio.css or css/sprint-fastrak.css
 * which apply the same overrides at :root level.
 *
 * Only the accent and link tokens change; the CTA stays lime in every theme.
 */
[data-theme="finio"] {
    --color-accent: var(--sprint-teal);
    --color-link: var(--sprint-teal);
    --color-link-hover: #146868;
}

[data-theme="fastrak"] {
    --color-accent: var(--sprint-amber);
    --color-link: #C68411;       /* Amber fails 4.5:1 on white for text */
    --color-link-hover: #8E5D08;
}