/* ============================================================
   AiON Design System — Colors & Type
   Foundations file. Import on every page.
   ============================================================ */

/* IBM Plex Mono is still loaded from Google Fonts (open source);
   Open Sans is now served from local TTFs in fonts/ — these are the
   official AiON brand files supplied by the user. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/OpenSans-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("fonts/OpenSans-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/OpenSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/OpenSans-Semibold.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("fonts/OpenSans-SemiboldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/OpenSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/OpenSans-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/OpenSans-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url("fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
}

:root {
  /* ============================================================
     COLOR — Brand
     The AiON crimson, sampled from the wordmark gradient (#d61e25)
     and the deeper "due-date" / accent crimson used in invoices
     (#9f0000). Use --aion-red for primary marks; --aion-red-deep
     for blocks of color, sidebars, headings on light fields.
     ============================================================ */
  --aion-red:        #d61e25;   /* logo gradient stop, vivid */
  --aion-red-deep:   #9f0000;   /* invoice accent, payment heads */
  --aion-red-ink:    #6b0000;   /* deepest, for text on cream    */
  --aion-red-tint:   #fbe9ea;   /* very light wash, hover/select */

  /* ============================================================
     COLOR — Neutrals (cool greys, paper)
     Sharp corporate palette. No tints, no warmth.
     ============================================================ */
  --ink:             #1a1a1a;   /* near-black headings           */
  --fg-1:            #333333;   /* default body text             */
  --fg-2:            #5c5c5c;   /* secondary text                */
  --fg-3:            #8a8a8a;   /* tertiary, captions            */
  --fg-4:            #b5b5b5;   /* disabled                      */

  --bg:              #ffffff;   /* page background               */
  --bg-alt:          #f7f7f7;   /* table heads, gentle bands     */
  --bg-band:         #eeeeee;   /* invoice header band           */
  --bg-card:         #f2f2f2;   /* cards, payment heads          */

  --rule:            #dddddd;   /* table & card rules            */
  --rule-strong:     #333333;   /* hairline under invoice meta   */

  /* ============================================================
     COLOR — Semantic
     Conservative; use sparingly. Crimson is reserved for brand
     and emphasis, not error.
     ============================================================ */
  --success:         #1f7a3a;
  --success-tint:    #e7f3ec;
  --warning:         #b56a00;
  --warning-tint:    #fbf1e1;
  --danger:          #b00020;
  --danger-tint:     #fbe5e9;
  --info:            #1f4a7a;
  --info-tint:       #e6edf5;

  /* ============================================================
     TYPE — Families
     Open Sans is the company face (already in use across
     invoices/quotes). IBM Plex Mono pairs cleanly for code,
     IDs, refs, IBANs, and tabular numerals. Both open source.
     ============================================================ */
  --font-sans:       "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:       "IBM Plex Mono", ui-monospace, "SFMono-Regular",
                     Menlo, Consolas, monospace;
  --font-display:    "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* ============================================================
     TYPE — Scale (rem-based, 16px root)
     Slight modular scale. Keep weights conservative: 300/400/600/700.
     ============================================================ */
  --t-display:       3rem;       /* 48px — page H1 (Invoice, Quote) */
  --t-h1:            2rem;       /* 32px */
  --t-h2:            1.5rem;     /* 24px */
  --t-h3:            1.25rem;    /* 20px */
  --t-h4:            1.0625rem;  /* 17px */
  --t-body:          0.875rem;   /* 14px — default body */
  --t-small:         0.75rem;    /* 12px — meta */
  --t-micro:         0.625rem;   /* 10px — footer, contact strip */

  --w-light:         300;
  --w-regular:       400;
  --w-medium:        500;
  --w-semibold:      600;
  --w-bold:          700;

  --lh-tight:        1.15;
  --lh-snug:         1.3;
  --lh-normal:       1.5;
  --lh-loose:        1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;     /* used on "S O F T W A R E" lockup */
  --tracking-xwide:  0.18em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ============================================================
     RADII — Sharp by brand mandate
     0px is the default. Tiny radius reserved for soft chips.
     ============================================================ */
  --r-0: 0px;
  --r-sm: 2px;
  --r-md: 3px;          /* MAX */
  --r-pill: 999px;      /* only for status dots / badges */

  /* ============================================================
     ELEVATION — Restrained. No floaty cards.
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.04), 0 0 0 1px var(--rule);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--rule);
  --shadow-3: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-press: inset 0 1px 0 rgba(0,0,0,0.06);

  /* ============================================================
     BORDERS
     ============================================================ */
  --border-thin:    1px solid var(--rule);
  --border-strong:  1px solid var(--rule-strong);
  --border-accent:  10mm solid var(--aion-red-deep); /* legacy invoice */
  --accent-bar:     4px solid var(--aion-red-deep);  /* web variant */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-emph:     cubic-bezier(.2, 0, 0, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these for content; avoid styling raw tags ad-hoc.
   ============================================================ */

.t-display,
.aion-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-light);   /* matches invoice "Invoice" h1 */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.t-h1, h1.aion {
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.t-h2, h2.aion {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.t-h3, h3.aion {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.t-h4, h4.aion {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.t-body, p.aion {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.t-small {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-micro {
  font-size: var(--t-micro);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--aion-red-deep);
}

.t-mono, code.aion, .aion-ref {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0;
}

/* The signature brand lockup — italic "AiON" with wide-tracked
   "SOFTWARE" beneath. Used in headers and footers. */
.aion-lockup {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-normal);
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.aion-lockup .word {
  font-style: italic;
  font-size: 1.5em;
  color: var(--aion-red-deep);
}
.aion-lockup .tag {
  font-style: normal;
  font-size: 0.55em;
  letter-spacing: var(--tracking-xwide);
  margin-top: 0.25em;
  color: var(--fg-1);
}