/* ================================================================
   FibreTel MD3 Tokens — seed colour #0869B2
   ================================================================ */
:root {
  --md-sys-color-primary:                  #0469B2;
  --md-sys-color-on-primary:               #FFFFFF;
  --md-sys-color-primary-container:        #D4E4FF;
  --md-sys-color-on-primary-container:     #001C3A;
  --md-sys-color-secondary:                #535E72;
  --md-sys-color-on-secondary:             #FFFFFF;
  --md-sys-color-secondary-container:      #D7E3F8;
  --md-sys-color-on-secondary-container:   #0F1C2E;
  --md-sys-color-tertiary:                 #6B5B7B;
  --md-sys-color-on-tertiary:              #FFFFFF;
  --md-sys-color-tertiary-container:       #F2DAFF;
  --md-sys-color-on-tertiary-container:    #251431;
  --md-sys-color-error:                    #BA1A1A;
  --md-sys-color-on-error:                 #FFFFFF;
  --md-sys-color-error-container:          #FFDAD6;
  --md-sys-color-on-error-container:       #410002;
  --md-sys-color-background:               #F6F8FC;
  --md-sys-color-on-background:            #191C20;
  --md-sys-color-surface:                  #F6F8FC;
  --md-sys-color-on-surface:               #191C20;
  --md-sys-color-surface-variant:          #DDE3EA;
  --md-sys-color-on-surface-variant:       #41484D;
  --md-sys-color-outline:                  #71787E;
  --md-sys-color-outline-variant:          #C1C7CE;
  --md-sys-color-inverse-surface:          #2E3135;
  --md-sys-color-inverse-on-surface:       #F0F0F4;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low:    #F0F2FA;
  --md-sys-color-surface-container:        #EAEDF5;
  --md-sys-color-surface-container-high:   #E4E7EF;
  --md-sys-color-surface-container-highest:#DEE1E9;

  /* FibreTel product colours */
  --ft-internet:  #09B268; --ft-internet-c:  #C8F5E1;
  --ft-tv:        #F27072; --ft-tv-c:        #FFD9D9;
  --ft-voice:     #C98A00; --ft-voice-c:     #FFE9A6;
  --ft-access:    #7B61FF; --ft-access-c:    #E8E0FF;
  --ft-connect:   #E55C30; --ft-connect-c:   #FFDBC8;
  --ft-services:  #0469B2; --ft-services-c:  #D4E4FF;
  --ft-family:    #1E8E3E; --ft-family-c:    #C8F5D8;
  --ft-secure:    #1E8E3E; --ft-secure-c:    #C8F5D8;
  --ft-guard:     #1565C0; --ft-guard-c:     #D4E4FF;

  /* Typeface override */
  --md-ref-typeface-plain: 'Inter', sans-serif;
  --md-ref-typeface-brand: 'Inter', sans-serif;

  /* Layout */
  --rail-w: 80px;
  --topbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, p, h1, h2, h3, h4, h5, h6,
a, ul, ol, li, nav, main, section, article, aside,
header, footer, figure, figcaption, blockquote, pre { margin: 0; padding: 0; }

/* MD3 web components — prevent flex shrink + reset interference */
md-filled-button, md-outlined-button, md-text-button,
md-filled-tonal-button, md-icon-button {
  flex-shrink: 0;
  min-width: fit-content;
}

md-tabs {
  --md-secondary-tab-container-color: #fff;
}

html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  color: var(--md-sys-color-on-background);
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   MD3 TYPE SCALE — both naming conventions (t-* and type-*)
   ================================================================ */
.t-display, .type-display   { font-size: 2.25rem;  font-weight: 400; letter-spacing: -.5px; line-height: 1.2; }
.t-headline, .type-headline  { font-size: 1.75rem;  font-weight: 400; letter-spacing: -.3px; line-height: 1.25; }
.t-title-lg, .type-title-lg  { font-size: 1.375rem; font-weight: 500; line-height: 1.3; }
.t-title-md, .type-title-md  { font-size: 1rem;     font-weight: 600; letter-spacing: .01em; }
.t-title-sm, .type-title-sm  { font-size: .875rem;  font-weight: 600; letter-spacing: .01em; }
.t-body-lg, .type-body-lg   { font-size: 1rem;     font-weight: 400; line-height: 1.5; }
.t-body-md, .type-body-md   { font-size: .875rem;  font-weight: 400; line-height: 1.5; }
.t-body-sm, .type-body-sm   { font-size: .75rem;   font-weight: 400; letter-spacing: .01em; }
.t-label-lg, .type-label-lg  { font-size: .875rem;  font-weight: 500; letter-spacing: .01em; }
.t-label-md, .type-label-md  { font-size: .75rem;   font-weight: 500; letter-spacing: .05em; }
.t-label-sm, .type-label-sm  { font-size: .6875rem; font-weight: 500; letter-spacing: .05em; }

/* Colour helpers */
.c-primary    { color: var(--md-sys-color-primary); }
.c-muted      { color: var(--md-sys-color-on-surface-variant); }
.c-on-surface { color: var(--md-sys-color-on-surface); }
.c-on-pc      { color: var(--md-sys-color-on-primary-container); }
.c-error      { color: var(--md-sys-color-error); }

/* Material Symbols inline */
.rail-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 22px; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: var(--md-sys-color-on-surface-variant);
  transition: color .15s; user-select: none;
}