/* =============================================================================
   IMMI RESPONSE — Partner Visa Readiness Audit
   FILE 1 OF 2 · DESIGN SYSTEM

   Load this FIRST, before immi-audit.css.
   Nothing in this file styles a component. It defines what is allowed.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   THE THREE RULES

   1. ORANGE IS THE LIVE LAYER.
      #E8471A appears in exactly two places on any given screen:
      the current step in the rail, and the primary button.
      Not on headings. Not on eyebrows. Not on rules, icons or numbers.
      If orange is on six things, the button means nothing.

   2. NAVY IS EVERYTHING ELSE.
      Structure, text, markers, selected states, dividers, the footer.
      All neutrals are navy-tinted. There is no pure grey in this build.

   3. THERE IS NO GREEN.
      Green means safe, correct, approved. Nothing in this flow is any of
      those things yet. On the screening step it actively contradicts the
      copy, which tells the client a "Yes" is not a problem.
      Remove every green value in the current build.
   ----------------------------------------------------------------------------- */


@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');


:root {

  /* --- BRAND ------------------------------------------------------------- */

  --orange:        #E8471A;   /* current step + primary button. Nothing else. */
  --orange-press:  #C63A13;   /* :hover / :active on the primary button only. */
  --navy:          #0B1C3A;   /* structure, text, selected states, footer.    */
  --cream:         #FAF8F4;   /* page background.                              */
  --warm-white:    #FDF0EB;   /* cards nested inside the white panel.          */
  --white:         #FFFFFF;   /* the panel, inputs, unselected pills.          */


  /* --- NEUTRALS ---------------------------------------------------------- */
  /* Derived from navy. Never #999, never #CCC.                              */

  --navy-70:       #4A5670;   /* body copy, secondary text, completed steps.  */
  --navy-45:       #7C8496;   /* eyebrows, hints, labels, placeholders.       */
  --rule:          #E4DED6;   /* hairlines and card borders.                  */
  --rule-strong:   #CDC4B9;   /* input borders, unselected pill borders.      */


  /* --- FUNCTIONAL -------------------------------------------------------- */
  /* One colour, one job. Used on page 02 validation and the page 03 consent  */
  /* gate ONLY. NEVER on a screening answer. A "Yes" is not an error.         */

  --error:         #B3261E;
  --error-tint:    rgba(179, 38, 30, 0.06);


  /* --- TYPE -------------------------------------------------------------- */

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Cormorant carries EVERY heading. Both lines.
     Roman states it. Italic turns it.
     The current build sets line 1 in a bold sans — that is off-brand and it
     makes this platform look like a different company from immiresponse.au. */

  --t-hero:   clamp(2.6rem, 6vw, 4.4rem);    /* display 500                   */
  --t-h2:     clamp(1.9rem, 3.4vw, 2.6rem);  /* display 500                   */
  --t-h3:     1rem;                           /* body 500                      */
  --t-base:   1rem;
  --t-small:  0.875rem;
  --t-label:  0.6875rem;                      /* eyebrow + step rail ONLY      */

  --track-label: 0.16em;   /* the only letter-spacing above zero in the build */

  /* CAPS ARE RATIONED.
     Uppercase appears on the eyebrow and the step rail. That is the list.
     Form labels are sentence case. Six shouted labels down a page asking
     someone about their marriage is not a design, it is a customs desk. */


  /* --- SPACE + FORM ------------------------------------------------------ */

  --gutter:   clamp(1.25rem, 5vw, 3.5rem);
  --wrap:     1120px;
  --measure:  60ch;
  --radius:   3px;         /* legal product. Restraint. Not pills, not 16px.  */

  --tap:      46px;        /* minimum interactive height, all breakpoints.    */
}


/* -----------------------------------------------------------------------------
   QUALITY FLOOR — non-negotiable, every page

   · Every interactive element is a real <button>, <a>, <input> or <select>.
     No styled <div> doing the job of a control.
   · :focus-visible is always visible. Navy, 2px, 3px offset.
   · prefers-reduced-motion is respected.
   · Nothing below 46px tall is tappable.
   · Validation fires on blur, never on keystroke.
   ----------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}