/* ===========================================================
   GLOBAL — Brand foundation (Modern Industrial · royal-blue system)
   Palette matched to the website (globalreadymix.in), keyed to the
   new logo blue. Variable names kept (--green*) to avoid churn; they
   now render blue. Shared across letterhead, cards, signatures, invoice.
   =========================================================== */
/* Fonts are bundled locally (fonts/) so the app works offline and inside
   Tauri on desktop + mobile. Re-download with fonts/README.md if updating. */
@import url('fonts/fonts.css');

:root{
  --green:#1456bd;      /* primary — royal blue, matched to logo (site --blue) */
  --green-d:#0c2a50;    /* deepest navy — chrome / hover (site --blue-d) */
  --green-l:#3a8cf0;    /* bright accent — logo highlight blue (site --blue-l) */
  --sage:#78818f;       /* muted grey — ticks / faint marks (darkened for print) */
  --sage-d:#4d545e;     /* steel grey — small labels (darkened for print) */
  --mint:#cdddf5;       /* light royal — borders / chips (site --blue-2) */
  --mint-2:#eaf0fc;     /* very light royal tint (site --blue-x) */
  --mint-3:#eef3fc;     /* lightest royal header tint */
  --ink:#16191c;        /* primary text (site --ink) */
  --muted:#33383f;      /* secondary text (darkened: greys print washed out) */
  --paper:#FFFFFF;
  --paper-2:#eef1f6;    /* section backgrounds (site --paper) */
  --line:#d4d8de;       /* hairlines (site --line-2) */
  --line-strong:#b9c1cc;/* stronger hairline */

  --disp:'Saira Condensed', sans-serif;
  --body:'Saira', sans-serif;
  --mono:'Space Mono', monospace;
}

*{box-sizing:border-box;}

/* ---- type helpers ---- */
.disp{font-family:var(--disp);font-weight:800;line-height:.92;letter-spacing:-.01em;text-transform:uppercase;}
.body{font-family:var(--body);}
.mono{font-family:var(--mono);}
.kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.34em;font-size:9px;font-weight:700;}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

/* ---- reusable bits ---- */
.gx-rule{height:1px;background:var(--line);border:0;width:100%;}
.gx-rule-strong{height:2px;background:var(--green-d);border:0;width:100%;}

/* registration / corner ticks (industrial feel) */
.tick{position:absolute;width:14px;height:14px;}
.tick::before,.tick::after{content:'';position:absolute;background:var(--sage);}
.tick::before{width:100%;height:1.5px;top:0;left:0;}
.tick::after{height:100%;width:1.5px;top:0;left:0;}
.tick.tr{transform:scaleX(-1);}
.tick.bl{transform:scaleY(-1);}
.tick.br{transform:scale(-1,-1);}

.wm{display:flex;flex-direction:column;line-height:1;}
.wm .wm-top{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.wm .wm-sub{font-family:var(--mono);text-transform:uppercase;font-weight:700;}

.spec{display:flex;flex-direction:column;gap:2px;}
.spec .lbl{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-d);}
.spec .val{font-family:var(--body);font-weight:500;color:var(--ink);}

.framed{border:1px solid var(--line);}
.sheet{position:relative;background:var(--paper);color:var(--ink);font-family:var(--body);overflow:hidden;}

/* Disable iOS/WKWebView text inflation. Without this, WebKit enlarges longer
   text runs (the subject line, the terms bullets) while leaving table cells
   and short labels alone — the point sizes we set stop being honoured and the
   sheet looks inconsistent. Applies on screen AND in the exported SVG, since
   this file is inlined into it. */
html,body,.lh-sheet,.lh-sheet *{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

html,body{margin:0;padding:0;background:#e7e4de;}

/* On-screen framing: centre each piece on a soft backdrop.
   @media print strips it back to exact edge-to-edge pages. */
.stage{display:flex;flex-direction:column;align-items:center;gap:28px;padding:40px 20px;}
.piece{background:#fff;box-shadow:0 8px 40px rgba(20,30,45,.22);}

@media print{
  html,body{background:#fff;}
  .stage{display:block;padding:0;gap:0;}
  .piece{box-shadow:none;margin:0;break-after:page;}
  .piece:last-child{break-after:auto;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ===========================================================
   UNIFIED LETTERHEAD — one A4 system across all companies
   =========================================================== */
.lh-sheet{width:210mm;height:297mm;background:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;font-family:var(--body);color:var(--ink);}
.lh-sheet .lh-edge{height:8px;background:var(--green-d);flex-shrink:0;}
.lh-sheet .lh-head{padding:7mm 16mm 4.5mm;display:flex;align-items:center;justify-content:space-between;gap:10mm;background:var(--mint-3);}
.lh-sheet .lh-brand{display:flex;align-items:center;gap:5mm;}
.lh-sheet .lh-brand img{height:18mm;display:block;}
.lh-sheet .lh-wm{display:flex;flex-direction:column;}
.lh-sheet .lh-wm-top{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.88;letter-spacing:.005em;}
.lh-sheet .lh-wm-top + .lh-wm-top{margin-top:.4mm;}
.lh-sheet .lh-wm-sub{font-family:var(--body);text-transform:uppercase;font-weight:600;letter-spacing:.16em;font-size:7.2pt;color:var(--sage-d);margin-top:1.6mm;}
.lh-sheet .lh-contact{text-align:right;display:flex;flex-direction:column;gap:1.1mm;}
.lh-sheet .lh-contact span{font-family:var(--body);font-size:9.4pt;font-weight:500;color:var(--ink);letter-spacing:.01em;line-height:1.3;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.lh-sheet .lh-contact .eml{font-weight:500;font-size:9.4pt;letter-spacing:0;color:var(--green-d);}
.lh-sheet .lh-contact .web{color:var(--green);}
.lh-sheet .lh-rule{height:2px;background:var(--green-d);border:0;flex-shrink:0;}
.lh-sheet .gstin-strip{background:var(--mint-2);border-bottom:1px solid var(--line);padding:2.2mm 16mm;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:6mm;overflow:hidden;}
.lh-sheet .gstin-strip .g{font-family:var(--body);font-weight:700;font-size:9.8pt;letter-spacing:.12em;color:var(--green-d);flex:0 0 auto;white-space:nowrap;}
.lh-sheet .gstin-strip .g b{font-family:var(--body);color:var(--sage-d);font-weight:600;margin-right:2mm;letter-spacing:.08em;font-size:8pt;}
.lh-sheet .gstin-strip .cat{font-family:var(--body);font-size:7.9pt;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--sage-d);text-align:right;min-width:0;flex:0 1 auto;}
.lh-sheet .lh-body{flex:1;padding:8mm 16mm 4mm;display:flex;flex-direction:column;}
.lh-sheet .lh-foot{flex-shrink:0;}
.lh-sheet .lh-foot .fr{background:var(--paper-2);padding:4mm 16mm;display:flex;align-items:baseline;gap:6mm;border-top:1px solid var(--line);}
.lh-sheet .lh-foot .flbl{font-family:var(--body);font-size:7pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-d);flex-shrink:0;white-space:nowrap;}
.lh-sheet .lh-foot .addr{font-size:9.6pt;font-weight:600;color:var(--ink);letter-spacing:.005em;line-height:1.5;}
.lh-sheet .wmk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:130mm;opacity:.06;pointer-events:none;z-index:0;}

/* ===========================================================
   BUSINESS CARDS — stacked layout · 90 × 55 mm
   =========================================================== */
.card{width:90mm;height:55mm;background:#fff;position:relative;overflow:hidden;padding:5mm 6mm;display:flex;flex-direction:column;justify-content:space-between;}
.card .tick{position:absolute;width:4mm;height:4mm;}
.card .tick::before,.card .tick::after{content:'';position:absolute;background:var(--sage);}
.card .tick::before{width:100%;height:.5mm;top:0;left:0;}
.card .tick::after{height:100%;width:.5mm;top:0;left:0;}
.card .tick.br{right:0;bottom:0;left:auto;top:auto;transform:scale(-1,-1);}
.card .bc-wm{display:flex;flex-direction:column;line-height:.88;}
.card .bc-wm .l{font-family:var(--disp);font-weight:800;text-transform:uppercase;}
.card .bc-wm .l + .l{margin-top:.3mm;}
.card .bc-contact{display:flex;flex-direction:column;gap:.9mm;}
.card .bc-contact span{font-family:var(--mono);}
</content>