@import url('/css/tokens.css');

@layer reset, base, layout, components, utilities;

/* ============================================================
   Amber Elite Projects — main.css
   Architectural register, single grotesque, light mode.
   Adapted from the Deepwater Design system.
   ============================================================ */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html, body { block-size: 100%; }
  html { color-scheme: light; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--type);
    font-family: var(--font);
    font-feature-settings: "tnum", "kern", "ss01";
    font-weight: 380;
    font-size: var(--fs-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-block-size: 100%;
  }

  ::selection { background: var(--accent); color: #fff; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 1px;
  }

  /* Headings — DWD ultralight signature for the page title only */
  h1 {
    font-size: var(--fs-3xl);
    font-weight: 200;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--type);
  }
  h2 {
    font-size: var(--fs-xl);
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  h3 {
    font-size: var(--fs-lg);
    font-weight: 540;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  h4 {
    font-size: 0.78rem;
    font-weight: 540;
    letter-spacing: var(--track-up);
    text-transform: uppercase;
    color: var(--type-soft);
  }

  p { margin: 0; }
  a:hover { color: var(--accent); }

  code {
    font-family: var(--font);
    font-weight: 540;
    background: var(--bg-2);
    padding: 1px 6px;
    font-size: 0.85em;
    color: var(--type);
  }
}

@layer layout {
  /* Skip link — hidden until focused, then anchored top-left. WCAG bypass-blocks. */
  .skip-link {
    position: absolute;
    inset-block-start: -200px;
    inset-inline-start: 12px;
    padding: 10px 14px;
    background: var(--accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 540;
    letter-spacing: var(--track-up-sm);
    text-transform: uppercase;
    z-index: 200;
    transition: inset-block-start 200ms ease;
  }
  .skip-link:focus { inset-block-start: 12px; text-decoration: none; }

  .container {
    max-inline-size: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow { max-inline-size: 540px; }

  main { padding-block: var(--s-7) var(--s-8); }

  /* ---------- Site chrome (header) ---------- */

  .chrome {
    background: var(--panel);
    border-block-end: 1px solid var(--rule);
    padding: 22px var(--gutter);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
  }
  .chrome__brand {
    font-size: 0.78rem;
    font-weight: 540;
    letter-spacing: var(--track-up);
    text-transform: uppercase;
    color: var(--type);
  }
  .chrome__brand .accent { color: var(--signal); padding: 0 4px; }
  .chrome__nav {
    display: flex;
    gap: clamp(20px, 3vw, 40px);
    align-items: baseline;
  }
  .chrome__nav a {
    font-size: 0.72rem;
    font-weight: 480;
    letter-spacing: var(--track-up);
    text-transform: uppercase;
    color: var(--type-mute);
    transition: color 200ms ease;
  }
  .chrome__nav a:hover,
  .chrome__nav a.is-active { color: var(--type); }
  .chrome__user {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    font-size: 0.72rem;
    letter-spacing: var(--track-up-sm);
    text-transform: uppercase;
    color: var(--type-mute);
  }

}

@layer components {

  /* ---------- Panel (surface) ---------- */
  .panel {
    background: var(--panel);
    border: 1px solid var(--rule);
    padding: var(--s-6);
  }

  /* ---------- Section labels (DWD architectural metadata) ---------- */
  .label, .lede__label {
    font-size: var(--fs-xs);
    font-weight: 540;
    letter-spacing: var(--track-up);
    text-transform: uppercase;
    color: var(--type-soft);
    font-variant-numeric: tabular-nums;
  }
  .muted { color: var(--type-mute); }
  .lede {
    color: var(--type-mute);
    font-size: var(--fs-md);
    margin-block-end: var(--s-5);
    max-inline-size: 60ch;
  }

  /* ---------- KPI tiles ---------- */
  .kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
  }
  .kpi-tile {
    background: var(--panel);
    border: 1px solid var(--rule);
    padding: var(--s-5) var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .kpi-tile__label {
    font-size: var(--fs-xs);
    font-weight: 540;
    letter-spacing: var(--track-up);
    text-transform: uppercase;
    color: var(--type-soft);
  }
  .kpi-tile__value {
    font-family: var(--font);
    font-size: var(--fs-2xl);
    font-weight: 200;            /* ultralight signature */
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--type);
    font-variant-numeric: tabular-nums;
  }
  .kpi-tile__qual {
    font-weight: 400;
    font-size: var(--fs-md);
    color: var(--type-mute);
    margin-inline-start: var(--s-1);
  }
  .kpi-sub {
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--type-mute);
    line-height: 1.4;
    margin-block-start: 2px;
  }
  .kpi-tile__badges {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-block-start: var(--s-2);
  }
  .kpi-tile--green { border-color: var(--status-green); background: var(--status-green-bg); }
  .kpi-tile--amber { border-color: var(--status-amber); background: var(--status-amber-bg); }
  .kpi-tile--red   { border-color: var(--status-red);   background: var(--status-red-bg); }

  /* ---------- Buttons ---------- */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 11px 22px;
    font-size: 0.72rem;
    font-weight: 540;
    letter-spacing: var(--track-up-sm);
    text-transform: uppercase;
    border: 1px solid var(--type);
    background: transparent;
    color: var(--type);
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    font-variant-numeric: tabular-nums;
  }
  .button:hover {
    background: var(--type);
    color: var(--bg);
    text-decoration: none;
  }
  .button--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .button--primary:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
  }
  .button--danger {
    background: var(--signal);
    color: #fff;
    border-color: var(--signal);
  }
  .button--danger:hover {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
  }
  .button--ghost {
    border-color: var(--rule);
    color: var(--type-mute);
    background: transparent;
  }
  .button--ghost:hover {
    border-color: var(--type);
    color: var(--type);
    background: transparent;
  }
  .button--block { width: 100%; }
  .button--sm {
    padding: 6px 12px;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }
  .button:disabled, .button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* ---------- Forms ---------- */
  .form-row { margin-block-end: var(--s-4); }
  label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 540;
    letter-spacing: var(--track-up-sm);
    text-transform: uppercase;
    color: var(--type-soft);
    margin-block-end: 6px;
  }
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=date], select, textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--rule);
    background: var(--panel);
    color: var(--type);
    font: inherit;
    font-size: var(--fs-md);
    font-weight: 400;
    transition: border-color 160ms ease;
  }
  input::placeholder, textarea::placeholder { color: var(--type-soft); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
  }
  select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--type-soft) 50%),
                      linear-gradient(135deg, var(--type-soft) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px;
  }
  textarea { font-family: var(--font); resize: vertical; }

  /* ---------- Alerts ---------- */
  .alert {
    padding: 12px 16px;
    border-left: 2px solid currentColor;
    margin-block-end: var(--s-4);
    font-size: var(--fs-sm);
    background: var(--panel-2);
  }
  .alert--error   { color: var(--status-red);   background: var(--status-red-bg); }
  .alert--info    { color: var(--accent);       background: var(--accent-soft); }
  .alert--success { color: var(--status-green); background: var(--status-green-bg); }

  /* ---------- Badges ---------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.62rem;
    font-weight: 540;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }
  .badge--green { color: var(--status-green); background: var(--status-green-bg); }
  .badge--amber { color: var(--status-amber); background: var(--status-amber-bg); }
  .badge--red   { color: var(--status-red);   background: var(--status-red-bg); }
  .badge--grey  { color: var(--type-mute);    background: var(--bg-2); }

  /* ---------- RAG dot ---------- */
  .dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 999px;
    vertical-align: 1px;
  }
  .dot--green { background: var(--status-green); }
  .dot--amber { background: var(--status-amber); }
  .dot--red   { background: var(--status-red); }
  .dot--grey  { background: var(--type-soft); }

  /* ---------- Tables ---------- */
  table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }
  table.data th {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.62rem;
    font-weight: 540;
    color: var(--type-soft);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--bg-2);
    border-block-end: 1px solid var(--rule);
    white-space: nowrap;
  }
  table.data td {
    padding: 14px 16px;
    border-block-end: 1px solid var(--rule-faint);
    vertical-align: top;
  }
  table.data tr:last-child td { border-block-end: 0; }
  table.data tr:hover td { background: var(--panel-2); }
  table.data td.num, table.data th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Login ---------- */
  .login-wrap {
    min-block-size: 100vh;
    display: grid;
    place-items: center;
    padding: var(--s-5);
    background: var(--bg);
  }
  .login-card { width: 100%; max-width: 420px; }
  .login-brand {
    text-align: center;
    margin-block-end: var(--s-6);
  }
  .login-brand h1 {
    font-size: 1rem;
    font-weight: 540;
    letter-spacing: var(--track-up);
    text-transform: uppercase;
    margin: 0;
    color: var(--type);
  }
  .login-brand h1 .accent { color: var(--signal); padding: 0 4px; }
  .login-brand p {
    color: var(--type-soft);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-up-sm);
    text-transform: uppercase;
    margin-block-start: 8px;
  }
  .login-footer {
    margin-block-start: var(--s-5);
    font-size: 0.66rem;
    color: var(--type-soft);
    text-align: center;
    letter-spacing: var(--track-up-sm);
    text-transform: uppercase;
  }

  /* ---------- Project cards (grid on /projects) ---------- */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--s-4);
  }
  .project-card {
    background: var(--panel);
    border: 1px solid var(--rule);
    padding: var(--s-5) var(--s-6);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 200ms ease;
  }
  .project-card:hover {
    border-color: var(--type);
    text-decoration: none;
  }
  .project-card__top {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin-block-end: var(--s-2);
  }
  .project-card__top h3 {
    margin: 0;
    flex: 1;
    font-size: var(--fs-lg);
    font-weight: 540;
  }
  .project-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    margin-block-start: var(--s-4);
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--rule-faint);
  }
  .project-card__metrics > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .project-card__metrics span {
    font-size: var(--fs-xs);
    letter-spacing: var(--track-up-sm);
    text-transform: uppercase;
    color: var(--type-soft);
  }
  .project-card__metrics strong {
    font-size: var(--fs-md);
    font-weight: 540;
    color: var(--type);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Progress modal action rows ---------- */
  .action-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-block-start: 1px solid var(--rule-faint);
  }
  .action-row:first-child { border-block-start: 0; }
  .action-row strong { font-weight: 540; font-size: var(--fs-sm); }

  /* ---------- Grid helpers used by forms ---------- */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
  @media (max-width: 540px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .action-row { grid-template-columns: 1fr; }
    .chrome { flex-direction: column; align-items: flex-start; }
  }

  /* ---------- In-table conditional colour ---------- */
  .is-green { color: var(--status-green); font-weight: 540; }
  .is-red   { color: var(--status-red);   font-weight: 540; }
}

@layer utilities {
  .hidden { display: none !important; }
  .row { display: flex; gap: var(--s-3); align-items: center; }
  .row--end { justify-content: flex-end; }
  .row--between { justify-content: space-between; }
  .stack > * + * { margin-block-start: var(--s-4); }
}