/* OSk3y brand theme — bridges the page's design-system variables to the
   OSk3y web-app token set (uploads/OSk3y Web App.html) and restyles the
   shared components to match: navy ground, filled brand-blue actions,
   surface cards, product tones. Loaded LAST so it wins ties. */
@import url("./styles.css");

:root {
  /* variable bridge: DS names → brand tokens */
  --color-bg: var(--bg);
  --color-text: var(--text);
  --color-accent: var(--primary-text);   /* text-safe brand blue on navy */
  --color-accent-900: #0e1f4d;
  --color-neutral-700: var(--border);
  --color-neutral-800: var(--border-soft);
  --color-neutral-900: var(--surface);
  --color-divider: var(--border-soft);
  --color-section: #10245e;              /* stat band: deep brand indigo */
  --color-section-glow: #0d4f49;         /* … with a teal fall-off */
  --font-heading-weight: var(--weight-heading);
  --font-body-weight: var(--weight-body);
}

body {
  /* the lit ground, re-inked in brand: blue bloom top-right, faint teal foot */
  background:
    radial-gradient(1200px 720px at 82% -160px, rgba(46, 107, 255, 0.16), transparent 60%),
    radial-gradient(1000px 700px at -10% 100%, rgba(20, 184, 166, 0.07), transparent 55%),
    var(--bg);
}
a { color: var(--primary-text); }
a:hover { color: var(--text); }
::selection { background: var(--primary-soft); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* — nav — */
.nav { background: rgba(10, 15, 30, 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-soft); }
.nav a:not(.btn) { color: var(--text-2); }
.nav a:not(.btn):hover { color: var(--text); }

/* — buttons: filled primary, quiet ghost (the web app's grammar) — */
.btn { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-base);
  border-radius: var(--radius-md); padding: 10px 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  transition: all var(--speed) var(--ease); text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; border: 1px solid transparent; }
.btn-primary:hover { background: var(--primary-strong); color: #fff; border-color: transparent; }
.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--primary); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* — cards — */
.card { background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  transition: all var(--speed) var(--ease); }
.card:hover { border-color: var(--border); transform: translateY(-1px); }
.card-kicker { font-size: var(--text-xs); font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-3); }
.card-title { color: var(--text-heading); }
.card-body { color: var(--text-body); }

.prods a.card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.prods a.card:hover { border-color: var(--primary); }

/* — product tones (Work blue, Hub purple, Shift green, Money orange) — */
.prods .card:nth-child(1) .card-kicker { color: #7ea4ff; }
.prods .card:nth-child(2) .card-kicker { color: #a97bff; }
.prods .card:nth-child(3) .card-kicker { color: var(--shift); }
.prods .card:nth-child(4) .card-kicker { color: var(--money); }

/* — hero panel / app mock — */
.panel { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); }
.panel-bar, .panel-tabs { border-color: var(--border-soft); }
.tile { background: var(--bg-raised); border-color: var(--border-soft); border-radius: var(--radius-md); }
.panel-tabs button { border-radius: var(--radius-pill); }
.panel-tabs button:nth-child(1)[aria-current] { color: #7ea4ff; background: var(--work-soft); }
.panel-tabs button:nth-child(2)[aria-current] { color: #a97bff; background: var(--hub-soft); }
.panel-tabs button:nth-child(3)[aria-current] { color: var(--shift); background: var(--shift-soft); }
.panel-tabs button:nth-child(4)[aria-current] { color: var(--money); background: var(--money-soft); }
.panel-side a[aria-current] { color: var(--text); border-left-color: var(--primary); background: var(--primary-soft); }
.bars i { background: linear-gradient(to top, rgba(46, 107, 255, 0.25), rgba(46, 107, 255, 0.75)); }

/* — forms — */
.input, .form input, .form textarea, .form select {
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 9px 12px; font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--speed) var(--ease); }
.input:focus, .form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--primary); outline: none; }