/*
 * Design tokens — the foundation of the Customer Portal design system.
 * Everything else (component styles, pages) references these variables, so the
 * whole UI can be re-skinned by editing this one file. Sourced from Figma.
 */
:root {
    /* ---- Brand colours ---- */
    --color-brand: #11CB8A;        /* primary green */
    --color-brand-ink: #07332C;    /* dark teal — primary text colour on light surfaces */
    --color-text-subtle: #9292A7;  /* "Base/Text Subtle" — muted text & borders */
    --color-text-positive: #1D1D34; /* "Base/Text Positive" — dark ink for links/text on light surfaces */

    /* ---- Surfaces ---- */
    --surface-card: #F7F5FC;       /* light card background (e.g. the login block) */
    --color-brand-bg: #0D8A6D;     /* solid base colour the auth/app gradient sits on top of */

    /* App/auth background: a radial glow of brand green — full opacity in the centre, fading to
       the *same* green at 0% opacity towards the edges — layered over the solid --color-brand-bg.
       rgba(17, 203, 138, 0) is --color-brand (#11CB8A) at 0% alpha; fading to the same colour
       (not the default transparent-black) keeps the fade from going muddy at the rim. */
    --brand-gradient: radial-gradient(120% 120% at 50% 28%, var(--color-brand) 0%, rgba(17, 203, 138, 0) 100%), var(--color-brand-bg);

    /* ---- Typography ---- */
    --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif; /* headings / brand */
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;           /* body / controls */

    /* ---- Radii ---- */
    --radius-md: 8px;   /* inputs & buttons */
    --radius-lg: 24px;  /* cards */

    /* ---- Control sizing (from Figma) ---- */
    --control-width: 307px;   /* inputs & buttons share this width */
    --input-height: 35px;
    --button-height: 36px;
    --control-pad-x: 16px;
}