/* ============================================================================
   Trony PC Trade-In 2026 — design tokens (the ONLY file holding brand values)
   ----------------------------------------------------------------------------
   Source: Figma Si5hF72A6grTs0PUhz6TNr, sections 15:164 + 14:93.
   - Named Figma variables (get_variable_defs): "EUR Blue" #0c438f (also used as
     --nav-link), "Text Dark" #333333, "Card stroke" #d3dff8, "Card Corner Radius"
     12, "Corner/Medium" 12, "background" #ffffff, plus --card-light #f5f8ff,
     --form-text-colour #646464 and --email-bg #dee2ed referenced by the frames.
   - Everything else is a raw fill read from the frames (nav, hero, buttons...).
   styles.css reads these through var() only. A reskin is this file + the logo.
   ========================================================================== */

/* Roboto Condensed, SIL OFL 1.1 (docs/legal/fonts/RobotoCondensed-OFL.txt).
   Latin subset woff2 from @fontsource/roboto-condensed 5.2.8, self-hosted: no
   runtime call to Google Fonts. Covers U+0000-00FF, U+2000-206F, € (U+20AC). */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Colour: brand ---------------------------------------------------- */
  --color-nav-bg:            #0b3d87;  /* nav bar, completed wizard step, email header */
  --color-brand:             #0c438f;  /* Figma "EUR Blue" / --nav-link: headings, labels, links */
  --color-brand-deep:        #0b3d87;  /* review labels, wizard labels + outlines */
  --color-hero-bg:           #1556b6;  /* hero, email hero block, email link */
  --color-band-bg:           #e8eefb;  /* disclaimer band under the hero */
  --color-track-bg:          #212c5c;  /* "Track your claim" section */
  --color-footer-bg:         #1a3c82;  /* footer (site + email) */
  --color-footer-ink:        #ffffff;
  --color-accent:            #cf142a;  /* active wizard step, logo underline */
  --color-primary:           #e21f26;  /* primary button */
  --color-primary-ink:       #ffffff;
  --color-primary-disabled:  rgba(226, 31, 38, 0.5);
  --color-secondary:         #2a5dd2;  /* secondary (outline) button on light */
  --color-secondary-disabled: rgba(42, 93, 210, 0.5);
  --color-on-dark:           #ffffff;  /* outline button + text on blue */

  /* --- Colour: neutrals --------------------------------------------------- */
  --color-surface:           #ffffff;  /* Figma "background" */
  --color-surface-light:     #f5f8ff;  /* Figma --card-light: panels, wizard bar, ref bar */
  --color-card-stroke:       #d3dff8;  /* Figma "Card stroke" */
  --color-text:              #333333;  /* Figma "Text Dark" */
  --color-text-strong:       #000000;
  --color-text-muted:        #646464;  /* Figma --form-text-colour: placeholders, hints */
  --color-input-border:      #838586;
  --color-step-line:         #b2bed0;  /* wizard connector */
  --color-thumb-bg:          #d9dee8;  /* review document thumbnail */
  --color-overlay:           rgba(242, 242, 242, 0.5); /* mobile menu backdrop */

  /* --- Colour: feedback (not in Figma: no error frames exist) -------------- */
  --color-error:             #cf142a;  /* reuses the brand red so no new hue is invented */
  --color-warning-bg:        #fff6e0;
  --color-warning-border:    #b37400;
  --color-warning-ink:       #5c3d00;
  --color-focus:             #2a5dd2;

  /* --- Placeholder / stub markers (Rule 139: visible, never mistaken for copy) */
  --color-placeholder-bg:     #fff8d6;
  --color-placeholder-border: #b38f00;
  --color-placeholder-ink:    #5c4a00;
  --color-stub-bg:            #1f1f1f;
  --color-stub-ink:           #ffffff;

  /* --- Typography ----------------------------------------------------------- */
  --font-family:         "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  --text-xs:     13px;   /* Terms Text / footer / disclaimer */
  --text-sm:     14px;   /* Wizard Step Label, doc thumb name */
  --text-base:   16px;   /* P Small, labels, inputs, buttons */
  --text-lead:   18px;   /* P, hero-p, details card */
  --text-nav-mobile: 20px; /* Mobile Nav Link */
  --text-h4:     22px;   /* H4 */
  --text-h3:     26px;   /* H3 Heading */
  --text-otp-email: 27px;
  --text-hero:   29px;   /* Hero Subheading (used as the page h1 on index) */
  --text-h1:     36px;   /* H1 Hero Heading */
  --text-h1-mobile: 32px; /* H1 Mobile */
  --text-h2:     42px;   /* H2 Heading */

  --leading-none:   1;
  --leading-h1:     1.089;
  --leading-hero:   1.18;
  --leading-heading: 1.2;
  --leading-button: 1.22;
  --leading-lead:   1.3;
  --leading-body:   1.4;

  /* --- Shape ------------------------------------------------------------- */
  --radius-card:     12px;  /* Figma "Card Corner Radius" / "Corner/Medium" */
  --radius-input:    6px;
  --radius-button:   6px;   /* primary + secondary buttons are 6 px in Figma, not pills */
  --radius-pill:     50px;  /* Review "Edit" button, wizard dots */
  --radius-panel:    7px;   /* details card / email code box */
  --radius-thumb:    4px;
  --radius-check-inner: 2px;
  --radius-bar:      15.333px; /* hamburger bars */
  --border-width:    1px;
  --border-width-step: 1.5px;
  --border-width-info: 2px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --shadow-drawer:   0 4px 2px rgba(0, 0, 0, 0.25);
  --blur-overlay:    10.55px;

  /* --- Spacing (Figma values) -------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  10px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  18px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  28px;
  --space-10: 32px;
  --space-11: 36px;
  --space-12: 42px;
  --space-13: 56px;
  --space-14: 64px;

  --gutter-desktop:   80px;
  --gutter-mobile:    24px;
  --hero-pad-x:       125px;
  --section-pad-top:  56px;
  --section-pad-bottom: 98px;
  --card-pad-x:       64px;
  --card-pad-y:       56px;
  --card-pad-y-tight: 37px;
  --card-pad-mobile-x: 24px;
  --card-pad-mobile-y: 32px;
  --how-pad-top:      117px;
  --track-pad-y:      91px;
  --footer-pad-y:     65px;
  --footer-pad-mobile-y: 48px;

  /* --- Sizes --------------------------------------------------------------- */
  --maxw-content:   900px;
  --maxw-form:      772px;
  --maxw-hero-h1:   573px;
  --maxw-hero-p:    468px;
  --maxw-section-p: 521px;
  --maxw-track-input: 373.5px;
  --nav-height:     89px;
  --ref-bar-height: 50px;
  --band-min-height: 51px;
  --hero-height:    502px;
  --hero-height-mobile: 637px;
  --input-height:   56px;
  --button-height:  40px;
  --button-pad-x:   20px;
  --checkbox-size:  30px;
  --checkbox-inner: 20px;
  --step-dot:       26px;
  --step-item:      102px;
  --icon-card:      76px;
  --info-dot:       24px;
  --otp-cell-w:     53.5px;
  --otp-cell-h:     65px;
  --otp-cell-h-mobile: 50px;
  --dropzone-height: 186px;
  --thumb-w:        148px;
  --thumb-h:        222px;
  --review-label-w: 241px;
  --drawer-width:   321px;
  --preview-height: 240px;

  /* --- Component geometry (Figma auto-layout values, by role) ------------- */
  --nav-pad-x:          36px;
  --nav-link-gap:       21px;
  --burger-w:           31px;
  --burger-h:           24px;
  --burger-mid-w:       25px;
  --burger-x-w:         33.66px;
  --burger-bar-h:       2px;
  --burger-mid-top:     11px;
  --burger-bottom-top:  22px;
  --drawer-link-gap:    27px;
  --chevron-nav-w:      8px;
  --chevron-nav-h:      14.333px;
  --chevron-w:          21.5px;
  --chevron-h:          12px;
  --chevron-sm-w:       18px;
  --chevron-sm-h:       10px;
  --calendar-w:         23px;
  --calendar-h:         21px;
  --leading-ref:        1.15;
  --hero-pad-y:         51px;
  --hero-pad-bottom-mobile: 39px;
  --hero-heading-gap-mobile: 22px;
  --hero-action-gap:    19px;
  --how-pad-bottom:     59px;
  --how-card-pad-y:     50px;
  --how-card-pad-y-mobile: 26px;
  --faq-pad-bottom:     124px;
  --faq-pad-bottom-mobile: 153px;
  --faq-gap:            13px;
  --faq-pad-x:          38px;
  --faq-answer-max:     768px;
  --track-form-gap-mobile: 39px;
  --closed-pad-top:     102px;
  --card-gap:           31px;
  --card-gap-sign:      30px;
  --card-gap-otp:       27px;
  --card-gap-mobile:    23px;
  --details-pad-y:      21px;
  --details-gap:        6px;
  --inline-btn-gap:     14px;
  --wizard-pad-y:       41px;
  --wizard-pad-x:       34px;
  --wizard-label-gap:   9px;
  --field-gap:          9px;
  --column-gap:         25px;
  --stack-gap-bank:     38px;
  --input-icon-space:   52px;
  --date-picker-hit:    56px;
  --euro-pad-left:      36px;
  --phone-prefix-w:     104px;
  --check-gap:          15px;
  --check-inner-offset: 4px;
  --checklist-pad-x:    19px;
  --checklist-check-pad-y: 17px;
  --checklist-check-pad-x: 37px;
  --checklist-text-gap: 26px;
  --dropzone-gap:       31px;
  --dropzone-text-gap:  7px;
  --dropzone-icon-w:    30px;
  --dropzone-icon-h:    30.6px;
  --review-row-pad-y:   7px;
  --thumbs-gap:         17px;
  --thumbs-pad-y:       19px;
  --transfer-gap:       27px;
  --transfer-doc-max-h: 128px;
  --text-transfer:      15px;
  --otp-gap:            10px;
  --otp-gap-mobile:     4px;
  --page-pad-top-compact-mobile: 22px;
  --answer-transition:  250ms ease;

  --brand-logo-url:    url("../img/trony-logo.svg");
  --brand-logo-width:  97px;
  --brand-logo-height: 39px;

  --transition-fast: 150ms ease;
}