/* Winslow hub. Token names and values match the platform tokens.css.
   Navy is structural and never an action. Teal is action and never decoration.
   Page background is a gradient; cards are flat white. Never the reverse. */

:root{
  /* Brand */
  --color-brand-navy:#164986; --color-brand-dark:#0034A6; --color-brand-light:#E5EBF8;
  --color-teal:#17A589; --color-teal-hover:#148A72; --color-teal-light:#E8F8F5;

  /* Grays */
  --color-gray-50:#F9FAFB;  --color-gray-100:#F3F4F6; --color-gray-200:#E5E7EB;
  --color-gray-300:#D1D5DB; --color-gray-400:#9CA3AF; --color-gray-500:#6C757D;
  --color-gray-600:#4B5563; --color-gray-700:#374151; --color-gray-800:#1F2937;
  --color-gray-900:#111827;

  /* Surfaces */
  --color-page-bg:#F7F7F7; --color-page-bg-end:#F0F0F0;
  --color-surface:#FFFFFF; --color-surface-raised:#FAFBFD;

  /* Borders */
  --color-border:#DDE3EE; --color-border-input:#C4CFDF;
  --color-border-subtle:#EBF0F7; --color-border-strong:#9AAABB;

  /* Status */
  --color-success:#EDFAF4; --color-success-text:#1E6E43; --color-success-border:#A8E6C5;
  --color-warning:#FFFBEB; --color-warning-text:#92400E; --color-warning-border:#F5E08C;
  --color-info:#EEF5FF;    --color-info-text:#1E40AF;    --color-info-border:#C3D4F7;
  --color-error:#FFF1F1;   --color-error-text:#991B1B;   --color-error-border:#F5BABA;

  /* Text */
  --color-text-primary:#18253A; --color-text-secondary:#5A6880;
  --color-text-muted:#8C98AB;   --color-text-inverse:#FFFFFF;
  --color-text-link:#164986;    --color-text-link-hover:#17A589;

  /* Fonts. Mono is an addition to the house set, for measured values only:
     counts, versions, dates, sten values. Never prose, buttons or headings. */
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-heading:'DM Serif Display',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  /* Type scale */
  --text-3xs:.625rem; --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem;
  --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem;
  --text-3xl:1.875rem; --text-4xl:2.25rem;
  --font-normal:400; --font-medium:500; --font-semibold:600; --font-bold:700;
  --leading-tight:1.25; --leading-snug:1.375; --leading-normal:1.5; --leading-relaxed:1.625;
  --tracking-tight:-.01em; --tracking-normal:0; --tracking-wide:.025em;
  --tracking-wider:.05em; --tracking-widest:.1em;

  /* Spacing, 8px grid */
  --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem;

  /* Radius */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px;
  --radius-2xl:16px; --radius-full:9999px;

  /* Shadows, navy-tinted */
  --shadow-xs:0 1px 2px rgba(22,73,134,.05);
  --shadow-sm:0 1px 3px rgba(22,73,134,.09),0 1px 2px rgba(22,73,134,.05);
  --shadow-md:0 4px 12px rgba(22,73,134,.10),0 2px 4px rgba(22,73,134,.06);
  --shadow-lg:0 10px 24px rgba(22,73,134,.12),0 4px 8px rgba(22,73,134,.07);
  --shadow-xl:0 20px 32px rgba(22,73,134,.13),0 8px 12px rgba(22,73,134,.07);
  --shadow-focus:0 0 0 3px rgba(23,165,137,.22);
  --shadow-inset:inset 0 1px 2px rgba(22,73,134,.05);

  /* Motion */
  --transition-fast:150ms ease; --transition-base:200ms ease; --transition-slow:300ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:linear-gradient(160deg,var(--color-page-bg) 0%,var(--color-page-bg-end) 100%);
  background-attachment:fixed;
  color:var(--color-text-primary);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  line-height:var(--leading-normal);
}
h1,h2,h3,h4{
  font-family:var(--font-heading); font-weight:var(--font-normal);
  color:var(--color-brand-navy); margin:0; line-height:var(--leading-tight);
}
h1{font-size:var(--text-3xl)} h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}  h4{font-size:var(--text-lg)}
a{color:var(--color-text-link);text-decoration:none}
a:hover{color:var(--color-text-link-hover)}
button{font-family:inherit}

/* Measured values only. Never prose, buttons or headings. */
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--color-teal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:.625rem var(--space-6);font-family:var(--font-body);
  font-size:var(--text-sm);font-weight:var(--font-semibold);line-height:1;
  border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;
  white-space:nowrap;text-decoration:none;
  transition:background-color var(--transition-fast),border-color var(--transition-fast),
             color var(--transition-fast),box-shadow var(--transition-fast);
}
.btn:focus-visible{outline:2px solid var(--color-teal);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--color-teal);color:#fff;border-color:var(--color-teal)}
.btn-primary:hover{background:var(--color-teal-hover);border-color:var(--color-teal-hover);box-shadow:var(--shadow-sm)}
.btn-secondary{background:var(--color-gray-500);color:#fff;border-color:var(--color-gray-500)}
.btn-secondary:hover{background:var(--color-gray-600);border-color:var(--color-gray-600)}
.btn-outline{background:transparent;color:var(--color-brand-navy);border-color:var(--color-brand-navy)}
.btn-outline:hover{background:var(--color-brand-light)}
.btn-outline-teal{background:transparent;color:var(--color-teal);border-color:var(--color-teal)}
.btn-outline-teal:hover{background:var(--color-teal-light)}
.btn-ghost{background:transparent;color:var(--color-text-secondary);border-color:transparent}
.btn-ghost:hover{background:var(--color-gray-100);color:var(--color-text-primary)}
.btn-danger{background:#DC2626;color:#fff;border-color:#DC2626}
.btn-danger:hover{background:#B91C1C;border-color:#B91C1C}
.btn-sm{padding:.375rem var(--space-4);font-size:var(--text-xs)}
.btn-lg{padding:.75rem var(--space-8);font-size:var(--text-base);border-radius:var(--radius-lg)}
.btn-block{width:100%}

/* Cards */
.card{
  background:var(--color-surface);border-radius:var(--radius-xl);
  border:1px solid var(--color-border);box-shadow:var(--shadow-sm);overflow:hidden;
}
.card--hover{transition:box-shadow var(--transition-base),transform var(--transition-base)}
.card--hover:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.card__header{
  padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.card__title{
  font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-normal);
  color:var(--color-brand-navy);margin:0;
}
.card__body{padding:var(--space-6)}
.card__footer{
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);
  background:var(--color-gray-50);display:flex;align-items:center;
  justify-content:flex-end;gap:var(--space-3);
}

/* Forms */
.form-group{margin-bottom:var(--space-5)}
.form-label{
  display:block;font-size:var(--text-sm);font-weight:var(--font-medium);
  color:var(--color-text-primary);margin-bottom:var(--space-2);
}
.form-label .required{color:#DC2626;margin-left:var(--space-1)}
.form-control{
  display:block;width:100%;padding:.625rem var(--space-4);
  font-family:var(--font-body);font-size:var(--text-sm);line-height:var(--leading-normal);
  color:var(--color-text-primary);background:var(--color-surface);
  border:1px solid var(--color-gray-300);border-radius:var(--radius-md);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
  -webkit-appearance:none;appearance:none;
}
.form-control::placeholder{color:var(--color-text-muted)}
.form-control:hover{border-color:var(--color-gray-400)}
.form-control:focus{outline:none;border-color:var(--color-teal);box-shadow:0 0 0 3px rgba(23,165,137,.15)}
.form-control:disabled{background:var(--color-gray-100);color:var(--color-text-muted);cursor:not-allowed}
.form-control.is-invalid{border-color:#DC2626}
.form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th{
  background:var(--color-brand-light);color:var(--color-brand-navy);
  font-weight:var(--font-semibold);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:var(--tracking-wider);padding:var(--space-3) var(--space-4);
  text-align:left;white-space:nowrap;border-bottom:1px solid var(--color-border);
}
.table td{
  padding:var(--space-3) var(--space-4);color:var(--color-text-primary);
  border-bottom:1px solid var(--color-gray-100);vertical-align:middle;
}
.table tr:last-child td{border-bottom:none}
.table tbody tr:nth-child(even) td{background:var(--color-gray-50)}
.table tbody tr:hover td{background:var(--color-gray-50)}
.table tbody tr:nth-child(even):hover td{background:var(--color-gray-100)}
.table td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);color:var(--color-text-secondary);text-align:right}

/* Badges */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:.1875rem var(--space-3);font-size:var(--text-xs);
  font-weight:var(--font-semibold);border-radius:var(--radius-full);
  letter-spacing:var(--tracking-wide);white-space:nowrap;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge--completed{background:#DBEAFE;color:#1E40AF}
.badge--activated{background:#FEF9C3;color:#92400E}
.badge--in-progress{background:var(--color-success);color:var(--color-success-text)}
.badge--default{background:var(--color-gray-200);color:var(--color-gray-700)}
.badge--teal{background:var(--color-teal-light);color:var(--color-teal-hover)}
.badge--error{background:var(--color-error);color:var(--color-error-text)}

/* Alerts */
.alert{
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);
  border:1px solid transparent;font-size:var(--text-sm);
  line-height:var(--leading-relaxed);margin-bottom:var(--space-4);
}
.alert--info{background:var(--color-info);color:var(--color-info-text);border-color:var(--color-info-border)}
.alert--success{background:var(--color-success);color:var(--color-success-text);border-color:var(--color-success-border)}
.alert--warning{background:var(--color-warning);color:var(--color-warning-text);border-color:var(--color-warning-border)}
.alert--error{background:var(--color-error);color:var(--color-error-text);border-color:var(--color-error-border)}

/* Auth */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-8) var(--space-4)}
.auth-card{
  width:100%;max-width:460px;background:var(--color-surface);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  padding:var(--space-10) var(--space-8);
}
.auth-card__header{margin-bottom:var(--space-8);text-align:center}
.auth-card__header h1{
  font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:400;
  color:var(--color-brand-navy);margin-bottom:var(--space-2);
}
.auth-card__header p{font-size:var(--text-sm);color:var(--color-text-secondary);margin:0}
.auth-card__footer{
  margin:var(--space-6) 0 0;font-size:var(--text-xs);
  color:var(--color-text-muted);text-align:center;
}