/*
 * ALVA Design System v2 token layer.
 * Source: dgtl-alv/alva-design-system@fe996775c8027cb2190b444d32fad072534c6725
 *   tokens/colors.semantic.json, typography.json, layout.json, elevation.json, components.json
 * This is the only file allowed to contain raw colour, type, spacing, radius, and shadow values.
 * Contrast-audit substitutes from DESIGN.md are named explicitly (-aa suffix).
 */
:root {
  /* Text */
  --text-primary: #1F2120;
  --text-secondary: #6B6C6C;
  --text-tertiary: #9E9F9F; /* placeholders/decoration only: 2.65:1 on white */
  --text-disabled: #E7E7E7;
  --text-inverse: #FFFFFF;
  --text-brand-primary: #00E0A5; /* dark backgrounds only */
  --text-brand-secondary: #09765A;
  --text-error: #C9303B;
  --text-warning: #79641D;
  --text-info: #435CCE;
  --text-link-aa: #435CCE; /* Text/link fails AA on white; audit substitute Text/info */

  /* Icon */
  --icon-primary: #1F2120;
  --icon-secondary: #6B6C6C;
  --icon-inverse: #FFFFFF;
  --icon-brand-primary: #09765A;
  --icon-brand-secondary: #02CF99;

  /* Background */
  --bg-neutral-primary: #FFFFFF;
  --bg-neutral-secondary: #F3F3F3;
  --bg-neutral-tertiary: #EDEDED;
  --bg-neutral-disabled: #E7E7E7;
  --bg-brand-primary: #33FFC9;
  --bg-brand-secondary: #85FFDE;
  --bg-brand-tertiary: #ADFFE9;
  --bg-brand-dark: #1F2120;
  --bg-brand-dark-secondary: #898A8D;
  --bg-success-primary: #D6FFF4;
  --bg-success-secondary: #EBFFFA;
  --bg-error-primary: #C9303B;
  --bg-error-secondary: #FFF0F1;
  --bg-warning-primary: #FFE791;
  --bg-warning-secondary: #FFEFB6;
  --bg-info-primary: #DFE5FF;
  --bg-info-secondary: #EFF2FF;

  /* Border */
  --border-neutral-primary: #898A8D; /* functional input border (audit substitute for #DBDBDB) */
  --border-neutral-secondary: #9E9F9F;
  --border-neutral-tertiary: #B6B7B7;
  --border-neutral-disabled: #DBDBDB;
  --border-neutral-inverse: #FFFFFF;
  --border-brand-primary: #06C08F; /* focus ring; pair with dark ring for 3:1 */
  --border-brand-secondary: #02CF99;
  --border-error-primary: #EA3D49;
  --border-warning-primary: #79641D;
  --border-success-primary: #02CF99;
  --border-info-primary: #607DFF; /* Figma name Border/Success/info */

  /* Battery */
  --battery-fill-high: #33FFC9;
  --battery-fill-medium: #FFD748;
  --battery-fill-low: #FF4B58;
  --battery-background: #00523C;

  /* Component values from DESIGN.md */
  --button-primary-gradient-aa: linear-gradient(90deg, #016248, #038563); /* web gradient cut at #038563 for white label AA */
  --status-error-ink: #B42A33;
  --chip-inactive-ink-aa: #505151;
  --inline-message-border: #B2EFE0;
  --overlay-hover: rgba(0, 0, 0, 0.08); /* Button hover: darken overlay 8% */
  --overlay-pressed: rgba(0, 0, 0, 0.15); /* Button pressed: darken overlay 15% */
  --overlay-inverse-hover: rgba(255, 255, 255, 0.08); /* hover on Power Black surfaces */

  /* Typography: Made Outer Sans is the UI family; the font file is not shipped by the design-system repo yet */
  --font-ui: "Made Outer Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --type-h3: 700 32px/48px var(--font-ui);
  --type-h4: 500 28px/32px var(--font-ui);
  --type-h5: 700 24px/28px var(--font-ui);
  --type-m1: 500 18px/26px var(--font-ui);
  --type-m2: 400 16px/22px var(--font-ui);
  --type-m2-bold: 700 16px/22px var(--font-ui);
  --type-m3: 400 14px/16px var(--font-ui);
  --type-m3-medium: 500 14px/16px var(--font-ui);
  --type-m3-bold: 700 14px/16px var(--font-ui);
  --type-m4: 400 12px/16px var(--font-ui);
  --type-m4-bold: 500 12px/16px var(--font-ui);
  --tracking-heading: 0.5px;
  --tracking-h5: 1px;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius (artwork resolution: pill buttons/chips, square inputs, 12px cards, 16px dialogs, 8px toast/inline) */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Elevation: always both layers */
  --shadow-100: 0px 0px 1px 0px rgba(0, 10, 55, 0.31), 0px 1px 1px 0px rgba(0, 10, 55, 0.25);
  --shadow-200: 0px 0px 1px 0px rgba(0, 10, 55, 0.31), 0px 3px 5px 0px rgba(0, 10, 55, 0.2);
  --shadow-300: 0px 0px 1px 0px rgba(0, 10, 55, 0.31), 0px 8px 12px 0px rgba(0, 10, 55, 0.15);
  --shadow-400: 0px 0px 1px 0px rgba(0, 10, 55, 0.31), 0px 10px 18px 0px rgba(0, 10, 55, 0.15);
  --shadow-500: 0px 0px 1px 0px rgba(0, 10, 55, 0.31), 0px 18px 28px 0px rgba(0, 10, 55, 0.15);
  --shadow-state-on: 0px 0px 8px 0px rgba(51, 255, 201, 1);

  /* Layout: Backend/Standard 1280 canvas, 12 col, 20 gutter, 24 margin, 1232 content; Web-Mob/Standard 16 margin */
  --content-max: 1232px;
  --page-margin: 24px;
  --page-margin-mobile: 16px;
  --gutter: 20px;
  --control-height: 40px;
  --touch-target: 44px;
  --table-row-height: 44px;
  --table-header-height: 40px;
  --chip-height: 24px;
}