/* Design tokens carried over from harunzengin.com so the calculator
   reads as part of the same product family. */

:root {
  --paper:        #ffffff;
  --paper-raise:  #f6f4f0;
  --card:         #ffffff;

  --ink:          #211d19;
  --ink-dim:      #6b645a;
  --ink-faint:    #9c9385;

  --line:         #ddd4c2;
  --line-soft:    #e9e2d2;

  --red:          #CC0605;   /* matches thread.html and the logo */
  --red-dark:     #A00404;
  --red-tint:     rgba(193, 18, 28, 0.08);
  --red-tint2:    rgba(193, 18, 28, 0.16);

  --steel:        #3a4048;
  --positive:     #3f7d4a;
  --amber:        #d98324;

  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist', ui-monospace, 'SFMono-Regular', monospace;

  --notch: 10px;

  /* Measured at runtime by app.js; this is only the first-paint value. */
  --header-h: 132px;

  /* Derived, local to the calculator */
  --positive-tint: rgba(63, 125, 74, 0.10);
  --amber-tint:    rgba(217, 131, 36, 0.12);
  --steel-tint:    rgba(58, 64, 72, 0.06);

  --gap:   16px;
  --gap-s: 10px;
  --gap-l: 24px;

  --shadow-card: 0 1px 2px rgba(33, 29, 25, 0.05),
                 0 8px 24px rgba(33, 29, 25, 0.05);
}

/* The clipped corner is the signature shape on harunzengin.com.
   `.notch` clips all four; the -tl/-br variants clip one diagonal pair. */
.notch {
  clip-path: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );
}
.notch-br {
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    0 100%
  );
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper-raise);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--red-tint2); }