/*
 * FlexiPay Design System v2 — Design Tokens
 * Source: FP-Design-System_6MAY2026
 * Generated: June 2026
 *
 * Load order in _Layout.cshtml:
 *   1. tokens.css        ← this file (foundation)
 *   2. site.css          ← global styles (uses these tokens)
 *   3. [page].css        ← page-specific styles
 *   4. tenant styles.css ← per-tenant overrides (last wins)
 */

 :root {

   /* =========================================================
      COLOUR — Neutrals
      ========================================================= */

   --color-neutrals-dark:   #2D2D2D;   /* Default / primary text */
   --color-neutrals-slate:  #6C6F70;   /* Secondary text, default icon, secondary button */
   --color-neutrals-muted:  #DCDCDC;   /* Placeholder, divider */
   --color-neutrals-smoke:  #F0F0F0;   /* Border */
   --color-neutrals-snow:   #F5F5F5;   /* Input / surface fill */
   --color-neutrals-white:  #FFFFFF;   /* White */

   /* =========================================================
      COLOUR — Brand
      ========================================================= */

   --color-brand-purple:    #280045;   /* Primary brand colour */
   --color-brand-orange:    #E5741E;   /* Secondary brand colour */
   --color-brand-light:     #FDEDDD;   /* Aux brand colour (accent bar, warm tint) */
   --color-brand-blue:      #27038B;   /* Aux brand colour */

   /* =========================================================
      COLOUR — User Interface
      ========================================================= */

   --color-ui-black:            #000000;   /* Header bar, primary button bg */
   --color-ui-coal:             #464646;   /* Footer background */
   --color-ui-fog:              #AAAAAA;   /* Disabled, placeholder text */
   --color-ui-highlight-blue:   #0087E2;   /* Hyperlinks */
   --color-ui-selected-orange:  #FF7702;   /* Selected state */
   --color-ui-error:            #FD0033;   /* Error / validation */
   --color-ui-success:          #19A074;   /* Success state */
   --color-ui-beige:            #FCF0E5;   /* Etc / Miscellaneous warm tint */

   /* =========================================================
      COLOUR — Semantic aliases
      (use these in components — they map to the raw values above
       and can be overridden per-tenant via styles.css)
      ========================================================= */

   --color-text-primary:        var(--color-neutrals-dark);
   --color-text-secondary:      var(--color-neutrals-slate);
   --color-text-placeholder:    var(--color-ui-fog);
   --color-text-inverse:        var(--color-neutrals-white);
   --color-text-link:           var(--color-ui-highlight-blue);
   --color-text-error:          var(--color-ui-error);
   --color-text-subtext:        var(--color-ui-coal);

   --color-bg-body:             var(--color-neutrals-white);
   --color-bg-surface:          var(--color-neutrals-snow);
   --color-bg-header:           var(--color-neutrals-white);
   --color-bg-accent-bar:       var(--color-brand-light);
   --color-bg-footer:           var(--color-neutrals-snow);

   --color-border-default:      var(--color-neutrals-muted);
   --color-border-subtle:       var(--color-neutrals-smoke);

   --color-button-primary-bg:       var(--color-ui-black);
   --color-button-primary-text:     var(--color-neutrals-white);
   --color-button-primary-border:   var(--color-ui-black);
   --color-button-secondary-bg:     var(--color-neutrals-white);
   --color-button-secondary-text:   var(--color-neutrals-dark);
   --color-button-secondary-border: var(--color-neutrals-dark);

   --color-input-bg:            var(--color-neutrals-snow);
   --color-input-border:        var(--color-neutrals-muted);
   --color-input-text:          var(--color-neutrals-dark);
   --color-input-placeholder:   var(--color-ui-fog);

   --color-state-error:         var(--color-ui-error);
   --color-state-success:       var(--color-ui-success);
   --color-state-selected:      var(--color-ui-selected-orange);
   --color-state-disabled:      var(--color-ui-fog);

   /* =========================================================
      SHORTHAND ALIASES
      Maps the short names used by Figma's output (e.g. --ui-black,
      --neutrals-snow) to the canonical --color-* tokens above.
      Component tokens reference these short names.
      ========================================================= */

   /* Neutrals */
   --neutrals-dark:         var(--color-neutrals-dark);
   --neutrals-slate:        var(--color-neutrals-slate);
   --neutrals-muted:        var(--color-neutrals-muted);
   --neutrals-smoke:        var(--color-neutrals-smoke);
   --neutrals-snow:         var(--color-neutrals-snow);
   --neutrals-white:        var(--color-neutrals-white);

   /* UI */
   --ui-black:              var(--color-ui-black);
   --ui-coal:               var(--color-ui-coal);
   --ui-fog:                var(--color-ui-fog);
   --ui-red:                var(--color-ui-error);
   --ui-beige:              var(--color-ui-beige);
   --ui-selectedorange:     var(--color-ui-selected-orange);

   /* Font family shorthands */
   --font-heading:          var(--font-family-heading);
   --font-body:             var(--font-family-body);

   /* =========================================================
      TYPOGRAPHY — Font families
      Source: FP-Design-System Typography page
      Two families: Rethink Sans (headings + body copy) and
      Roboto Flex (text/reg, text/strong, small, caption)
      Both available via Google Fonts
      ========================================================= */

   --font-family-heading: 'Rethink Sans', 'Segoe UI', system-ui, sans-serif;
   --font-family-body:    'Roboto Flex', 'Roboto', 'Segoe UI', system-ui, sans-serif;

   /* =========================================================
      TYPOGRAPHY — Desktop type scale
      Source: FP-Design-System → Typography → Text style - Desktop
      ========================================================= */

   /* Headings — Rethink Sans, Bold */
   --font-size-h1:   3rem;       /* 48px */
   --font-size-h2:   2rem;       /* 32px */
   --font-size-h3:   1.5rem;     /* 24px */
   --font-size-h4:   1.25rem;    /* 20px */

   /* Body / text — Roboto Flex or Rethink Sans (see notes) */
   --font-size-body:       1rem;       /* 16px — Text/Reg, Text/Strong, Text/Textlink, Body/Reg */
   --font-size-small:      0.875rem;   /* 14px — Small/Reg */

   /* =========================================================
      TYPOGRAPHY — Mobile type scale
      Source: FP-Design-System → Typography → Text style - Mobile
      Apply inside @media (max-width: 767px) blocks in page CSS
      ========================================================= */

   --font-size-h1-mobile:      1.5rem;     /* 24px */
   --font-size-h2-mobile:      1.25rem;    /* 20px */
   --font-size-h3-mobile:      1rem;       /* 16px */
   --font-size-h4-mobile:      0.875rem;   /* 14px */
   --font-size-body-mobile:    0.875rem;   /* 14px — Text/Reg, Text/Strong, Text/Textlink */
   --font-size-caption-mobile: 0.75rem;    /* 12px — Caption/Reg (mobile only) */

   /* =========================================================
      TYPOGRAPHY — Named style tokens
      Maps style names from Figma directly to CSS token names
      ========================================================= */

   /* Text/Reg — Roboto Flex, 16px, Regular 400 */
   --text-reg-family:  var(--font-family-body);
   --text-reg-size:    var(--font-size-body);
   --text-reg-weight:  400;

   /* Text/Strong — Roboto Flex, 16px, Medium 500 */
   --text-strong-family: var(--font-family-body);
   --text-strong-size:   var(--font-size-body);
   --text-strong-weight: 500;

   /* Text/Textlink — Rethink Sans, 16px, Regular 400 */
   --text-link-family: var(--font-family-heading);
   --text-link-size:   var(--font-size-body);
   --text-link-weight: 400;

   /* Body/Reg — Rethink Sans, 16px, Regular 400 */
   --body-reg-family:  var(--font-family-heading);
   --body-reg-size:    var(--font-size-body);
   --body-reg-weight:  400;

   /* Small/Reg — Roboto Flex, 14px, Regular 400 */
   --small-reg-family: var(--font-family-body);
   --small-reg-size:   var(--font-size-small);
   --small-reg-weight: 400;

   /* Caption/Reg (mobile) — Roboto Flex, 12px, Medium 500 */
   --caption-reg-family: var(--font-family-body);
   --caption-reg-size:   var(--font-size-caption-mobile);
   --caption-reg-weight: 500;

   /* =========================================================
      TYPOGRAPHY — Font weights
      ========================================================= */

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

   /* =========================================================
      TYPOGRAPHY — Line heights
      (Figma uses natural/auto line heights for headings;
       body line heights confirmed from Index screen design context)
      ========================================================= */

   --line-height-heading:  1.2;    /* natural / auto */
   --line-height-body:     1.5;    /* 24px at 16px — confirmed from design */
   --line-height-small:    1.43;   /* 20px at 14px — confirmed from design */
   --line-height-caption:  1.5;    /* 18px at 12px */

   /* =========================================================
      TYPOGRAPHY — Letter spacing
      ========================================================= */

   --letter-spacing-heading:  0.1px;
   --letter-spacing-body:     0;

   /* =========================================================
      SPACING — 4px base grid
      ========================================================= */

   --space-1:   0.25rem;   /*  4px */
   --space-2:   0.5rem;    /*  8px */
   --space-3:   0.75rem;   /* 12px */
   --space-4:   1rem;      /* 16px */
   --space-5:   1.25rem;   /* 20px */
   --space-6:   1.5rem;    /* 24px */
   --space-8:   2rem;      /* 32px */
   --space-10:  2.5rem;    /* 40px */
   --space-12:  3rem;      /* 48px */
   --space-16:  4rem;      /* 64px */
   --space-20:  5rem;      /* 80px */

   /* =========================================================
      BORDER RADIUS
      ========================================================= */

   --radius-sm:    4px;    /* subtle rounding */
   --radius-md:    8px;    /* inputs, cards */
   --radius-lg:    16px;   /* modals, panels */
   --radius-pill:  52px;   /* primary buttons (fully rounded) */
   --radius-full:  9999px; /* circles */

   /* =========================================================
      SHADOWS / ELEVATION
      ========================================================= */

   --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md:    0 4px 10px rgba(100, 100, 100, 0.25);
   --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);

   /* =========================================================
      LAYOUT — Container & grid
      Source: FP-Design-System → Master Layout
      Desktop: 1440px wide, 120px horizontal padding
      Mobile:  375px wide,  24px horizontal padding
      ========================================================= */

   --container-max-width:      1440px;
   --container-padding-x:      7.5rem;     /* 120px — desktop */
   --container-padding-x-mobile: 1.5rem;   /* 24px  — mobile  */
   --container-padding-y:      0.75rem;    /* 12px  — header/footer */

   /* =========================================================
      LAYOUT — Header
      ========================================================= */

   --header-padding-x:         7.5rem;     /* 120px — desktop */
   --header-padding-x-mobile:  1.5rem;     /* 24px  — mobile  */
   --header-padding-y:         0.75rem;    /* 12px  */
   --header-border-color:      #D1D1D1;    /* nav bottom border (Figma exact) */
   --header-logo-height:       2rem;       /* 32px  */
   --header-accent-bar-height: 1rem;       /* 16px  — FlexiLight accent bar below nav */
   --header-accent-bar-bg:     var(--color-brand-light); /* #FDEDDD */

   /* =========================================================
      LAYOUT — Footer
      ========================================================= */

   --footer-padding-x:         1.125rem;   /* 18px */
   --footer-padding-y:         0.75rem;    /* 12px */
   --footer-bg:                var(--color-neutrals-snow);
   --footer-border-color:      var(--color-neutrals-smoke);
   --footer-text-color:        var(--color-neutrals-slate);

   /* =========================================================
      ICONS & LOGOS
      Source: FP-Design-System → Logos & Icons
      ========================================================= */

   /* Standard icon size — all UI icons are 24×24 */
   --icon-size:    1.5rem;     /* 24px */

   /* Logo sizes */
   --logo-council-width:    9.5625rem;  /* 153px — tenant/council logo */
   --logo-council-height:   2rem;       /* 32px  */
   --logo-flexipay-width:   6rem;       /* 96px  — "Powered by FlexiPay" */
   --logo-flexipay-height:  3.4375rem;  /* 55px  */

   /* Payment icons */
   --logo-payment-width:    2rem;       /* 32px  — VISA, MasterCard */
   --logo-payment-height:   1.25rem;    /* 20px  */

   /* Available icons in the system:
      Calendar, Info, Help, Chevron (R/L/D/U), Add, Loading,
      Checkmark, Checkmark Alt, Warning, Close, Close Alt,
      Burger Menu, Clock, Eye (View), Eye (Hide)
      Payment: VISA, MasterCard, American Express, Apple Pay, GPay */

   /* =========================================================
      TRANSITIONS
      ========================================================= */

   --transition-fast:    0.15s ease;
   --transition-base:    0.2s ease;
   --transition-slow:    0.3s ease;

   /* =========================================================
      COMPONENT — BUTTONS
      Source: Figma → Components → Buttons (node 33:1949)
      ========================================================= */

   /* Shared geometry */
   --btn-border-radius:       52px;         /* pill shape */
   --btn-padding-y:           10px;
   --btn-padding-x:           32px;
   --btn-icon-gap:            4px;
   --btn-icon-size:           24px;
   --btn-border-width:        1px;

   /* Sizing — desktop */
   --btn-height-desktop:      44px;
   --btn-font-size-desktop:   20px;         /* Rethink Sans Medium */
   --btn-font-weight-desktop: 500;
   --btn-line-height-desktop: 20px;

   /* Sizing — mobile */
   --btn-height-mobile:       40px;
   --btn-font-size-mobile:    16px;         /* Rethink Sans Bold */
   --btn-font-weight-mobile:  700;
   --btn-line-height-mobile:  24px;

   /* Primary variant */
   --btn-primary-bg:          var(--ui-black);
   --btn-primary-border:      var(--ui-black);
   --btn-primary-color:       var(--neutrals-white);

   /* Primary — disabled state */
   --btn-primary-disabled-bg:     var(--neutrals-muted);
   --btn-primary-disabled-border: var(--neutrals-muted);
   --btn-primary-disabled-color:  var(--ui-fog);

   /* Secondary variant */
   --btn-secondary-bg:        var(--neutrals-white);
   --btn-secondary-border:    var(--neutrals-dark);
   --btn-secondary-color:     var(--neutrals-dark);

   /* =========================================================
      COMPONENT — INPUTS
      Source: Figma → Components → Input (node 38:2978)
      ========================================================= */

   /* Input geometry */
   --input-height:            56px;
   --input-border-radius:     8px;
   --input-padding:           16px;
   --input-border-width:      1px;

   /* Input colours — states */
   --input-bg:                var(--neutrals-snow);       /* Default & Placeholder */
   --input-bg-disabled:       var(--neutrals-muted);      /* Disabled */
   --input-border-error:      var(--ui-red);              /* Error state border */

   /* Input text */
   --input-font-family:       var(--font-body);           /* Roboto Flex */
   --input-font-size:         16px;
   --input-font-weight:       400;
   --input-line-height:       20px;
   --input-color:             var(--neutrals-dark);       /* Filled text */
   --input-color-placeholder: var(--ui-fog);              /* Placeholder text #aaa */

   /* Label — input title */
   --label-font-size:         16px;
   --label-font-weight:       400;
   --label-line-height:       20px;
   --label-color:             var(--ui-black);

   /* Label — helper / regular message below input */
   --helper-font-size:        14px;
   --helper-font-weight:      400;
   --helper-line-height:      20px;
   --helper-color:            var(--ui-coal);
   --helper-color-error:      var(--ui-red);              /* Error message text #fd0033 */

   /* Label + Input stack spacing */
   --field-gap:               8px;                        /* gap between label and input */
   --label-icon-gap:          4px;                        /* gap between label text and info icon */
   --label-icon-size:         16px;

   /* =========================================================
      COMPONENT — RADIO
      Source: Figma → Components → Radio (node 77:6413)
      ========================================================= */

   /* Radio indicator */
   --radio-size:              24px;                       /* radio circle icon */

   /* Radio + label row */
   --radio-label-gap:         16px;                       /* gap between radio icon and label text */
   --radio-label-font-size:   16px;
   --radio-label-font-weight: 400;
   --radio-label-line-height: 20px;
   --radio-label-color:       var(--ui-black);            /* default & selected */
   --radio-label-color-disabled: var(--ui-fog);           /* disabled label #aaa */

   /* Radio button card container */
   --radio-card-border-radius: 8px;
   --radio-card-padding:      16px;

   /* Radio card — background states */
   --radio-card-bg:           var(--neutrals-snow);       /* Default  #f5f5f5 */
   --radio-card-bg-selected:  var(--ui-beige);            /* Selected #fcf0e5 */
   --radio-card-bg-disabled:  #f9f9f9;                    /* Disabled (Gray/$gray-25) */

   /* Credit card type — extra elements */
   --radio-card-icon-gap:     16px;                       /* gap between radio+label and payment logos */
   --payment-logo-width:      32px;
   --payment-logo-height:     20px;
   --payment-logo-border-radius: 2px;
   --payment-logo-border:     var(--neutrals-muted);      /* #dcdcdc */
   --payment-logo-gap:        4px;                        /* gap between Visa and MC logos */

   /* =========================================================
      COMPONENT — CHECKBOX
      Source: Figma → Components → Checkbox (node 118:1058)
      ========================================================= */

   /* Checkbox indicator (the box itself) */
   --checkbox-size:                24px;
   --checkbox-border-radius:       8px;                   /* rounded square — not pill */
   --checkbox-border-width:        1.5px;
   --checkbox-checkmark-size:      16px;                  /* white tick SVG inset */

   /* Checkbox indicator — colours per state */
   --checkbox-bg:                  var(--neutrals-white);
   --checkbox-border-color:        var(--ui-fog);         /* Default & Disabled border */
   --checkbox-bg-selected:         var(--ui-selectedorange);  /* #ff7702 */
   --checkbox-border-selected:     var(--ui-selectedorange);
   --checkbox-bg-disabled:         var(--neutrals-muted); /* #dcdcdc */

   /* Checkbox + label row — identical to radio */
   --checkbox-label-gap:           16px;
   --checkbox-label-color:         var(--ui-black);
   --checkbox-label-color-disabled: var(--ui-fog);

   /* Checkbox button card — reuses radio card tokens for bg/padding/radius */
   /* --radio-card-bg / --radio-card-bg-selected / --radio-card-padding / --radio-card-border-radius */

   /* =========================================================
      COMPONENT — CALENDAR / DATE PICKER
      Source: Figma → Components → Calendar (node 150:133)
      ========================================================= */

   /* Calendar container */
   --cal-bg:                  var(--neutrals-white);
   --cal-border:              var(--neutrals-smoke);      /* #f0f0f0 */
   --cal-border-radius:       8px;
   --cal-padding:             16px;
   --cal-shadow:              0px 4px 6px rgba(211, 211, 211, 0.3); /* Elevation/$depth-4 */

   /* Calendar header */
   --cal-header-gap:          8px;                        /* gap between month label and chevron */
   --cal-header-font-family:  var(--font-heading);        /* Rethink Sans */
   --cal-header-font-size:    20px;
   --cal-header-font-weight:  700;
   --cal-header-line-height:  36px;
   --cal-header-color:        var(--neutrals-dark);
   --cal-nav-icon-size:       24px;

   /* Calendar grid layout */
   --cal-grid-row-gap:        2px;                        /* gap between day rows */
   --cal-grid-cell-gap:       4px;                        /* gap between cells within a row */

   /* Day cell */
   --cal-cell-size:           28px;                       /* width & height of the day number */
   --cal-cell-padding-y:      8px;
   --cal-cell-border-radius:  4px;                        /* default cell corner */

   /* Day text — weekday labels (M T W T F S S) */
   --cal-weekday-font-size:   16px;
   --cal-weekday-font-weight: 500;                        /* Roboto Flex Medium */
   --cal-weekday-color:       var(--neutrals-dark);

   /* Day text — current month */
   --cal-day-font-size:       16px;
   --cal-day-font-weight:     400;                        /* Roboto Flex Regular */
   --cal-day-color:           var(--neutrals-dark);

   /* Day text — adjacent month (greyed out) */
   --cal-day-color-muted:     var(--neutrals-slate);      /* #6c6f70, opacity 0.75 */
   --cal-day-opacity-muted:   0.75;

   /* Selected day cell */
   --cal-day-bg-selected:     var(--ui-selectedorange);   /* #ff7702 */
   --cal-day-color-selected:  var(--neutrals-white);
   --cal-day-font-weight-selected: 500;                   /* Roboto Flex Medium */
   --cal-day-border-radius-selected: 44px;                /* full pill/circle */

   /* =========================================================
      COMPONENT — SECTION HEADERS
      Source: Figma → Components → Section Headers (node 89:1205)
      ========================================================= */

   /* Divider line */
   --section-divider-color:   var(--neutrals-muted);      /* #dcdcdc */
   --section-divider-width:   1px;
   --section-padding-y:       12px;                       /* top/bottom padding on the title row */

   /* Title text — desktop */
   --section-title-font-family:   var(--font-heading);    /* Rethink Sans */
   --section-title-font-size:     24px;                   /* H3 */
   --section-title-font-weight:   700;
   --section-title-color:         var(--ui-black);

   /* Title text — mobile */
   --section-title-font-size-mobile:  20px;               /* Mobile/H2 */
   --section-title-line-height-mobile: 36px;

   /* Description text (optional, below title) */
   --section-desc-font-size:      16px;                   /* Roboto Flex Regular */
   --section-desc-font-weight:    400;
   --section-desc-line-height:    20px;
   --section-desc-color:          var(--ui-coal);         /* #464646 */

   /* Title + description gap */
   --section-gap-with-divider:    8px;                    /* when divider is present */
   --section-gap-no-divider:      4px;                    /* when no divider */

   /* =========================================================
      COMPONENT — TOOLTIP
      Source: Figma → Components → Tool tip (node 169:272)
      ========================================================= */

   --tooltip-width:           320px;
   --tooltip-bg:              var(--neutrals-white);
   --tooltip-border:          var(--neutrals-muted);      /* 1px #dcdcdc */
   --tooltip-border-radius:   16px;
   --tooltip-padding:         24px;                       /* desktop */
   --tooltip-padding-mobile:  16px;                       /* mobile */
   --tooltip-shadow:          0px 1.2px 24px rgba(0, 0, 0, 0.1),
                              0px 6.4px 14.4px rgba(221, 226, 234, 0.13); /* Elevation/$depth-8 */
   --tooltip-font-size:       14px;                       /* Roboto Flex Regular */
   --tooltip-font-weight:     400;
   --tooltip-line-height:     20px;
   --tooltip-color:           var(--neutrals-dark);
   --tooltip-arrow-width:     24px;
   --tooltip-arrow-height:    16px;

   /* Elevation tokens (also usable globally) */
   --elevation-depth-4:       0px 4px 6px rgba(211, 211, 211, 0.3);       /* calendar shadow */
   --elevation-depth-8:       0px 1.2px 24px rgba(0, 0, 0, 0.1),
                              0px 6.4px 14.4px rgba(221, 226, 234, 0.13); /* tooltip shadow */

   /* =========================================================
      LEGACY ALIASES
      Maps old site.css variable names → new tokens
      Remove these once all pages are reskinned
      ========================================================= */

   --main-font-color:                   var(--color-text-primary);
   --button-background-color:           var(--color-button-primary-bg);
   --button-background-color-hover:     var(--color-button-primary-bg);
   --button-background-light-color:     var(--color-button-secondary-bg);
   --button-background-light-color-shadow: var(--color-text-primary);
   --button-font-color:                 var(--color-button-primary-text);
   --input-border-color:                var(--color-input-border);
}