/* ============================================================
   Rio Design System — Foundations
   Colors + Type variables for all surfaces
   ============================================================ */

/* ---------- Fonts ---------- */


:root {
  /* ============================================================
     COLOR — Primary Teal (Rio's signature, ConvergentIS)
     Action color, brand accent, table chrome accent.
     ============================================================ */
  --rio-teal-50:  #F2FAFA;
  --rio-teal-100: #D9EEEF; /* borders/strokes on teal surfaces */
  --rio-teal-200: #B2DCDD;
  --rio-teal-300: #7CC4C6;
  --rio-teal-400: #44A0A4;
  --rio-teal-500: #137A7F; /* base — brand teal: action fill, links, headings */
  --rio-teal-600: #0F6468;
  --rio-teal-700: #0B4D50;
  --rio-teal-800: #083739;
  --rio-teal-900: #042324;
  --rio-teal-950: #021213;

  /* Aliases used across the system. Base (500) is the primary action color;
     600 / 700 are the hover / pressed steps. */
  --rio-primary:        var(--rio-teal-500);
  --rio-primary-hover:  var(--rio-teal-600);
  --rio-primary-active: var(--rio-teal-700);
  --rio-primary-text:   var(--rio-teal-500);

  /* ============================================================
     COLOR — Greys (functional / surface scale)
     Backgrounds, panels, dividers, body text.
     ============================================================ */
  --rio-grey-50:  #F4F7F7; /* page/panel back  */
  --rio-grey-75:  #F4F6F7; /* dashboard back  */
  --rio-grey-100: #EFF1F2; /* hairline tint, neutral pill bg */
  --rio-grey-150: #E5E7EB;
  --rio-grey-200: #DADFE2; /* default divider */
  --rio-grey-250: #CCD1D6;
  --rio-grey-300: #BCC3CA; /* form input border */
  --rio-grey-400: #8092A5;
  --rio-grey-500: #86919D;
  --rio-grey-600: #556B82; /* secondary text */
  --rio-grey-700: #474A4F;
  --rio-grey-800: #292B2E;
  --rio-grey-900: #1D2D3E; /* primary text */
  --rio-grey-1000: #000000;

  /* ============================================================
     COLOR — Accents (used sparingly: charts, highlights)
     ============================================================ */
  --rio-purple-100: #F2D9F8;
  --rio-purple-300: #E09EEE;
  --rio-purple-500: #B842D0;
  --rio-purple-700: #804EB4;
  --rio-purple-900: #5E3486;

  --rio-blue-500:   #005C96;
  --rio-blue-link:  #0070F2; /* link blue */

  /* ============================================================
     COLOR — Semantic / Status
     Soft pill backgrounds + paired stronger fg.
     ============================================================ */
  --rio-status-neutral-bg:  #EFF1F2;
  --rio-status-neutral-fg:  #1D2D3E;

  --rio-status-info-bg:     #E1F4FF;
  --rio-status-info-fg:     #005C96;

  --rio-status-success-bg:  #F5FAE5;
  --rio-status-success-fg:  #426E1B;

  --rio-status-warning-bg:  #FFF8D6;
  --rio-status-warning-fg:  #7A5C00;

  --rio-status-error-bg:    #FFEAF4;
  --rio-status-error-fg:    #AA0808;

  /* ============================================================
     SEMANTIC — Foreground / Background / Border
     Use these in components, not the raw scales.
     ============================================================ */
  --rio-fg:           var(--rio-grey-900);     /* default text */
  --rio-fg-secondary: var(--rio-grey-600);     /* secondary  */
  --rio-fg-tertiary:  var(--rio-grey-500);     /* hint */
  --rio-fg-disabled:  var(--rio-grey-400);
  --rio-fg-inverse:   #FFFFFF;
  --rio-fg-link:      var(--rio-teal-500);

  --rio-bg-page:      var(--rio-grey-75);      /* dashboard canvas */
  --rio-bg-surface:   #FFFFFF;                 /* cards/panels */
  --rio-bg-subtle:    var(--rio-grey-50);
  --rio-bg-hover:     #F4F6F7;
  --rio-bg-pressed:   #EFF1F2;

  --rio-border:           var(--rio-grey-200);
  --rio-border-strong:    var(--rio-grey-300);
  --rio-border-input:     var(--rio-grey-300);
  --rio-border-focus:     var(--rio-teal-500);

  /* ============================================================
     COLOR — Cover / Hero gradient
     The Cover background — dark navy → black with forest pattern.
     ============================================================ */
  --rio-hero-grad:    linear-gradient(180deg, #314B73 0%, #000000 100%); /* @kind color */
  --rio-banner-teal:  linear-gradient(95deg, #0B4D50 0%, #44A0A4 100%); /* @kind color */

  /* Chart line gradient (teal) */
  --rio-chart-grad-1: linear-gradient(180deg, #DADFE2 0%, #F5F7F7 100%); /* @kind color */

  /* ============================================================
     ELEVATION — shadows
     ============================================================ */
  --rio-shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --rio-shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.10);
  --rio-shadow-md:   0 4px 8px -2px rgba(34, 54, 73, 0.20), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --rio-shadow-lg:   0 12px 24px -6px rgba(34, 54, 73, 0.20), 0 4px 8px -4px rgba(0, 0, 0, 0.05);
  --rio-shadow-focus: 0 0 0 2px rgba(19, 122, 127, 0.30);

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --rio-space-0:   0px;
  --rio-space-1:   4px;
  --rio-space-2:   8px;
  --rio-space-3:   12px;
  --rio-space-4:   16px;
  --rio-space-5:   20px;
  --rio-space-6:   24px;
  --rio-space-8:   32px;
  --rio-space-10:  40px;
  --rio-space-12:  48px;
  --rio-space-16:  64px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --rio-radius-xs: 4px;
  --rio-radius-sm: 6px;
  --rio-radius-md: 8px;   /* pills, buttons, status */
  --rio-radius-lg: 12px;  /* cards/panels */
  --rio-radius-xl: 16px;  /* banner top corners */
  --rio-radius-full: 9999px;

  /* ============================================================
     TYPOGRAPHY — base
     Source Sans 3 (substituted for Source Sans Pro — same family,
     newer release).
     ============================================================ */
  --rio-font-sans: "Source Sans 3", "Source Sans Pro", -apple-system,
                   BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --rio-font-mono: "SFMono-Regular", Menlo, Consolas,
                   "Liberation Mono", monospace;

  /* Weight tokens */
  --rio-w-regular:  400; /* @kind font */
  --rio-w-semibold: 600; /* @kind font */
  --rio-w-bold:     700; /* @kind font */
  --rio-w-black:    900; /* @kind font */

  /* ============================================================
     TYPE SCALE — semantic.
     Pulled directly from the Figma Typography page.
     H1 48/56 · H2 36/40 · H3 30/36 · H4 24/32 · H5 20/24 · H6 16/24
     Paragraph 12/16 · 14/20 · 16/24 · 18/28 · 20/28
     Label 10/14 · 12/16 · 14/18 · 16/24 · 18/28 · 20/32
     ============================================================ */
  --rio-h1-size: 48px; --rio-h1-line: 56px; --rio-h1-weight: 700;
  --rio-h2-size: 36px; --rio-h2-line: 40px; --rio-h2-weight: 700;
  --rio-h3-size: 30px; --rio-h3-line: 36px; --rio-h3-weight: 700;
  --rio-h4-size: 24px; --rio-h4-line: 32px; --rio-h4-weight: 700;
  --rio-h5-size: 20px; --rio-h5-line: 24px; --rio-h5-weight: 700;
  --rio-h6-size: 16px; --rio-h6-line: 24px; --rio-h6-weight: 600;

  --rio-p-xs-size: 12px; --rio-p-xs-line: 16px;
  --rio-p-sm-size: 14px; --rio-p-sm-line: 20px;
  --rio-p-md-size: 16px; --rio-p-md-line: 24px;
  --rio-p-lg-size: 18px; --rio-p-lg-line: 28px;
  --rio-p-xl-size: 20px; --rio-p-xl-line: 28px;

  --rio-label-xs-size: 10px; --rio-label-xs-line: 14px;
  --rio-label-sm-size: 12px; --rio-label-sm-line: 16px;
  --rio-label-md-size: 14px; --rio-label-md-line: 18px;
  --rio-label-lg-size: 16px; --rio-label-lg-line: 24px;

  --rio-letter-tight: -0.022em;

  /* ============================================================
     MOTION
     ============================================================ */
  --rio-ease-out:  cubic-bezier(0.2, 0.6, 0.25, 1); /* @kind other */
  --rio-ease-in:   cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --rio-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --rio-dur-fast:  120ms; /* @kind other */
  --rio-dur-base:  200ms; /* @kind other */
  --rio-dur-slow:  320ms; /* @kind other */
}

/* ============================================================
   Semantic type classes — reach for these in components.
   ============================================================ */
.rio-h1 { font-family: var(--rio-font-sans); font-weight: var(--rio-h1-weight);
          font-size: var(--rio-h1-size); line-height: var(--rio-h1-line);
          color: var(--rio-fg); letter-spacing: var(--rio-letter-tight); margin: 0; }
.rio-h2 { font-family: var(--rio-font-sans); font-weight: var(--rio-h2-weight);
          font-size: var(--rio-h2-size); line-height: var(--rio-h2-line);
          color: var(--rio-fg); letter-spacing: var(--rio-letter-tight); margin: 0; }
.rio-h3 { font-family: var(--rio-font-sans); font-weight: var(--rio-h3-weight);
          font-size: var(--rio-h3-size); line-height: var(--rio-h3-line);
          color: var(--rio-fg); margin: 0; }
.rio-h4 { font-family: var(--rio-font-sans); font-weight: var(--rio-h4-weight);
          font-size: var(--rio-h4-size); line-height: var(--rio-h4-line);
          color: var(--rio-fg); margin: 0; }
.rio-h5 { font-family: var(--rio-font-sans); font-weight: var(--rio-h5-weight);
          font-size: var(--rio-h5-size); line-height: var(--rio-h5-line);
          color: var(--rio-fg); margin: 0; }
.rio-h6 { font-family: var(--rio-font-sans); font-weight: var(--rio-h6-weight);
          font-size: var(--rio-h6-size); line-height: var(--rio-h6-line);
          color: var(--rio-fg); margin: 0; }

.rio-p     { font-family: var(--rio-font-sans); font-weight: 400;
             font-size: 14px; line-height: 20px; color: var(--rio-fg); margin: 0; }
.rio-p-sm  { font-family: var(--rio-font-sans); font-weight: 400;
             font-size: 12px; line-height: 16px; color: var(--rio-fg); margin: 0; }
.rio-p-lg  { font-family: var(--rio-font-sans); font-weight: 400;
             font-size: 16px; line-height: 24px; color: var(--rio-fg); margin: 0; }

.rio-label-xs { font-family: var(--rio-font-sans); font-weight: 600;
                font-size: 10px; line-height: 14px; letter-spacing: 0.04em;
                text-transform: uppercase; color: var(--rio-fg-secondary); margin: 0; }
.rio-label-sm { font-family: var(--rio-font-sans); font-weight: 600;
                font-size: 12px; line-height: 16px; color: var(--rio-fg); margin: 0; }
.rio-label-md { font-family: var(--rio-font-sans); font-weight: 600;
                font-size: 14px; line-height: 18px; color: var(--rio-fg); margin: 0; }

.rio-link    { color: var(--rio-fg-link); text-decoration: none; font-weight: 600; }
.rio-link:hover { text-decoration: underline; }

.rio-mono { font-family: var(--rio-font-mono); font-size: 13px; }

/* Material icons utility — use <span class="mat-icon">edit_document</span> */
.mat-icon {
  font-family: "Material Symbols Rounded";
  font-weight: 300;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.mat-icon.filled  { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.mat-icon.size-18 { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
.mat-icon.size-20 { font-size: 20px; }
.mat-icon.size-28 { font-size: 28px; }
.mat-icon.size-32 { font-size: 32px; }