/* ==========================================================================
   OpenDhi design tokens (OD-SPEC-AUTH-001 v1.2 section 3, WEB-UI-BRIEF section 2)
   Every raw colour, size, radius, elevation and motion value lives here.
   auth.css and the Blade views reference these custom properties only.
   ========================================================================== */

:root {
  /* 3.1 Colour palette */
  --od-brand-primary: #4A6F61;
  /* Sampled from the supplied logo asset, public/assets/od/logo.png: amber across the top row of the
     mark, mint green across the bottom, grey squares inside each bracket. The mark itself is that PNG,
     so these exist for anything else that needs to match it (favicon, future chips). */
  --od-logo-green: #24D77D;
  --od-logo-grey: #969696;
  --od-brand-accent: #E99E2F;
  --od-brand-on-primary: #FFFFFF;
  --od-brand-pressed: #3E5D51;
  --od-surface-muted: #E8ECEA;
  --od-canvas: #F2F4F3;
  --od-surface: #FFFFFF;
  --od-text-primary: #1F2422;
  --od-text-secondary: #5A6160;
  --od-text-placeholder: #9AA1A0;
  --od-border-default: #E3E7E5;
  --od-error: #B3261E;
  --od-success: #2E7D5B;
  --od-warning: #B26B00;
  --od-banner-error-bg: #FDECEA;
  --od-banner-success-bg: #E9F4EF;
  --od-field-fill: #FBFBFB;

  /* 3.3 Spacing */
  --od-space-xxs: 4px;
  --od-space-xs: 8px;
  --od-space-sm: 12px;
  --od-space-md: 16px;
  --od-space-lg: 20px;
  --od-space-xl: 24px;
  --od-space-xxl: 32px;
  --od-space-section: 40px;

  /* 3.3 Radius */
  --od-radius-field: 10px;
  --od-radius-card: 14px;
  --od-radius-badge: 8px;
  --od-radius-pill: 999px;
  --od-radius-block: 8px;

  /* 3.3 Sizing */
  --od-size-field: 48px;
  --od-size-button: 48px;
  --od-size-avatar-sm: 38px;
  --od-size-avatar-web: 30px;
  --od-size-icon: 20px;

  /* 3.3 Elevation */
  --od-elevation-1: 0 1px 3px rgba(30,40,35,.12);
  --od-elevation-2: 0 8px 20px rgba(30,40,35,.10);
  --od-elevation-3: 0 14px 30px rgba(30,40,35,.16);
  /* Modal scrim (OD-DIALOG). text.primary at 55%, so the dimmed page stays legible behind it. */
  --od-scrim: rgba(31, 36, 34, 0.55);
  /* The translucent disc behind each benefit check on the login brand panel (mockup frame 01). */
  --od-brand-chip: rgba(255, 255, 255, 0.18);

  /* 3.4 Motion */
  --od-motion-fast: 120ms ease-out;
  --od-motion-standard: 200ms ease-out;
  --od-motion-emphasised: 300ms ease-in-out;
  --od-motion-loading: 1000ms linear;

  /* 3.2 Typography */
  --od-font: "Inter", Roboto, "SF Pro Text", system-ui, sans-serif;

  /* Derived helpers (no new colours: opacity levels and focus ring geometry from section 5.5 / 14.2) */
  --od-opacity-disabled: 0.38;
  --od-opacity-disabled-label: 0.6;
  --od-focus-ring: 2px solid var(--od-brand-primary);
  --od-focus-offset: 2px;
  --od-target-min: 44px;

  /* Derived accessibility tokens (section 14.2: text >= 4.5:1, control boundaries >= 3:1 on white).
     feedback.warning (#B26B00, 4.2:1) stays for icons / borders; its text form is darker.
     border/default (#E3E7E5, 1.24:1) stays for cards / dividers; form-control boundaries use a
     4.3:1 grey. text.placeholder (#9AA1A0, 2.54:1 on the field fill) is unused on these three
     screens; placeholder text uses the 4.69:1 grey.
     Recorded in docs/ASSUMPTIONS.md (Web UI deviations). */
  --od-warning-text: #8F5600;
  --od-border-control: #767C7A;
  --od-text-placeholder-web: #6C7371;

  /* Layout geometry (section 2.3, 5.2, 6.2, 7.2) */
  /* The brief says 1120. The mockup's frames are considerably flatter than 1120 produces once the
     form is real: at 1120 the sign-up card came out 1120 x 708 where the artboard is closer to 3:1.
     Widening the card is the half of that gap which does not cost content. Recorded in
     docs/ASSUMPTIONS.md. */
  --od-block-max: 1280px;
  --od-brand-share-auth: 37%;
  --od-brand-share-profile: 31%;
  --od-brand-strip-xs: 120px;
  --od-brand-banner-sm: 180px;
  --od-content-max-sm: 560px;
  /* Sized so "CREATE MY ACCOUNT" fits on one line at the specified button type (13 / 700 / +0.7 =
     157 px) with real padding either side. 200 left it 4 px of padding; 220 still wrapped it to two
     lines because the content box came to 154. 240 gives a 208 px button, a 176 px content box and
     ~9 px of slack. */
  --od-rail-width: 240px;
  --od-panel-gutter: var(--od-space-xl);
}

/* --------------------------------------------------------------------------
   3.2 Typography scale (rem against a 16 px root)
   -------------------------------------------------------------------------- */

.od-display {
  font-family: var(--od-font);
  font-size: 1.5rem;          /* 24 */
  line-height: 2rem;          /* 32 */
  font-weight: 800;
  letter-spacing: -0.3px;
}

.od-h1 {
  font-family: var(--od-font);
  font-size: 1.25rem;         /* 20 */
  line-height: 1.75rem;       /* 28 */
  font-weight: 700;
  letter-spacing: -0.2px;
}

.od-h2 {
  font-family: var(--od-font);
  font-size: 1.0625rem;       /* 17 */
  line-height: 1.5rem;        /* 24 */
  font-weight: 600;
  letter-spacing: 0;
}

.od-body {
  font-family: var(--od-font);
  font-size: 0.875rem;        /* 14 */
  line-height: 1.25rem;       /* 20 */
  font-weight: 400;
  letter-spacing: 0;
}

.od-body-strong {
  font-family: var(--od-font);
  font-size: 0.875rem;        /* 14 */
  line-height: 1.25rem;       /* 20 */
  font-weight: 600;
  letter-spacing: 0;
}

.od-label {
  font-family: var(--od-font);
  font-size: 0.6875rem;       /* 11 */
  line-height: 0.875rem;      /* 14 */
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.od-caption {
  font-family: var(--od-font);
  font-size: 0.75rem;         /* 12 */
  line-height: 1rem;          /* 16 */
  font-weight: 400;
  letter-spacing: 0;
}

.od-button-text {
  font-family: var(--od-font);
  font-size: 0.8125rem;       /* 13 */
  line-height: 1rem;          /* 16 */
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.od-micro {
  font-family: var(--od-font);
  font-size: 0.625rem;        /* 10 */
  line-height: 0.875rem;      /* 14 */
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* Brand headline grows to 32/38 at LG (section 3.2, WEB-UI-BRIEF section 2). */
@media (min-width: 1024px) {
  .od-display--brand {
    font-size: 2rem;          /* 32 */
    line-height: 2.375rem;    /* 38 */
  }
}

/* --------------------------------------------------------------------------
   MOT-01: with "reduce motion" every transition becomes an 80 ms cross-fade
   and looping / transform animations stop.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --od-motion-fast: 80ms linear;
    --od-motion-standard: 80ms linear;
    --od-motion-emphasised: 80ms linear;
  }

  *,
  *::before,
  *::after {
    transition-duration: 80ms !important;
    transition-property: opacity, background-color, border-color, color !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}