/* breeze-v3 shared stylesheet. Token-driven; tokens from
   workflow_docs/go-design-workflow/DESIGN_SYSTEM.md. Do not edit
   tokens here; edit them in DESIGN_SYSTEM.md and copy down. */

/* layer order MUST be first declaration in the file */
@layer reset, tokens, base, components, utilities;

/* ----- reset ----- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
}

/* ----- tokens ----- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* color (light) DESIGN_SYSTEM section 2.2 */
    --color-bg:                #fbfaf7;
    --color-surface:           #ffffff;
    --color-surface-sunken:    #f1efe9;
    --color-fg:                #0f1419;
    --color-fg-muted:          #5b6470;
    --color-fg-on-accent:      #ffffff;
    --color-border:            #e6e3dc;
    --color-border-strong:     #b9b3a5;
    --color-accent:            #1f4d8a;
    --color-accent-hover:      #163b6b;
    --color-accent-soft:       #e7eef9;
    --color-focus-ring:        #1f4d8a;
    --color-focus-ring-offset: #fbfaf7;
    --color-warn-bg:           #fff4cf;
    --color-warn-border:       #e6c84a;
    --color-warn-fg:           #5b4500;
    --color-error-bg:          #fde8e8;
    --color-error-border:      #e88a8a;
    --color-error-fg:          #7a1f1f;
    --color-success-bg:        #e8f5e8;
    --color-success-border:    #8acf8a;
    --color-success-fg:        #1f5c1f;

    /* typography DESIGN_SYSTEM section 3.1 + 3.2 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-size-xs:   clamp(0.78rem, 0.74rem + 0.18vw, 0.84rem);
    --font-size-sm:   clamp(0.88rem, 0.84rem + 0.20vw, 0.95rem);
    --font-size-body: clamp(1.00rem, 0.96rem + 0.20vw, 1.08rem);
    --font-size-h4:   clamp(1.05rem, 1.00rem + 0.25vw, 1.18rem);
    --font-size-h3:   clamp(1.15rem, 1.08rem + 0.35vw, 1.32rem);
    --font-size-h2:   clamp(1.30rem, 1.18rem + 0.60vw, 1.55rem);
    --font-size-h1:   clamp(1.70rem, 1.40rem + 1.50vw, 2.40rem);
    --line-height-tight: 1.2;
    --line-height-snug:  1.35;
    --line-height-base:  1.5;
    --line-height-loose: 1.65;
    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-semibold: 600;

    /* spacing DESIGN_SYSTEM section 4 */
    --space-0: 0;
    --space-1: 0.125rem;
    --space-2: 0.25rem;
    --space-3: 0.5rem;
    --space-4: 0.75rem;
    --space-5: 1rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 3rem;
    --space-9: 4.5rem;

    /* radius / border / shadow DESIGN_SYSTEM section 5 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-full: 9999px;
    --border-1: 1px solid var(--color-border);
    --border-1-strong: 1px solid var(--color-border-strong);
    --shadow-0: none;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* motion DESIGN_SYSTEM section 6 */
    --motion-duration-fast:     120ms;
    --motion-duration-base:     180ms;
    --motion-duration-slow:     240ms;
    --motion-easing-standard:   cubic-bezier(0.2, 0, 0, 1);
    --motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
    --motion-distance-1:        4px;
    --motion-distance-2:        8px;

    /* interactive primitive defaults DESIGN_SYSTEM section 8.10 */
    --target-min: 28px;

    /* layout primitives DESIGN_SYSTEM section 10 */
    --container-narrow:  44rem;
    --container-default: 48rem;
    --container-wide:    64rem;
  }

  /* dark overrides DESIGN_SYSTEM section 2.3 */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg:                #0e1116;
      --color-surface:           #161b22;
      --color-surface-sunken:    #1f242c;
      --color-fg:                #e8eaed;
      --color-fg-muted:          #9aa3b0;
      --color-fg-on-accent:      #0e1116;
      --color-border:            #2a313a;
      --color-border-strong:     #4a5260;
      --color-accent:            #7eb4ff;
      --color-accent-hover:      #a8c9ff;
      --color-accent-soft:       #16243d;
      --color-focus-ring:        #7eb4ff;
      --color-focus-ring-offset: #0e1116;
      --color-warn-bg:           #332600;
      --color-warn-border:       #806000;
      --color-warn-fg:           #ffd766;
      --color-error-bg:          #3a1414;
      --color-error-border:      #7a2828;
      --color-error-fg:          #ff8a8a;
      --color-success-bg:        #0d2a10;
      --color-success-border:    #2b6b30;
      --color-success-fg:        #8ee29a;
      --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
      --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    }
  }

  /* I2 (DESIGN_SYSTEM_ASSESSMENT, Important): prefers-reduced-transparency collapses shadows */
  @media (prefers-reduced-transparency: reduce) {
    :root {
      --shadow-1: var(--shadow-0);
      --shadow-2: var(--shadow-0);
    }
  }
}

/* ----- base ----- */
@layer base {
  html, body { background: var(--color-bg); color: var(--color-fg); }
  body {
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    padding: var(--space-6) var(--space-5);
  }
  body > header,
  body > main,
  body > section,
  body > nav {
    max-width: var(--container-default);
    margin-inline: auto;
  }
  body.layout-wide > header,
  body.layout-wide > main {
    max-width: var(--container-wide);
  }
  body > header {
    padding-bottom: var(--space-5);
    border-bottom: var(--border-1);
    margin-bottom: var(--space-6);
  }
  h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight);
       font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-4); }
  h2 { font-size: var(--font-size-h2); line-height: var(--line-height-tight);
       font-weight: var(--font-weight-semibold); margin: var(--space-6) 0 var(--space-3); }
  h3 { font-size: var(--font-size-h3); line-height: var(--line-height-snug);
       font-weight: var(--font-weight-semibold); margin: var(--space-5) 0 var(--space-3); }
  p { margin: var(--space-3) 0; }
  a { color: var(--color-accent); text-decoration: none; }
  a:hover { color: var(--color-accent-hover); text-decoration: underline; }
  hr { border: none; border-top: var(--border-1); margin: var(--space-6) 0; }
}

/* ----- components (DESIGN_SYSTEM sections 8.1 through 8.10) ----- */
@layer components {

  /* 8.1 button */
  button, .btn {
    font: inherit;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    background: var(--color-accent);
    color: var(--color-fg-on-accent);
    border: 1px solid var(--color-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    min-height: var(--target-min);
    min-width: var(--target-min);
    cursor: pointer;
  }
  button:hover, .btn:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
  }
  .btn.secondary, button.secondary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-border-strong);
  }
  .btn.danger, button.danger {
    background: var(--color-error-fg);
    color: var(--color-fg-on-accent);
    border-color: var(--color-error-fg);
  }
  .btn.ghost, button.ghost {
    background: transparent;
    color: var(--color-fg-muted);
    border-color: transparent;
  }
  .btn.ghost:hover, button.ghost:hover {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-color: transparent;
  }
  .btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
  }
  .btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-h4);
  }
  button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; }
  button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  /* 8.2 input + label + help/error */
  input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], input[type="search"], textarea, select {
    font: inherit;
    background: var(--color-surface);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    min-height: var(--target-min);
  }
  input[type="file"] {
    font: inherit;
    color: var(--color-fg);
    background: var(--color-surface);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: var(--target-min);
  }
  input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 0;
  }
  input[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--color-error-border);
  }
  input[aria-invalid="true"]:focus-visible,
  textarea[aria-invalid="true"]:focus-visible {
    outline-color: var(--color-error-fg);
  }
  label {
    display: inline-block;
    margin: var(--space-2) var(--space-4) var(--space-2) 0;
    font-weight: var(--font-weight-medium);
    color: var(--color-fg);
  }
  .help {
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
  }
  .error-text {
    color: var(--color-error-fg);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
  }

  /* 8.3 card */
  .card {
    background: var(--color-surface);
    border: var(--border-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: var(--space-6);
  }
  .form-card {
    max-width: var(--container-narrow);
    margin: var(--space-6) auto;
  }

  /* 8.4 navigation */
  .site-header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    color: var(--color-fg);
  }
  .brand-cluster {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-fg);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h4);
  }
  .brand-cluster:hover { color: var(--color-fg); text-decoration: none; }
  .brand-mark {
    display: inline-flex;
    align-items: center;
    color: var(--color-fg);
  }
  .brand-mark-hero {
    color: var(--color-accent);
    margin-bottom: var(--space-4);
  }
  nav.primary-nav, nav.subnav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-left: auto;
  }
  nav.subnav {
    margin-left: 0;
    margin-top: var(--space-3);
    margin-bottom: var(--space-5);
  }
  nav.primary-nav a, nav.subnav a {
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
  }
  nav.primary-nav a:hover, nav.subnav a:hover {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    text-decoration: none;
  }
  nav.primary-nav a[aria-current="page"],
  nav.subnav a[aria-current="page"] {
    color: var(--color-accent);
    background: var(--color-accent-soft);
  }
  nav form { margin: 0; display: inline; }

  /* 8.5 banner */
  .banner {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
    border: 1px solid transparent;
  }
  .banner.warn {
    background: var(--color-warn-bg);
    border-color: var(--color-warn-border);
    color: var(--color-warn-fg);
  }
  .banner.error {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error-fg);
  }
  .banner.success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-fg);
  }
  .banner.info {
    background: var(--color-accent-soft);
    border-color: var(--color-border-strong);
    color: var(--color-fg);
  }

  /* 8.6 list */
  ul.repos, ul.devices, ul.files, ul.versions {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0;
    border: var(--border-1);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }
  ul.repos li, ul.devices li, ul.files li, ul.versions li {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-1);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  ul.repos li:last-child, ul.devices li:last-child,
  ul.files li:last-child, ul.versions li:last-child { border-bottom: none; }
  /* A3: ensure row links inherit accent color */
  ul.repos li > a, ul.devices li > a, ul.files li > a, ul.versions li > a {
    color: var(--color-accent);
  }
  ul.repos li > a:first-child,
  ul.devices li > a:first-child,
  ul.files li > a:first-child,
  ul.versions li > a:first-child {
    flex: 1;
    font-weight: var(--font-weight-medium);
    color: var(--color-fg);
  }
  ul.repos li > a:first-child:hover,
  ul.devices li > a:first-child:hover,
  ul.files li > a:first-child:hover,
  ul.versions li > a:first-child:hover { color: var(--color-accent); }

  /* 8.7 table */
  table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: var(--border-1);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-1);
  }
  th {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-sunken);
    font-weight: var(--font-weight-semibold);
    color: var(--color-fg-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    border-bottom: var(--border-1);
  }
  td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-1);
    vertical-align: top;
  }
  tr:last-child td { border-bottom: none; }
  /* I1: color-mix @supports wrap */
  tr:hover td { background: var(--color-surface-sunken); }
  @supports (background: color-mix(in oklab, white, transparent)) {
    tr:hover td { background: color-mix(in oklab, var(--color-surface-sunken), transparent 50%); }
  }
  .badge.current {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
  }

  /* 8.8 code + pre + textarea[name="patterns"] + token-input */
  code, kbd {
    font-family: var(--font-mono);
    background: var(--color-surface-sunken);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
  }
  pre {
    font-family: var(--font-mono);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    font-size: 0.9em;
  }
  textarea[name="patterns"] {
    font-family: var(--font-mono);
    background: var(--color-surface-sunken);
    border: var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    min-height: 12rem;
    width: 100%;
    resize: vertical;
  }
  .token-input {
    font-family: var(--font-mono);
    background: var(--color-surface-sunken);
    border: var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    width: 100%;
  }

  /* 8.9 form layout */
  form { margin: var(--space-4) 0 var(--space-6); }
  form.stacked {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 26rem;
  }
  form.stacked label,
  form.stacked input,
  form.stacked textarea,
  form.stacked select {
    width: 100%;
    max-width: 26rem;
  }
  form.stacked label {
    display: block;
    font-weight: var(--font-weight-medium);
  }
  .form-aux {
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-4);
    text-align: center;
  }

  /* logout form inline tweak (replaces inline style="display:inline" on dashboard.html) */
  .logout-form { display: inline; margin: 0; }

  /* hero (landing) */
  .landing-main {
    padding: var(--space-8) var(--space-5) var(--space-7);
    text-align: center;
  }
  section.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }
  section.hero .brand-mark-hero { width: 96px; height: 96px; color: var(--color-accent); }
  section.hero p.tagline {
    color: var(--color-fg-muted);
    font-size: var(--font-size-h4);
    max-width: 36rem;
    line-height: var(--line-height-loose);
  }
  .site-footer {
    text-align: center;
    padding: var(--space-6);
    color: var(--color-fg-muted);
    font-size: var(--font-size-xs);
    border-top: var(--border-1);
  }
}

/* ----- utilities ----- */
@layer utilities {
  .muted      { color: var(--color-fg-muted); font-size: var(--font-size-sm); }
  .size       { color: var(--color-fg-muted); font-size: var(--font-size-xs); }
  .empty      { color: var(--color-fg-muted); font-style: italic; padding: var(--space-5); }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .stack-y    { display: flex; flex-direction: column; gap: var(--space-3); }
  .cluster    { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .repo-meta  { display: flex; gap: var(--space-3); align-items: center; }
}

/* ----- motion (DESIGN_SYSTEM section 6, Strategy A: every motion-bearing rule
        sits inside the wrapper; outside the wrapper there is no motion) ----- */
@media (prefers-reduced-motion: no-preference) {

  button, .btn {
    transition:
      background-color var(--motion-duration-fast) var(--motion-easing-standard),
      border-color     var(--motion-duration-fast) var(--motion-easing-standard);
  }
  button:active, .btn:active { transform: translateY(0.5px); }

  input, textarea, select {
    transition:
      border-color var(--motion-duration-fast) var(--motion-easing-standard),
      outline-color var(--motion-duration-fast) var(--motion-easing-standard);
  }

  ul.repos li, ul.devices li, ul.files li, ul.versions li, tr {
    transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
  }

  .banner,
  [hx-swap]:where(.htmx-added) {
    animation: fade-rise var(--motion-duration-base) var(--motion-easing-standard);
  }
  @keyframes fade-rise {
    from { opacity: 0; transform: translateY(var(--motion-distance-2)); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Sprint 5: inline forms (members + device subscriptions tables),
     muted hint text, shared-by pill on dashboard repo rows. */
  .inline-form {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    margin: 0;
  }
  .inline-form select,
  .inline-form input[type="text"] {
    padding: var(--space-1) var(--space-2);
  }
  .hint {
    color: var(--color-fg-muted);
    font-size: var(--font-size-xs);
  }
  .pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-border-strong);
    margin-left: var(--space-2);
  }
  .pill.pill-shared {
    background: var(--color-surface-sunken);
    color: var(--color-fg-muted);
  }
  /* Sprint 5 Story 5.4: notification banner list */
  .banner.banner-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .banner.banner-info li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }
}