/* ============================================================
   Objektregister — design tokens
   Single source of truth. Nothing downstream hard-codes a value
   that exists here. If a screen needs a colour or a size that is
   not in this file, the token set is wrong, not the screen.
   ============================================================ */

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

:root {
  /* ---------- colour ----------
     Cool blueprint paper, land-registry ink, cadastral red.
     Five hues, no gradients, no tints beyond the alpha ramp. */
  --c-paper:      #EDF1F4;   /* app background */
  --c-sheet:      #FBFCFD;   /* card and panel surfaces */
  --c-ink:        #16232E;   /* text, borders, primary buttons */
  --c-survey:     #2E5C8A;   /* links, focus rings, factual accents */
  --c-parcel:     #B03A26;   /* follow-up, duplicates, destructive, ratings */
  --c-stamp:      #3F6B4A;   /* settled, positive, done */

  /* ink alpha ramp — the only greys in the system */
  --c-ink-70:     rgba(22, 35, 46, .70);
  --c-ink-60:     rgba(22, 35, 46, .60);
  --c-ink-40:     rgba(22, 35, 46, .40);
  --c-ink-15:     rgba(22, 35, 46, .15);
  --c-ink-08:     rgba(22, 35, 46, .08);

  /* on-photo — stamps and captions sit over uncontrolled imagery,
     so they always carry their own scrim */
  --c-on-photo:         #FFFFFF;
  --c-on-photo-good:    #B7E2C1;
  --c-on-photo-alert:   #F0A79A;
  --c-on-photo-muted:   rgba(255, 255, 255, .65);
  --c-photo-scrim:      rgba(10, 18, 25, .35);
  --c-caption-scrim:    rgba(10, 18, 25, .60);
  --c-overlay:          rgba(22, 35, 46, .80);
  --c-field:            #FFFFFF;   /* input wells sit above --c-sheet */
  --c-scrim:            rgba(22, 35, 46, .45);   /* behind an open sheet */
  --shadow-on-photo:    0 1px 3px rgba(0, 0, 0, .45);  /* keeps text legible over any image */
  --shadow-on-photo-hi: 0 1px 3px rgba(0, 0, 0, .60);
  --c-photo-veil:       linear-gradient(transparent, rgba(10, 18, 25, .86));

  /* the graph paper. Appears ONLY where a photograph is missing. */
  --c-grid:       rgba(46, 92, 138, .09);
  --grid-size:    16px;
  --grid-plate:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);

  /* ---------- type ---------- */
  --f-display: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* role            size / line-height / weight / tracking / case */
  /* The threshold: the wordmark on the sign-in cover, set like the title
     block of a file rather than a heading in a page. */
  /* "Objektregister" is one unbreakable 8.4em-wide word: the ceiling is what
     fits the 620px column (72px) and the ramp is what fits a 320px phone. */
  --t-display-hero: 700 clamp(28px, 10.2vw, 72px)/0.92 var(--f-display);
  --t-display-xl: 700 clamp(28px, 8vw, 34px)/1.02 var(--f-display);
  --t-display-l:  700 24px/1.08 var(--f-display);
  --t-display-m:  700 19px/1.14 var(--f-display);
  --t-label:      500 10px/1.2  var(--f-mono);      /* + .16em, uppercase */
  --t-data-l:     500 17px/1.25 var(--f-mono);
  --t-data-m:     400 13px/1.3  var(--f-mono);
  --t-body:       400 15px/1.5  var(--f-body);
  --t-body-s:     400 13px/1.45 var(--f-body);
  --t-micro:      400 10.5px/1.5 var(--f-mono);     /* + .1em */

  --tr-hero: .04em;   /* condensed caps at 88px need far less than a label does */
  --tr-label: .16em;
  --tr-display: .02em;
  --tr-micro: .1em;

  /* Every number in this app is compared to another number. */
  --num: "tnum" 1, "zero" 1;

  /* ---------- space ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* ---------- shape ----------
     Near-square. This is a filing system, not a consumer feed. */
  --r-sm: 2px;   /* controls, inputs, stamps */
  --r-md: 3px;   /* cards, panels */
  --r-sheet: 6px;
  --hairline: 1px solid var(--c-ink-15);
  --rule: 2px solid var(--c-ink);   /* structural divider: sheet head/foot */

  /* ---------- elevation ---------- */
  --e-1: 0 1px 0 var(--c-ink-08);
  --e-2: 0 8px 22px rgba(22, 35, 46, .12);
  --e-3: 0 -8px 40px rgba(22, 35, 46, .28);

  /* ---------- motion ---------- */
  --m-micro: 120ms ease-out;
  --m-sheet: 220ms cubic-bezier(.2, .8, .2, 1);
  --m-rule:  520ms cubic-bezier(.2, .8, .2, 1);   /* a line being ruled across the page */

  /* ---------- layout ---------- */
  --w-gate: 620px;
  --w-sheet: 720px;
  --w-max: 1300px;
  --bp-2col: 720px;
  --bp-3col: 1080px;
  --touch: 44px;   /* minimum tap target, never smaller */

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Status → colour. The only place this mapping is defined. */
:root {
  --st-spotted:   var(--c-ink-40);
  --st-requested: var(--c-survey);
  --st-received:  var(--c-survey);
  --st-viewing:   var(--c-survey);
  --st-viewed:    var(--c-stamp);
  --st-offer:     var(--c-stamp);
  --st-won:       var(--c-stamp);
  --st-out:       var(--c-ink-40);
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-micro: 1ms; --m-sheet: 1ms; --m-rule: 1ms; }
}