/*
 * 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;     /* global app background — brand green (also the auth gradient base) */
    --color-on-brand: #F7F5FC;     /* text & icons on the green brand background (e.g. the sidebar) */
    --color-brand-border: #23A477; /* hairline dividers/borders on the green brand background */
    --color-text-negative: #FBFAFF; /* "Base/Text Negative" — identity text on the green brand bg */
    --color-brand-dark: #003930;    /* "Grønn Mørk" — text/icon on the active (green) nav pill */

    /* ---- Dashboard surfaces & status ---- */
    --color-surface: #FEFEFF;        /* "Base/Surface" — cards on the panel */
    --color-border: #D6D6E7;         /* "Base/Border" */
    --color-border-subtle: #EEEDFA;  /* "Base/Border Subtle" */
    --color-surface-2: #E7E6FD;      /* "Base/Surface 2" — outline chips */
    --color-danger: #FF5E6C;         /* "Rød" — low tank level */
    --color-warning: #F0D85F;        /* mid tank level (not a Figma variable) */
    --color-tag-product: #C8E0F0;    /* product chip background (not a Figma variable) */

    /* ---- Interaction & feedback ---- */
    --color-brand-hover: #0FB87D;     /* solid brand button, hover */
    --color-brand-ink-hover: #0A4339; /* dark teal button + dashboard CTA, hover */
    --color-error: #B3261E;           /* form/validation error text */

    /* 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 */
    --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;               /* sidebar identity labels (Figma) */

    /* ---- 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;

    /* ---- App shell ---- */
    --sidebar-width: 160px;   /* dashboard sidebar (Figma) */
}