/* OPTIX brand tokens — source of truth for any UI in this repository.
   Derived from docs/BRAND.md (Brand Guidelines v0.1). Change the guide first, then this file. */

:root {
  /* surfaces (dark-first) */
  --optix-bg:        #000B1A;   /* Abyss Navy — page ground, product shell */
  --optix-surface:   #001A33;   /* Deep Navy — cards, panels, sidebar */
  --optix-surface-2: #0A2847;   /* raised panels, inputs */
  --optix-border:    #163457;

  /* brand */
  --optix-blue:      #0060D4;   /* the X; the single primary action per view; links */
  --optix-blue-deep: #0048A8;   /* pressed / gradient start */
  --optix-sky:       #7EB4EA;   /* eyebrows, labels on dark */
  --optix-ice:       #C0E9FE;   /* gradient end, focus rings, identifiers */
  --optix-x:         linear-gradient(135deg, #0048A8 0%, #0066D8 50%, #C0E9FE 100%);

  /* text on dark */
  --optix-text:      #FFFFFF;
  --optix-text-2:    #9FB0C6;
  --optix-text-3:    #5C6F88;

  /* readiness states — the only non-blue hues allowed in the product */
  --optix-ready:     #2BB673;   /* Carrier Ready */
  --optix-review:    #F2A93B;   /* Review Required */
  --optix-blocked:   #E5484D;   /* Blocked */
  --optix-ready-fg:    #4FD593; --optix-ready-bg:    rgba(43,182,115,.16);
  --optix-review-fg:   #FFC46A; --optix-review-bg:   rgba(242,169,59,.16);
  --optix-blocked-fg:  #FF8084; --optix-blocked-bg:  rgba(229,72,77,.18);

  /* provenance labels */
  --optix-verified:  #C0E9FE;
  --optix-inferred:  #7EB4EA;
  --optix-unknown:   #8A94A3;
  --optix-simulated: #F2C14E;   /* Signal Gold — demo data can never pass as a client record */

  /* type */
  --optix-font-head: "Montserrat", "Inter", system-ui, sans-serif;
  --optix-font-body: "Inter", system-ui, sans-serif;
  --optix-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* shape: 16 px panels · 8 px controls · 4 px badges and labels */
  --optix-radius-panel: 16px;
  --optix-radius:    8px;
  --optix-radius-sm: 4px;

  /* glass surfaces (BRAND.md "Glass surfaces") */
  --optix-glass:        rgba(0,26,51,.52);     /* Deep Navy 52 % */
  --optix-glass-raised: rgba(10,40,71,.46);    /* Raised Navy 46 % */
  --optix-glass-line:   rgba(192,233,254,.11); /* Ice hairline */
  --optix-glass-line-2: rgba(192,233,254,.20); /* hover / selected hairline */
  --optix-glass-hi:     rgba(255,255,255,.07); /* inner top highlight */
  --optix-glass-tint:   rgba(192,233,254,.14); /* selected tab / segment */
  --optix-glass-well:   rgba(0,11,26,.55);     /* recessed track behind tabs and segments */
  --optix-glass-shadow: 0 18px 48px -24px rgba(0,11,26,.9);
  --optix-glass-blur:   saturate(150%) blur(22px);
}

/* light mode — documents, exports, print */
[data-theme="light"] {
  --optix-bg:        #F0F2F5;   /* Fog */
  --optix-surface:   #FFFFFF;
  --optix-surface-2: #F0F2F5;
  --optix-border:    #D9DEE5;   /* Mist */
  --optix-text:      #383C44;   /* Graphite */
  --optix-text-2:    #8A94A3;   /* Steel */
  --optix-text-3:    #B4BCC8;
  --optix-ready-fg:   #157A4A; --optix-ready-bg:   #E3F6EC;
  --optix-review-fg:  #8A5A0B; --optix-review-bg:  #FDF0D8;
  --optix-blocked-fg: #A3262A; --optix-blocked-bg: #FBE3E4;
  --optix-verified:  #0060D4;
  --optix-inferred:  #4A7FB5;
  --optix-unknown:   #8A94A3;
  --optix-simulated: #8A5A0B;
}

/* ---------- base ---------- */
html, body {
  background: var(--optix-bg);
  color: var(--optix-text);
  font-family: var(--optix-font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .optix-head { font-family: var(--optix-font-head); font-weight: 700; letter-spacing: -0.005em; }
h1 { font-size: 28px; line-height: 32px; }
h2 { font-size: 20px; line-height: 26px; font-weight: 600; }
a { color: var(--optix-blue); text-decoration: none; }
code, .optix-mono, .optix-id, .optix-amount {
  font-family: var(--optix-font-mono);
  font-variant-numeric: tabular-nums;
}
.optix-id { color: var(--optix-ice); }
.optix-amount { text-align: right; }

/* eyebrow / section label: Montserrat 600, wide-tracked caps */
.optix-eyebrow {
  font-family: var(--optix-font-head);
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--optix-sky);
}

/* surfaces */
.optix-card {
  background: var(--optix-surface);
  border: 1px solid var(--optix-border);
  border-radius: var(--optix-radius);
  padding: 16px 18px;
}
.optix-beam { height: 2px; background: var(--optix-x); border-radius: 1px; }

/* the one primary action per view */
.optix-btn-primary {
  background: var(--optix-blue);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--optix-radius-sm);
  padding: 8px 14px;
  font-family: var(--optix-font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.optix-btn-primary:active { background: var(--optix-blue-deep); }
.optix-btn-primary:focus-visible { outline: 2px solid var(--optix-ice); outline-offset: 2px; }
.optix-btn-secondary {
  background: transparent;
  color: var(--optix-text-2);
  border: 1px solid var(--optix-border);
  border-radius: var(--optix-radius-sm);
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
}

/* readiness badges */
.optix-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--optix-font-head); font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--optix-radius-sm);
}
.optix-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.optix-badge--ready   { color: var(--optix-ready-fg);   background: var(--optix-ready-bg); }
.optix-badge--review  { color: var(--optix-review-fg);  background: var(--optix-review-bg); }
.optix-badge--blocked { color: var(--optix-blocked-fg); background: var(--optix-blocked-bg); }

/* provenance labels — every displayed value carries one */
.optix-label {
  display: inline-block;
  font-family: var(--optix-font-head); font-weight: 600; font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; border: 1px solid currentColor;
}
.optix-label--verified  { color: var(--optix-verified); }
.optix-label--inferred  { color: var(--optix-inferred); }
.optix-label--unknown   { color: var(--optix-unknown); }
.optix-label--simulated { color: var(--optix-simulated); }

/* event log */
.optix-event { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--optix-text-2); line-height: 2; }
.optix-event::before { content: "●"; font-size: 9px; color: var(--optix-text-3); }
.optix-event--committed::before { color: var(--optix-ready-fg); }
.optix-event--rejected::before  { color: var(--optix-blocked-fg); }
.optix-event--pending::before   { content: "○"; }

/* tables */
.optix-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.optix-table th {
  text-align: left; font-family: var(--optix-font-head); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--optix-text-2); padding: 8px; border-bottom: 1px solid var(--optix-border);
}
.optix-table td { padding: 8px; border-bottom: 1px solid var(--optix-border); vertical-align: top; }

/* ---------- glass surfaces (BRAND.md "Glass surfaces") ---------- */

/* the field behind glass: Abyss ground, two washes, a fading Sky lattice, one Ice beam */
.optix-field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(0,72,168,.42), transparent 62%),
    radial-gradient(760px 520px at 96% 18%, rgba(0,96,212,.20), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(0,72,168,.22), transparent 60%),
    var(--optix-bg);
}
.optix-field::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background:
    linear-gradient(rgba(126,180,234,.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(126,180,234,.045) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000B1A 30%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000B1A 30%, transparent 78%);
}
.optix-field::after {
  content: ""; position: absolute; left: -20vmax; top: 22vh; width: 140vmax; height: 1px;
  transform: rotate(-9deg); transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(192,233,254,.38) 48%, rgba(0,102,216,.25) 62%, transparent 90%);
}

.optix-glass, .optix-glass--raised {
  background: var(--optix-glass);
  -webkit-backdrop-filter: var(--optix-glass-blur);
          backdrop-filter: var(--optix-glass-blur);
  border: 1px solid var(--optix-glass-line);
  border-radius: var(--optix-radius-panel);
  box-shadow: inset 0 1px 0 var(--optix-glass-hi), var(--optix-glass-shadow);
}
.optix-glass--raised { background: var(--optix-glass-raised); }

/* tab bar and segmented control: a recessed well with glass selections */
.optix-tabs, .optix-seg {
  display: inline-flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--optix-glass-well); border: 1px solid var(--optix-glass-line); border-radius: 12px;
}
.optix-tabs::-webkit-scrollbar, .optix-seg::-webkit-scrollbar { display: none; }
.optix-tab, .optix-seg > button, .optix-seg > a {
  appearance: none; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--optix-text-2); font: 500 13px/1 var(--optix-font-body);
  padding: 9px 14px; border-radius: var(--optix-radius); transition: background .18s, color .18s;
}
.optix-seg > button, .optix-seg > a { font-size: 12px; padding: 7px 11px; }
.optix-tab:hover, .optix-seg > button:hover, .optix-seg > a:hover { color: var(--optix-text); }
.optix-tab[aria-selected="true"], .optix-tab[aria-current="page"],
.optix-seg > [aria-pressed="true"], .optix-seg > [aria-current="true"] {
  color: var(--optix-text); background: var(--optix-glass-tint);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px var(--optix-glass-line-2);
}
.optix-count {
  font: 500 11px/1 var(--optix-font-mono); color: var(--optix-text-2);
  background: rgba(126,180,234,.12); padding: 3px 6px; border-radius: 999px;
}

/* secondary action on glass; the primary action stays .optix-btn-primary (solid OPTIX Blue) */
.optix-btn-glass {
  appearance: none; cursor: pointer; color: var(--optix-text);
  font: 600 11px/1 var(--optix-font-head); letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 16px; border-radius: var(--optix-radius);
  border: 1px solid var(--optix-glass-line-2);
  background: linear-gradient(180deg, rgba(192,233,254,.12), rgba(126,180,234,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: background .18s, border-color .18s;
}
.optix-btn-glass:hover { border-color: rgba(192,233,254,.32); background: linear-gradient(180deg, rgba(192,233,254,.17), rgba(126,180,234,.06)); }
.optix-btn-glass[disabled] { opacity: .45; cursor: not-allowed; }

/* KPI card: eyebrow + provenance label, one figure, one line of context */
.optix-kpi { display: grid; gap: 8px; align-content: start; padding: 16px 18px 15px; }
.optix-kpi__value { font: 600 26px/1.1 var(--optix-font-head); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.optix-kpi__value small { font: 500 13px var(--optix-font-body); color: var(--optix-text-2); margin-left: 4px; }
.optix-kpi__foot { font-size: 12px; line-height: 1.4; color: var(--optix-text-2); }

/* selection of a record (lineage node, review item) */
.optix-selected { outline: 1.6px solid var(--optix-blue); outline-offset: -1px; }

/* light document area for the carrier report: use with data-theme="light" on the same element */
.optix-paper {
  background: var(--optix-bg); color: var(--optix-text);
  border-radius: var(--optix-radius-panel); padding: 26px 28px;
  border: 1px solid var(--optix-border);
}

.optix-tab:focus-visible, .optix-seg > :focus-visible, .optix-btn-glass:focus-visible { outline: 2px solid var(--optix-ice); outline-offset: 2px; }

/* fallbacks: solid Deep Navy when blur is unavailable or transparency is unwanted */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .optix-glass, .optix-glass--raised { background: var(--optix-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .optix-glass, .optix-glass--raised { background: var(--optix-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .optix-tab, .optix-seg > button, .optix-seg > a, .optix-btn-glass { transition: none; }
}