/* =========================================================================
   Opendoor Bricks Next — Core tokens (colors + type)
   Generated from tokens-studio / bricks-next/tokens/Novo.ts + System.json
   ========================================================================= */

/* ---------- Fonts: Graphik (Commercial Type) — licensed files installed at ./fonts/.
   Regular (400) and Medium (500) are the two weights in active use across the system.
   Other weights are intentionally omitted — do not ship italics or heavier weights without Brand sign-off. ---------- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

@font-face{
  font-family:"Graphik";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("./fonts/Graphik-Regular.woff") format("woff"),
      url("./fonts/Graphik-Regular.ttf") format("truetype"),
      url("./fonts/Graphik-Regular.otf") format("opentype");
}
@font-face{
  font-family:"Graphik";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("./fonts/Graphik-Medium.woff") format("woff"),
      url("./fonts/Graphik-Medium.ttf") format("truetype"),
      url("./fonts/Graphik-Medium.otf") format("opentype");
}

/* Graphik Compact falls back to Graphik for now — tight metrics file not licensed for web. */
@font-face{
  font-family:"Graphik Compact";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("./fonts/Graphik-Regular.woff") format("woff"),
      url("./fonts/Graphik-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Graphik Compact";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("./fonts/Graphik-Medium.woff") format("woff"),
      url("./fonts/Graphik-Medium.ttf") format("truetype");
}

:root {
  /* ---------- Font families ---------- */
  --font-family-default: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-compact: "Graphik Compact", "Graphik", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Base palette (key + derived rung per hue) ----------
     Each hue is derived by HSL-lightening the "key" color. */
  /* neutral — key #23201D (warm near-black, "earth"-tinted) */
  --neutral-0:   #23201D;   /* key */
  --neutral-8:   #37322D;
  --neutral-13:  #433D37;
  --neutral-24:  #5E564E;
  --neutral-35:  #786E64;
  --neutral-53:  #A0968C;
  --neutral-65:  #B8B1AA;
  --neutral-72:  #C6C1BB;
  --neutral-78:  #D3CEC9;
  --neutral-84:  #DFDBD8;
  --neutral-90:  #EBE9E7;
  --neutral-94:  #F3F2F0;
  --neutral-97:  #F9F8F8;
  --neutral-99:  #FDFDFD;
  --neutral-100: #FFFFFF;

  /* blue — key #001549 (deep brand blue) */
  --blue-0:   #001549;
  --blue-7:   #001E68;
  --blue-15:  #00288B;
  --blue-25:  #0034B6;
  --blue-36:  #0042E6;   /* accent-brand default */
  --blue-42:  #134FFF;
  --blue-53:  #326DFF;
  --blue-69:  #6F9AFF;
  --blue-83:  #B5CAFF;
  --blue-93:  #E0E9FF;
  --blue-98:  #F6F9FF;

  /* earth — key #1A1A14 (cool warm-gray for infographics & backgrounds) */
  --earth-0:  #1A1A14;
  --earth-21: #454532;
  --earth-54: #8B8B66;
  --earth-75: #CDCDBD;
  --earth-88: #E3E3D9;
  --earth-94: #F0F0EB;

  /* green — key #001F17 (success) */
  --green-0:  #001F17;
  --green-12: #003729;
  --green-20: #005842;
  --green-31: #007F5E;   /* success default */
  --green-42: #00A67A;
  --green-73: #7FDCBF;
  --green-87: #C1FFEF;
  --green-93: #DDFFF6;

  /* red — key #2F0F0F (error) */
  --red-0:  #2F0F0F;
  --red-20: #511A1A;
  --red-31: #732525;
  --red-43: #983131;
  --red-55: #C13E3E;     /* error default */
  --red-77: #E6B1B1;
  --red-87: #F1D3D3;
  --red-94: #F8EBEB;

  /* clay — key #221711 (warm accent for infographics) */
  --clay-0:  #221711;
  --clay-32: #5E3F2E;
  --clay-55: #BA8E75;
  --clay-76: #D8B89D;
  --clay-91: #EDDACA;
  --clay-97: #F8EEE4;

  /* ---------- Semantic color (light theme) ---------- */
  /* background */
  --bg-primary:            var(--neutral-100);
  --bg-secondary:          var(--neutral-97);
  --bg-tertiary:           var(--neutral-94);
  --bg-accent-brand:       var(--blue-36);
  --bg-hover-primary:      var(--neutral-90);
  --bg-hover-secondary:    var(--neutral-84);
  --bg-hover-tertiary:     var(--neutral-78);
  --bg-hover-accent-brand: var(--blue-15);
  --bg-inactive-primary:   var(--neutral-100);
  --bg-inactive-accent:    var(--blue-83);
  --bg-error-primary:      var(--red-55);
  --bg-error-secondary:    #F8EBEB;
  --bg-success:            var(--green-31);

  /* content (fg) */
  --fg-primary:            var(--neutral-0);
  --fg-secondary:          var(--neutral-24);
  --fg-tertiary:           var(--neutral-35);
  --fg-accent-brand:       var(--blue-36);
  --fg-hover-primary:      var(--neutral-35);
  --fg-hover-accent-brand: var(--blue-15);
  --fg-inactive-primary:   var(--neutral-53);
  --fg-inactive-secondary: var(--neutral-78);
  --fg-error:              var(--red-55);
  --fg-success:            var(--green-31);
  --fg-infographic-blue:   var(--blue-53);
  --fg-infographic-earth:  var(--earth-75);
  --fg-infographic-clay:   var(--clay-55);

  /* border */
  --border-primary:         var(--neutral-84);
  --border-secondary:       var(--neutral-94);
  --border-tertiary:        var(--neutral-100);
  --border-accent-brand:    var(--blue-36);
  --border-hover-primary:   var(--neutral-35);
  --border-focused:         var(--neutral-0);
  --border-focused-brand:   var(--blue-36);
  --border-selected:        var(--neutral-0);
  --border-error:           var(--red-55);
  --border-success:         var(--green-31);

  /* inverse (dark surfaces) */
  --bg-inverse-primary:   var(--neutral-0);
  --bg-inverse-secondary: var(--neutral-8);
  --bg-inverse-tertiary:  var(--neutral-13);
  --bg-inverse-pureblack: #000000;
  --fg-inverse-primary:   var(--neutral-100);
  --fg-inverse-secondary: var(--neutral-90);
  --fg-inverse-accent:    var(--blue-98);

  /* scrim / overlay */
  --scrim-dark:  rgba(0, 0, 0, 0.72);
  --scrim-light: rgba(255, 255, 255, 0.72);
  /* Protection gradients (fade-to-dark / fade-to-light over imagery) */
  --scrim-gradient-180: linear-gradient(180deg,
    rgba(35, 32, 29, 0.0) 30%,
    rgba(35, 32, 29, 0.5) 100%);
  --scrim-gradient-290: linear-gradient(290deg,
    rgba(35, 32, 29, 0.0) 45%,
    rgba(35, 32, 29, 1)   100%);

  /* ---------- Border width ---------- */
  --bw-thin:    1px;
  --bw-default: 1.5px;
  --bw-thicker: 2px;
  --bw-object:  4px;

  /* ---------- Radius ---------- */
  --r-none: 0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-4xl: 32px;
  --r-full: 9999px;
  /* Component radius conventions (from Button tokens) */
  --r-btn-xsmall: 12px;
  --r-btn-small:  14px;
  --r-btn-medium: 18px;
  --r-btn-large:  24px;

  /* ---------- Spacing (2px root scale: 1x=2, 2x=4, 4x=8, 8x=16, ...) ---------- */
  --sp-0: 0;
  --sp-0-5: 1px;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-8: 16px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-14: 28px;
  --sp-16: 32px;
  --sp-20: 40px;
  --sp-24: 48px;
  --sp-32: 64px;
  --sp-40: 80px;
  --sp-56: 112px;
  --sp-80: 160px;

  /* ---------- Elevation / shadow ----------
     System has two states: default (rest) and pressed. Inner shadows are
     not part of the system — all elevation is outer, soft, warm-black. */
  --shadow-default: 0 8px 20px rgba(0, 0, 0, 0.04);
  --shadow-pressed: 0 3px 5px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.08);

  /* ---------- Opacity states ---------- */
  --op-disabled:       0.7;
  --op-unselected:     0.65;
  --op-hover:          0.15;
  --op-pressed:        0.04;
  --op-scrim:          0.72;
  --op-inv-disabled:   0.3;
  --op-inv-hover:      0.16;
  --op-inv-pressed:    0.08;

  /* Press-state scale (pre-transform) — used by Pressable components */
  --scale-pressed: 0.95;
  --scale-pressed-large: 0.98;

  /* ---------- Motion ---------- */
  --ease-accel-decel-fastest: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-decelerate:          cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accelerate:          cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fastest: 120ms;
  --dur-fast:    180ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;
}

/* =========================================================================
   Typography system (Display / Header / Subheader / Body / Label)
   Scale: 1.125 modular ratio, root 14px. Weights are 400 (regular) and
   500 (medium). Medium is used for ALL display/header/subheader/label —
   Body is the only 400-weight role.
   ========================================================================= */
:root {
  /* Display */
  --t-display-lg-size: 117px;  --t-display-lg-lh: 100%; --t-display-lg-ls: -3.6%; --t-display-lg-w: 500;
  --t-display-md-size: 92px;   --t-display-md-lh: 100%; --t-display-md-ls: -3.4%; --t-display-md-w: 500;
  --t-display-sm-size: 65px;   --t-display-sm-lh: 100%; --t-display-sm-ls: -3.4%; --t-display-sm-w: 500;
  --t-display-xs-size: 58px;   --t-display-xs-lh: 100%; --t-display-xs-ls: -3.4%; --t-display-xs-w: 500;

  /* Header */
  --t-header-lg-size: 45px;    --t-header-lg-lh: 100%; --t-header-lg-ls: -3%;    --t-header-lg-w: 500;
  --t-header-md-size: 40px;    --t-header-md-lh: 100%; --t-header-md-ls: -3%;    --t-header-md-w: 500;
  --t-header-sm-size: 36px;    --t-header-sm-lh: 100%; --t-header-sm-ls: -3%;    --t-header-sm-w: 500;

  /* Subheader */
  --t-subheader-lg-size: 32px; --t-subheader-lg-lh: 110%; --t-subheader-lg-ls: -2.8%; --t-subheader-lg-w: 500;
  --t-subheader-md-size: 28px; --t-subheader-md-lh: 110%; --t-subheader-md-ls: -2.8%; --t-subheader-md-w: 500;
  --t-subheader-sm-size: 25px; --t-subheader-sm-lh: 112%; --t-subheader-sm-ls: -2.8%; --t-subheader-sm-w: 500;
  --t-subheader-xs-size: 22px; --t-subheader-xs-lh: 114%; --t-subheader-xs-ls: -2.4%; --t-subheader-xs-w: 500;

  /* Body (regular 400) */
  --t-body-xl-size: 20px; --t-body-xl-lh: 120%; --t-body-xl-ls: -2.4%; --t-body-xl-w: 400;
  --t-body-lg-size: 18px; --t-body-lg-lh: 145%; --t-body-lg-ls: -2.4%; --t-body-lg-w: 400;
  --t-body-md-size: 16px; --t-body-md-lh: 150%; --t-body-md-ls: -1.4%; --t-body-md-w: 400;
  --t-body-sm-size: 14px; --t-body-sm-lh: 140%; --t-body-sm-ls: -1.4%; --t-body-sm-w: 400;
  --t-body-xs-size: 11px; --t-body-xs-lh: 140%; --t-body-xs-ls: -1.4%; --t-body-xs-w: 400;

  /* Label (medium 500) */
  --t-label-xl-size: 20px; --t-label-xl-lh: 120%; --t-label-xl-ls: -2.4%; --t-label-xl-w: 500;
  --t-label-lg-size: 18px; --t-label-lg-lh: 120%; --t-label-lg-ls: -2.4%; --t-label-lg-w: 500;
  --t-label-md-size: 16px; --t-label-md-lh: 125%; --t-label-md-ls: -1.4%; --t-label-md-w: 500;
  --t-label-sm-size: 14px; --t-label-sm-lh: 125%; --t-label-sm-ls: -1.4%; --t-label-sm-w: 500;
  --t-label-xs-size: 11px; --t-label-xs-lh: 125%; --t-label-xs-ls: -1.4%; --t-label-xs-w: 500;
}

/* ---------- Typography utility classes ---------- */
html { font-family: var(--font-family-default); color: var(--fg-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; }

.t-display-lg { font: var(--t-display-lg-w) var(--t-display-lg-size)/var(--t-display-lg-lh) var(--font-family-default); letter-spacing: var(--t-display-lg-ls); }
.t-display-md { font: var(--t-display-md-w) var(--t-display-md-size)/var(--t-display-md-lh) var(--font-family-default); letter-spacing: var(--t-display-md-ls); }
.t-display-sm { font: var(--t-display-sm-w) var(--t-display-sm-size)/var(--t-display-sm-lh) var(--font-family-default); letter-spacing: var(--t-display-sm-ls); }
.t-display-xs { font: var(--t-display-xs-w) var(--t-display-xs-size)/var(--t-display-xs-lh) var(--font-family-default); letter-spacing: var(--t-display-xs-ls); }

.t-header-lg  { font: var(--t-header-lg-w) var(--t-header-lg-size)/var(--t-header-lg-lh) var(--font-family-default); letter-spacing: var(--t-header-lg-ls); }
.t-header-md  { font: var(--t-header-md-w) var(--t-header-md-size)/var(--t-header-md-lh) var(--font-family-default); letter-spacing: var(--t-header-md-ls); }
.t-header-sm  { font: var(--t-header-sm-w) var(--t-header-sm-size)/var(--t-header-sm-lh) var(--font-family-default); letter-spacing: var(--t-header-sm-ls); }

.t-subheader-lg { font: var(--t-subheader-lg-w) var(--t-subheader-lg-size)/var(--t-subheader-lg-lh) var(--font-family-default); letter-spacing: var(--t-subheader-lg-ls); }
.t-subheader-md { font: var(--t-subheader-md-w) var(--t-subheader-md-size)/var(--t-subheader-md-lh) var(--font-family-default); letter-spacing: var(--t-subheader-md-ls); }
.t-subheader-sm { font: var(--t-subheader-sm-w) var(--t-subheader-sm-size)/var(--t-subheader-sm-lh) var(--font-family-default); letter-spacing: var(--t-subheader-sm-ls); }
.t-subheader-xs { font: var(--t-subheader-xs-w) var(--t-subheader-xs-size)/var(--t-subheader-xs-lh) var(--font-family-default); letter-spacing: var(--t-subheader-xs-ls); }

.t-body-xl { font: var(--t-body-xl-w) var(--t-body-xl-size)/var(--t-body-xl-lh) var(--font-family-default); letter-spacing: var(--t-body-xl-ls); }
.t-body-lg { font: var(--t-body-lg-w) var(--t-body-lg-size)/var(--t-body-lg-lh) var(--font-family-default); letter-spacing: var(--t-body-lg-ls); }
.t-body-md { font: var(--t-body-md-w) var(--t-body-md-size)/var(--t-body-md-lh) var(--font-family-default); letter-spacing: var(--t-body-md-ls); }
.t-body-sm { font: var(--t-body-sm-w) var(--t-body-sm-size)/var(--t-body-sm-lh) var(--font-family-default); letter-spacing: var(--t-body-sm-ls); }
.t-body-xs { font: var(--t-body-xs-w) var(--t-body-xs-size)/var(--t-body-xs-lh) var(--font-family-default); letter-spacing: var(--t-body-xs-ls); }

.t-label-xl { font: var(--t-label-xl-w) var(--t-label-xl-size)/var(--t-label-xl-lh) var(--font-family-default); letter-spacing: var(--t-label-xl-ls); }
.t-label-lg { font: var(--t-label-lg-w) var(--t-label-lg-size)/var(--t-label-lg-lh) var(--font-family-default); letter-spacing: var(--t-label-lg-ls); }
.t-label-md { font: var(--t-label-md-w) var(--t-label-md-size)/var(--t-label-md-lh) var(--font-family-default); letter-spacing: var(--t-label-md-ls); }
.t-label-sm { font: var(--t-label-sm-w) var(--t-label-sm-size)/var(--t-label-sm-lh) var(--font-family-default); letter-spacing: var(--t-label-sm-ls); }
.t-label-xs { font: var(--t-label-xs-w) var(--t-label-xs-size)/var(--t-label-xs-lh) var(--font-family-default); letter-spacing: var(--t-label-xs-ls); }

/* Semantic heading defaults */
h1 { font: 500 var(--t-header-lg-size)/var(--t-header-lg-lh) var(--font-family-default); letter-spacing: var(--t-header-lg-ls); margin: 0; }
h2 { font: 500 var(--t-subheader-lg-size)/var(--t-subheader-lg-lh) var(--font-family-default); letter-spacing: var(--t-subheader-lg-ls); margin: 0; }
h3 { font: 500 var(--t-subheader-md-size)/var(--t-subheader-md-lh) var(--font-family-default); letter-spacing: var(--t-subheader-md-ls); margin: 0; }
h4 { font: 500 var(--t-subheader-sm-size)/var(--t-subheader-sm-lh) var(--font-family-default); letter-spacing: var(--t-subheader-sm-ls); margin: 0; }
p  { font: 400 var(--t-body-md-size)/var(--t-body-md-lh) var(--font-family-default); letter-spacing: var(--t-body-md-ls); margin: 0; }
small { font: 400 var(--t-body-sm-size)/var(--t-body-sm-lh) var(--font-family-default); letter-spacing: var(--t-body-sm-ls); }
code, pre { font-family: var(--font-family-mono); font-size: 0.95em; }