/* Crypto Asset Recovery — design tokens (ported verbatim from design-system).
   Colors, spacing, typography, fonts, and global element defaults. */

/* ===== fonts ===== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "TASA Orbiter";
  src: url("../fonts/TASAOrbiter-VariableFont_wght.71e4d39da123.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===== colors ===== */
:root {
  /* base — brand blue */
  --blue-50:  #EBF3FF;
  --blue-100: #D8E9FF;
  --blue-200: #ADD0FE;
  --blue-300: #71ACFC;
  --blue-400: #338BFB;
  --blue-500: #026FFA; /* brand */
  --blue-600: #0260D8;
  --blue-700: #024EB0;
  --blue-800: #063D85;
  --blue-900: #0A2C5C;

  /* base — brand orange */
  --orange-50:  #FEF4E8;
  --orange-100: #FDE6CB;
  --orange-200: #FACC97;
  --orange-300: #FDB05C;
  --orange-400: #FD9629; /* brand */
  --orange-500: #E47A10;
  --orange-600: #B55C0C;
  --orange-700: #8C4709;

  /* base — ink & cool neutrals */
  --ink:      #0E1626;
  --gray-25:  #FCFDFE;
  --gray-50:  #F6F8FB;
  --gray-100: #EEF1F6;
  --gray-200: #E2E7EF;
  --gray-300: #C9D2DF;
  --gray-400: #97A3B7;
  --gray-500: #66738B;
  --gray-600: #49556C;
  --gray-700: #333E52;
  --gray-800: #1F2839;
  --white:    #FFFFFF;

  /* base — semantic hues (used sparingly; never as pills) */
  --green-50:  #EAF7EF;
  --green-600: #117B43;
  --red-50:   #FDEEEC;
  --red-600:  #C03A2B;

  /* semantic — text */
  --text-primary:   var(--ink);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-inverse:   var(--white);
  --text-link:      var(--blue-500);
  --text-accent:    var(--orange-500);

  /* semantic — surfaces */
  --surface-page:   var(--white);
  --surface-sunken: var(--gray-50);
  --surface-card:   var(--white);
  --surface-ink:    var(--ink);
  --surface-brand:  var(--blue-500);
  --surface-brand-soft: var(--blue-50);
  --surface-accent-soft: var(--orange-50);

  /* semantic — borders */
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-ink:     var(--ink);
  --border-focus:   var(--blue-500);

  /* semantic — interactive */
  --action-primary:        var(--blue-500);
  --action-primary-hover:  var(--blue-600);
  --action-primary-press:  var(--blue-700);
  --action-accent:         var(--orange-400);
  --action-accent-hover:   var(--orange-500);

  /* motif — dot matrices */
  --dot-color:       var(--gray-300);
  --dot-color-brand: var(--blue-200);
}

/* ===== spacing, radii, shadows, layout ===== */
:root {
  /* 4px base grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* radii — soft rectangles; pill reserved for icon buttons + avatars */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-card: 16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* shadows — quiet; borders do most of the work */
  --shadow-card: 0 1px 2px rgba(14, 22, 38, 0.06);
  --shadow-raised: 0 2px 8px rgba(14, 22, 38, 0.07), 0 1px 2px rgba(14, 22, 38, 0.05);
  --shadow-pop: 0 12px 32px rgba(14, 22, 38, 0.12), 0 2px 6px rgba(14, 22, 38, 0.06);
  --shadow-button: 0 1px 1.5px rgba(14, 22, 38, 0.18);
  /* 3d button ledge — hard offset, no blur */
  --ledge-primary: 0 4px 0 var(--blue-700);
  --ledge-primary-hover: 0 4px 0 var(--blue-800);
  --ledge-accent: 0 4px 0 var(--orange-600);
  --ledge-neutral: 0 4px 0 var(--gray-200);

  /* focus ring */
  --ring-focus: 0 0 0 3px var(--blue-100);

  /* layout */
  --container-max: 1200px;
  --container-pad: 32px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

@media (max-width: 760px) {
  :root {
    --container-pad: 20px;
    --space-9: 64px;
    --space-10: 96px;
  }
}

/* ===== typography ===== */
:root {
  --font-display: "TASA Orbiter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "TASA Orbiter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* scale */
  --text-xs:   13px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;

  /* weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* leading */
  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  /* tracking */
  --tracking-display: -0.02em;
  --tracking-body:    0;

  /* composed styles */
  --type-hero:     var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h1:       var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2:       var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-h3:       var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h4:       var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-body-lg:  var(--weight-regular) var(--text-md)/var(--leading-loose) var(--font-body);
  --type-body:     var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-body-sm:  var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-label:    var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-mono:     var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
  --type-fine:     var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-body);
}

@media (max-width: 760px) {
  :root {
    --text-3xl: 34px;
    --text-2xl: 28px;
    --text-xl: 24px;
  }
}

/* ===== global element defaults + brand motif utilities ===== */
body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--blue-100);
  color: var(--ink);
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; letter-spacing: var(--tracking-display); text-wrap: balance; }
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }
p  { margin: 0; text-wrap: pretty; }

code, kbd, samp { font: var(--type-mono); }

/* motif: dot grid backdrop — quiet texture behind sections */
.car-dot-grid {
  background-image: radial-gradient(var(--dot-color) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.car-dot-grid--brand {
  background-image: radial-gradient(var(--dot-color-brand) 1.5px, transparent 1.5px);
}

/* motif: drafting rules — hairlines that frame and break up the page */
.car-rule {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: 0;
}
.car-rails {
  border-left: 1px solid var(--rails-color, var(--border-default));
  border-right: 1px solid var(--rails-color, var(--border-default));
}