/*
  RWC design tokens - GL-1018-rwc-client-design-system, Layer 1.
  This file is the ONLY place a literal hex or px value may appear
  (breakpoint px inside @media conditions are the one structural
  exception: CSS custom properties cannot be used inside a media
  query condition). Everywhere else, reference these custom
  properties by name. A literal elsewhere is a defect, findable by
  grep -rnE '#[0-9a-fA-F]{3,6}' styles/base.css styles/components.css
*/

:root {
  /* 1.1 Palette - brand */
  --rwc-color-brand-navy: #113454;
  --rwc-color-brand-navy-hover: #0C2740;
  --rwc-color-brand-teal: #3E8E8A;           /* graphic only, never text */
  --rwc-color-brand-teal-ink: #31736F;        /* the working teal: links, CTAs */
  --rwc-color-brand-teal-ink-hover: #275C59;
  --rwc-color-accent-blue: #6F86B1;           /* graphic only, never text */
  --rwc-color-accent-blue-ink: #4A5F8C;
  --rwc-color-accent-sand: #D9C393;           /* text on navy only */

  /* 1.1 Palette - surfaces */
  --rwc-color-surface-page: #F7F5EF;
  --rwc-color-surface-card: #FFFFFF;
  --rwc-color-surface-muted: #F1EEE6;
  --rwc-color-surface-teal-tint: #E6EFEE;

  /* 1.1 Palette - text */
  --rwc-color-text-body: #5B6770;
  --rwc-color-text-muted: #616C75;
  --rwc-color-text-on-dark: #FFFFFF;
  --rwc-color-text-on-dark-muted: #A9BBD1;    /* navy only, not on teal fills */

  /* 1.1 Palette - borders */
  --rwc-color-border-subtle: #E3DFD5;         /* decorative only, never a control edge */
  --rwc-color-border-strong: #7C8794;         /* the boundary of any interactive control */

  /* 1.1 Palette - status */
  --rwc-color-status-error: #A32E2A;
  --rwc-color-status-error-surface: #F7E9E7;
  --rwc-color-status-success: #2E6B44;
  --rwc-color-status-success-surface: #E7F1EA;
  --rwc-color-status-warning: #8A5A12;
  --rwc-color-status-warning-surface: #F7EFDF;
  --rwc-color-status-info-surface: #E9EDF4;   /* foreground is accent-blue-ink */

  /* 1.1 Palette - disabled */
  --rwc-color-state-disabled-bg: #EAE6DC;
  --rwc-color-state-disabled-fg: #847D70;

  /* 1.2 Typography */
  --rwc-font-family-base: 'Inter', Arial, Helvetica, sans-serif;
  --rwc-font-weight-regular: 400;
  --rwc-font-weight-medium: 500;
  --rwc-font-weight-semibold: 600;
  --rwc-font-weight-bold: 700;

  /* Type ramp - below bp_lg (mobile-first default). Anchors are canonical;
     the ramp switches once, at bp_lg (1024px), via the media query below. */
  --rwc-type-display-size: 2.25rem;   --rwc-type-display-weight: var(--rwc-font-weight-bold);   --rwc-type-display-lh: 1.08; --rwc-type-display-tracking: -0.02em;
  --rwc-type-h1-size: 1.875rem;       --rwc-type-h1-weight: var(--rwc-font-weight-bold);         --rwc-type-h1-lh: 1.15;      --rwc-type-h1-tracking: -0.015em;
  --rwc-type-h2-size: 1.5rem;         --rwc-type-h2-weight: var(--rwc-font-weight-semibold);     --rwc-type-h2-lh: 1.20;      --rwc-type-h2-tracking: -0.01em;
  --rwc-type-h3-size: 1.25rem;        --rwc-type-h3-weight: var(--rwc-font-weight-semibold);     --rwc-type-h3-lh: 1.30;      --rwc-type-h3-tracking: -0.005em;
  --rwc-type-h4-size: 1.125rem;       --rwc-type-h4-weight: var(--rwc-font-weight-semibold);     --rwc-type-h4-lh: 1.35;      --rwc-type-h4-tracking: 0em;
  --rwc-type-body-lg-size: 1.125rem;  --rwc-type-body-lg-weight: var(--rwc-font-weight-regular); --rwc-type-body-lg-lh: 1.60; --rwc-type-body-lg-tracking: 0em;
  --rwc-type-body-size: 1rem;         --rwc-type-body-weight: var(--rwc-font-weight-regular);    --rwc-type-body-lh: 1.65;    --rwc-type-body-tracking: 0em;
  --rwc-type-body-sm-size: 0.9375rem; --rwc-type-body-sm-weight: var(--rwc-font-weight-regular); --rwc-type-body-sm-lh: 1.60; --rwc-type-body-sm-tracking: 0em;
  --rwc-type-label-size: 0.875rem;    --rwc-type-label-weight: var(--rwc-font-weight-medium);    --rwc-type-label-lh: 1.40;   --rwc-type-label-tracking: 0.01em;
  --rwc-type-meta-size: 0.8125rem;    --rwc-type-meta-weight: var(--rwc-font-weight-regular);    --rwc-type-meta-lh: 1.45;    --rwc-type-meta-tracking: 0em;
  --rwc-type-eyebrow-size: 0.75rem;   --rwc-type-eyebrow-weight: var(--rwc-font-weight-semibold); --rwc-type-eyebrow-lh: 1.20; --rwc-type-eyebrow-tracking: 0.12em;
  --rwc-type-quote-size: 1.25rem;     --rwc-type-quote-weight: var(--rwc-font-weight-regular);   --rwc-type-quote-lh: 1.45;   --rwc-type-quote-tracking: -0.005em;

  /* 1.3 Spacing - 4px base, 8px step */
  --rwc-space-3xs: 0.125rem;  /* 2px */
  --rwc-space-2xs: 0.25rem;   /* 4px */
  --rwc-space-xs: 0.5rem;     /* 8px */
  --rwc-space-sm: 0.75rem;    /* 12px */
  --rwc-space-md: 1rem;       /* 16px */
  --rwc-space-lg: 1.5rem;     /* 24px */
  --rwc-space-xl: 2rem;       /* 32px */
  --rwc-space-2xl: 3rem;      /* 48px */
  --rwc-space-3xl: 4rem;      /* 64px */
  --rwc-space-4xl: 6rem;      /* 96px */
  --rwc-space-5xl: 8rem;      /* 128px */

  /* 1.4 Radius */
  --rwc-radius-sm: 0.25rem;   /* 4px */
  --rwc-radius-md: 0.5rem;    /* 8px */
  --rwc-radius-lg: 0.75rem;   /* 12px */
  --rwc-radius-pill: 999px;

  /* 1.5 Elevation - shadow colour is always navy at the stated alpha */
  --rwc-shadow-none: none;
  --rwc-shadow-sm: 0 1px 2px 0 rgba(17, 52, 84, 0.06);
  --rwc-shadow-md: 0 4px 12px -2px rgba(17, 52, 84, 0.10);
  --rwc-shadow-lg: 0 12px 32px -4px rgba(17, 52, 84, 0.14);

  /* 1.6 Layout - container/content widths and rules (breakpoints
     themselves are documented here but repeated as literal px inside
     @media conditions in base.css/components.css, since CSS cannot
     evaluate a custom property inside a media query condition) */
  --rwc-layout-container-max: 1200px;
  --rwc-layout-content-max: 720px;
  --rwc-layout-hairline: 1px;
  --rwc-layout-rule: 2px;
  --rwc-layout-focus-ring-width: 2px;
  --rwc-layout-focus-ring-offset: 2px;
  --rwc-layout-gutter: var(--rwc-space-md);      /* below bp_lg */
  --rwc-layout-gutter-lg: var(--rwc-space-lg);    /* at/above bp_lg */
  --rwc-layout-grid-gap: var(--rwc-space-lg);
  /* bp_sm 480 / bp_md 768 / bp_lg 1024 / bp_xl 1280 - mirrored as literal
     px in @media conditions; the type ramp switches once, at bp_lg. */

  /* 1.9 Shared components - control sizing (from 1.8/1.9's stated minimums) */
  --rwc-control-min-height: 44px;          /* default button/field min height */
  --rwc-control-min-height-compact: 36px;  /* compact button only, never a page's primary CTA */
  --rwc-nav-height: 60px;                  /* below bp_lg, per 1.9 Navigation */
  --rwc-nav-height-lg: 72px;               /* at/above bp_lg */

  /* Authored - not in GL-1018: a comfortable minimum for the message
     textarea. Added here first per 1.3's "a gap not on the ramp" rule. */
  --rwc-field-textarea-min-height: 8.25rem; /* 132px */

  /* 1.7 Motion */
  --rwc-motion-duration-fast: 120ms;   /* colour, border, opacity */
  --rwc-motion-duration-base: 200ms;   /* transform, elevation, panels */
  --rwc-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Type ramp switches once, at bp_lg (1024px) - anchors are canonical */
@media (min-width: 1024px) {
  :root {
    --rwc-type-display-size: 3.5rem;
    --rwc-type-h1-size: 2.5rem;
    --rwc-type-h2-size: 2rem;
    --rwc-type-h3-size: 1.5rem;
    --rwc-type-h4-size: 1.25rem;
    --rwc-type-quote-size: 1.5rem;
    --rwc-layout-gutter: var(--rwc-layout-gutter-lg);
  }
}