@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Inconsolata:wght@400;600&display=swap");

/* ── styles.css ── */
/* FredianIA — design system entry point.
   Consumers link this one file. Import list only, no rules here. */
/* ── tokens/fonts.css ── */
/* Brand typefaces are Segoe UI (interface) and Consolas (code/metrics).
   Both are Microsoft system fonts and are NOT redistributable, so the stack asks
   for them first and falls back to the closest Google Fonts equivalents:
     Segoe UI -> Open Sans    (humanist sans, similar x-height and rhythm)
     Consolas -> Inconsolata  (same technical, slightly narrow monospace feel)
   Replace this @import with @font-face rules if licensed webfont files arrive. */


/* ── styles.css ── */

/* ── tokens/colors.css ── */
:root {
}

/* ── styles.css ── */

/* ── tokens/typography.css ── */
:root { /* @kind font */

  /* Scale (p.21) — max three levels per screen or page */
  --fs-display: 56px;  --lh-display: 64px;
  --fs-h1: 40px;       --lh-h1: 48px;
  --fs-h2: 28px;       --lh-h2: 36px;
  --fs-h3: 22px;       --lh-h3: 30px;   /* addition: sub-blocks inside dense product UI */
  --fs-body: 18px;     --lh-body: 28px;
  --fs-body-sm: 16px;  --lh-body-sm: 24px; /* addition: dense tables and cards */
  --fs-label: 14px;    --lh-label: 20px;
  --fs-micro: 12px;    --lh-micro: 16px;   /* addition: eyebrows, table heads, metadata */

  /* Tracking (p.21) */
  --tracking-display: -0.01em;
  --tracking-body: 0em;
}

/* ── styles.css ── */

/* ── tokens/spacing.css ── */
:root {
}

/* ── styles.css ── */

/* ── tokens/shape.css ── */
:root {
}

/* ── styles.css ── */

/* ── tokens/motion.css ── */
:root { /* @kind other */
}

/* ── styles.css ── */

/* ── css/base.css ── */
/* Resets and editorial defaults. Product surfaces sit on --surface-page. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--action-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--sp-4); }

code, pre, .fia-mono { font-family: var(--font-mono); }

/* ---- Type utilities ---- */
.fia-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-display); }
.fia-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: var(--tracking-display); }
.fia-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
.fia-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.fia-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.fia-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.fia-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); }
.fia-micro { font-size: var(--fs-micro); line-height: var(--lh-micro); }
.fia-caps {
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.fia-secondary { color: var(--text-secondary); }
.fia-on-navy { color: var(--text-inverse); }
.fia-on-navy-muted { color: var(--text-on-navy-muted); }

/* ---- Layout helpers ---- */
.fia-stack { display: flex; flex-direction: column; gap: var(--sp-16); }
.fia-row { display: flex; align-items: center; gap: var(--sp-16); }
.fia-grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr));
  gap: var(--grid-gutter-desktop);
  padding-inline: var(--grid-margin-desktop);
}
@media (max-width: 720px) {
  .fia-grid-12 {
    grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
    gap: var(--grid-gutter-mobile);
    padding-inline: var(--grid-margin-mobile);
  }
}

/* ── styles.css ── */

/* ── css/components.css ── */
/* FredianIA component classes.
   Border before shadow. Space before line. Hierarchy before ornament. */

/* ============================ Eyebrow / section label ==================== */
.fia-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-12); color: var(--text-link); }
.fia-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.fia-eyebrow > span { font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.fia-eyebrow--on-navy { color: var(--fia-electric-blue); }

/* ============================ Button ==================================== */
.fia-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  font-family: var(--font-sans); font-size: var(--fs-label); line-height: 1;
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-body);
  height: 40px; padding: 0 var(--sp-16);
  border: var(--border-width) solid transparent; border-radius: var(--radius-control);
  background: transparent; color: var(--text-primary);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.fia-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fia-btn--sm { height: 32px; padding: 0 var(--sp-12); font-size: var(--fs-micro); }
.fia-btn--lg { height: 48px; padding: 0 var(--sp-24); font-size: var(--fs-body-sm); }

.fia-btn--primary { background: var(--action-primary); color: var(--text-inverse); }
.fia-btn--primary:hover { background: var(--action-primary-hover); }
.fia-btn--primary:active { background: var(--action-primary-active); }

.fia-btn--secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); }
.fia-btn--secondary:hover { background: var(--action-secondary-hover); border-color: var(--action-primary); }

.fia-btn--link { padding: 0; height: auto; color: var(--text-link); }
.fia-btn--link:hover { color: var(--action-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

.fia-btn--danger { background: var(--surface-card); color: var(--text-error); border-color: color-mix(in srgb, var(--fia-error) 40%, var(--fia-white)); }
.fia-btn--danger:hover { background: var(--fia-error-tint); border-color: var(--fia-error); }

.fia-btn--on-navy { background: var(--fia-on-navy-alpha-08); color: var(--text-inverse); border-color: var(--border-on-navy); }
.fia-btn--on-navy:hover { background: var(--fia-on-navy-alpha-16); }
.fia-btn--on-navy:focus-visible { box-shadow: var(--focus-ring-on-navy); }

.fia-btn:disabled, .fia-btn[aria-disabled="true"] {
  background: var(--action-disabled-surface); color: var(--action-disabled-text);
  border-color: transparent; cursor: not-allowed;
}
.fia-btn[data-loading="true"] { color: transparent; position: relative; pointer-events: none; }
.fia-btn[data-loading="true"]::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--fia-on-navy-alpha-16); border-top-color: var(--text-inverse);
  animation: fia-spin 700ms linear infinite;
}
@keyframes fia-spin { to { transform: rotate(360deg); } }

/* ============================ Icon button =============================== */
.fia-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-control);
  background: var(--surface-card); color: var(--text-primary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.fia-icon-btn:hover { background: var(--action-secondary-hover); border-color: var(--action-primary); }
.fia-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fia-icon-btn--primary { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-inverse); }
.fia-icon-btn--primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.fia-icon-btn--quiet { background: transparent; border-color: transparent; }
.fia-icon-btn--sm { width: 32px; height: 32px; }

/* Icons: 24x24 grid, 2px optical stroke, square terminals, single colour */
/* The svg carries its own width/height (24 by default, set by Icon or FiaIcons). */
.fia-icon { flex: none; display: block; stroke-width: var(--icon-stroke); stroke-linecap: square; stroke-linejoin: miter; }
.fia-icon:not([width]) { width: var(--icon-size); height: var(--icon-size); }

/* ============================ Field ==================================== */
.fia-field { display: flex; flex-direction: column; gap: var(--sp-8); }
.fia-field__label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); color: var(--text-primary); }
.fia-field__hint { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-secondary); }
.fia-field__error { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-error); }

.fia-input, .fia-select, .fia-textarea {
  width: 100%; height: 40px; padding: 0 var(--sp-12);
  font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm);
  color: var(--text-primary); background: var(--surface-card);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-control);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.fia-textarea { height: auto; min-height: 96px; padding: var(--sp-12); resize: vertical; }
.fia-input::placeholder, .fia-textarea::placeholder { color: var(--action-disabled-text); }
.fia-input:hover, .fia-select:hover { border-color: var(--fia-slate); }
.fia-input:focus, .fia-select:focus, .fia-textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--fia-signal-tint); }
.fia-input[aria-invalid="true"], .fia-select[aria-invalid="true"] { border-color: var(--fia-error); }
.fia-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--fia-error-tint); }
.fia-input:disabled, .fia-select:disabled { background: var(--surface-muted); color: var(--action-disabled-text); cursor: not-allowed; }
.fia-select { appearance: none; padding-right: var(--sp-32); background-image: linear-gradient(45deg, transparent 49%, var(--fia-slate) 50%), linear-gradient(-45deg, transparent 49%, var(--fia-slate) 50%); background-size: 6px 6px; background-position: right 16px center, right 10px center; background-repeat: no-repeat; }

/* ============================ Chip / filter ============================= */
.fia-chip {
  display: inline-flex; align-items: center; gap: var(--sp-8); height: 32px; padding: 0 var(--sp-12);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--text-primary);
  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-control); cursor: pointer;
}
.fia-chip:hover { border-color: var(--action-primary); }
.fia-chip[aria-pressed="true"] { background: var(--fia-signal-tint); border-color: var(--action-primary); color: var(--action-primary); }

/* ============================ Card / panel ============================= */
.fia-card {
  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-panel); padding: var(--sp-24);
}
.fia-card--flush { padding: 0; overflow: hidden; }
.fia-card--inverse { background: var(--surface-inverse); border-color: transparent; color: var(--text-inverse); }
.fia-card--data { border-radius: var(--radius-data); }
.fia-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-16); margin-bottom: var(--sp-16); }
.fia-card__header > *:last-child { flex: none; }
.fia-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.fia-overlay { box-shadow: var(--elevation-01); }

/* ============================ KPI ====================================== */
.fia-kpi { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-panel); padding: var(--sp-16) var(--sp-24); }
.fia-kpi__label { font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-secondary); }
.fia-kpi__row { display: flex; align-items: baseline; gap: var(--sp-12); flex-wrap: wrap; }
.fia-kpi__value { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--text-primary); white-space: nowrap; }
.fia-kpi__delta { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text-success); }
.fia-kpi__delta[data-trend="down"] { color: var(--text-error); }
.fia-kpi__delta[data-trend="flat"] { color: var(--text-secondary); }
.fia-kpi__foot { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-secondary); }
.fia-kpi--inverse { background: var(--surface-inverse); border-color: transparent; }
.fia-kpi--inverse .fia-kpi__label { color: var(--text-on-navy-muted); }
.fia-kpi--inverse .fia-kpi__value { color: var(--text-inverse); }

/* ============================ Table ==================================== */
.fia-table-wrap { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-data); overflow: hidden; }
.fia-table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); line-height: var(--lh-label); }
.fia-table thead th {
  text-align: left; padding: var(--sp-12) var(--sp-16); background: var(--surface-page);
  font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-secondary);
  border-bottom: var(--border-width) solid var(--border-subtle); white-space: nowrap;
}
.fia-table tbody td { padding: var(--sp-16); border-bottom: var(--border-width) solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; }
.fia-table tbody tr:last-child td { border-bottom: none; }
.fia-table tbody tr:hover td { background: var(--surface-page); }
.fia-table__strong { font-weight: var(--fw-semibold); }
.fia-table__num { text-align: right; font-family: var(--font-mono); font-size: var(--fs-label); }

/* ============================ Badge ==================================== */
.fia-badge {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  height: 24px; padding: 0 var(--sp-12); border-radius: var(--radius-status);
  font-size: var(--fs-micro); line-height: 1; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  background: var(--surface-muted); color: var(--text-secondary);
}
.fia-badge::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.fia-badge--active, .fia-badge--success { background: var(--fia-success-tint); color: var(--text-success); }
.fia-badge--attention, .fia-badge--warning { background: var(--fia-warning-tint); color: var(--text-warning); }
.fia-badge--error { background: var(--fia-error-tint); color: var(--text-error); }
.fia-badge--info { background: var(--fia-signal-tint); color: var(--text-link); }
.fia-badge--on-navy { background: var(--fia-on-navy-alpha-08); color: var(--text-inverse); }

/* Metadata tag — square, no dot (GitHub-style repo facts) */
.fia-tag { display: inline-flex; align-items: center; gap: var(--sp-8); height: 24px; padding: 0 var(--sp-8); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-card); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-secondary); }

/* ============================ Alert ==================================== */
.fia-alert { display: flex; gap: var(--sp-16); padding: var(--sp-16) var(--sp-24); border-radius: var(--radius-panel); background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); }
.fia-alert__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-status); background: var(--fia-signal-tint); color: var(--text-link); font-weight: var(--fw-bold); }
.fia-alert__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.fia-alert__title { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: var(--fw-semibold); }
.fia-alert__text { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-secondary); }
.fia-alert--attention .fia-alert__icon { background: var(--fia-warning-tint); color: var(--text-warning); }
.fia-alert--error .fia-alert__icon { background: var(--fia-error-tint); color: var(--text-error); }
.fia-alert--success .fia-alert__icon { background: var(--fia-success-tint); color: var(--text-success); }
.fia-alert--inverse { background: var(--surface-inverse); border-color: transparent; color: var(--text-inverse); }
.fia-alert--inverse .fia-alert__text { color: var(--text-on-navy-muted); }
.fia-alert--inverse .fia-alert__icon { background: var(--fia-electric-blue); color: var(--text-inverse); }

/* ============================ Side navigation ========================== */
.fia-sidenav { display: flex; flex-direction: column; gap: var(--sp-32); width: 232px; padding: var(--sp-24) var(--sp-16); background: var(--surface-inverse); color: var(--text-inverse); }
.fia-sidenav__brand { padding: 0 var(--sp-8); }
.fia-sidenav__brand img { height: 28px; display: block; }
.fia-sidenav__group { display: flex; flex-direction: column; gap: var(--sp-4); }
.fia-sidenav__item { display: flex; align-items: center; gap: var(--sp-12); height: 40px; padding: 0 var(--sp-12); border-radius: var(--radius-control); color: var(--text-on-navy-muted); font-size: var(--fs-label); font-weight: var(--fw-semibold); cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; font-family: var(--font-sans); }
.fia-sidenav__item:hover { background: var(--fia-on-navy-alpha-08); color: var(--text-inverse); }
.fia-sidenav__item[aria-current="page"] { background: var(--action-primary); color: var(--text-inverse); }
.fia-sidenav__item:focus-visible { outline: none; box-shadow: var(--focus-ring-on-navy); }

/* ============================ Top bar ================================== */
.fia-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); padding: var(--sp-24) var(--sp-32); background: var(--surface-card); border-bottom: var(--border-width) solid var(--border-subtle); }
.fia-topbar__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }

/* ============================ Code ===================================== */
.fia-code { background: var(--surface-inverse); border-radius: var(--radius-panel); padding: var(--sp-24); font-family: var(--font-mono); font-size: var(--fs-label); line-height: 22px; color: var(--fia-on-navy-alpha-72); overflow-x: auto; }
.fia-code b { color: var(--fia-electric-blue); font-weight: var(--fw-regular); }
.fia-code .fia-code__prompt { color: var(--text-inverse); }

/* ============================ Charts =================================== */
.fia-bars { display: flex; align-items: flex-end; gap: var(--sp-8); height: 140px; }
.fia-bars__bar { flex: 1; border-radius: var(--radius-data); background: var(--fia-cloud); min-height: 2px; }
.fia-bars__bar[data-emphasis="true"] { background: var(--chart-01); }
.fia-bars__axis { display: flex; gap: var(--sp-8); margin-top: var(--sp-8); }
.fia-bars__axis > span { flex: 1; text-align: center; font-size: var(--fs-micro); color: var(--text-secondary); }
.fia-hbar { display: grid; grid-template-columns: 96px 1fr 48px; align-items: center; gap: var(--sp-12); }
.fia-hbar__label { font-size: var(--fs-label); color: var(--text-primary); }
.fia-hbar__track { display: block; height: 20px; background: var(--surface-muted); border-radius: var(--radius-data); }
.fia-hbar__fill { display: block; height: 100%; background: var(--chart-01); border-radius: var(--radius-data); }
.fia-hbar__value { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-secondary); text-align: right; }
.fia-legend { display: flex; gap: var(--sp-16); flex-wrap: wrap; }
.fia-legend__item { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-micro); color: var(--text-secondary); }
.fia-legend__swatch { display: block; width: 12px; height: 12px; border-radius: var(--radius-data); background: var(--chart-01); }

/* ============================ Divider ================================== */
.fia-divider { height: 1px; background: var(--border-subtle); border: 0; }
.fia-divider--on-navy { background: var(--border-on-navy); }

/* ── styles.css ── */


/* ── tokens/fonts.css ── */

/* ── tokens/colors.css ── */

/* ── tokens/typography.css ── */

/* ── tokens/spacing.css ── */

/* ── tokens/shape.css ── */

/* ── tokens/motion.css ── */

/* ── css/base.css ── */

/* ── css/components.css ── */