/* ============================================================
   Theme: Brutalist (softened)

   Same posture as brutal.css — flat, uppercase, zero radius,
   no shadows — with the border treatment dialled back and a
   violet signal colour in place of the orange.

   What changed from brutal.css:
     - 2px  -> 1px default border weight
     - pure black borders -> dark grey (#2a2a2a light / #6a6a6a dark)
     - #ff3b00 orange -> #6d28d9 violet (lighter #a78bfa on dark),
       which stops the primary button vibrating against white
     - major structure (header rule, footer) keeps the heavier
       black edge, so the theme still reads as brutalist

   Tokens only — structure lives in base.css.
   ============================================================ */

:root {
  --bg:            #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f0f0f0;

  /* Softened: grey hairline instead of a 2px black outline. */
  --border:        #2a2a2a;
  --border-strong: #000000;   /* reserved for structural rules */

  --text:          #000000;
  --text-muted:    #555555;

  /* Purple trial. To revert to cobalt:
       #6d28d9 -> #1a3fd4, #58209f -> #1531a8, #f0e9fc -> #e6ebfc
       and in both dark blocks #a78bfa -> #6f8dff, #bda5fc -> #8da3ff,
       #1c1030 -> #101a3d */
  --accent:        #6d28d9;
  --accent-hover:  #58209f;
  --accent-text:   #ffffff;
  --accent-soft:   #f0e9fc;

  --danger:        #cc0000;
  --danger-bg:     #ffe5e5;
  --success:       #006611;
  --success-bg:    #e2f5e5;

  --font:        "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:     var(--font);
  --font-head:   "Arial Narrow", "Helvetica Neue Condensed", var(--font);
  --fs-base:     15px;
  --lh-base:     1.5;
  --tracking-head: -.04em;
  --weight-head: 800;
  --caps-letterspacing: .1em;

  --radius:      0;
  --radius-sm:   0;
  --radius-pill: 0;
  --radius-avatar: 0;
  --border-w:    1px;        /* softened from 2px */

  --shadow:      none;
  --shadow-lift: none;

  --maxw:        1280px;
  --gutter:      1.25rem;
  --space-page:  2.5rem;

  --brand-mark:  #000000;
  --banner:      repeating-linear-gradient(45deg, #000 0 12px, #fff 12px 24px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #000000;
    --surface:       #000000;
    --surface-2:     #141414;

    /* Grey rather than full white, so panels stop glowing. */
    --border:        #6a6a6a;
    --border-strong: #ffffff;

    --text:          #ffffff;
    --text-muted:    #a6a6a6;

    --accent:        #a78bfa;
    --accent-hover:  #bda5fc;
    --accent-text:   #000000;
    --accent-soft:   #1c1030;

    --danger:        #ff5555;
    --danger-bg:     #2b0000;
    --success:       #4ade6a;
    --success-bg:    #02240a;

    --brand-mark:    #ffffff;
    --banner:        repeating-linear-gradient(45deg, #fff 0 12px, #000 12px 24px);
  }
}

:root[data-theme="dark"] {
  --bg:            #000000;
  --surface:       #000000;
  --surface-2:     #141414;

  --border:        #6a6a6a;
  --border-strong: #ffffff;

  --text:          #ffffff;
  --text-muted:    #a6a6a6;

  --accent:        #a78bfa;
  --accent-hover:  #bda5fc;
  --accent-text:   #000000;
  --accent-soft:   #1c1030;

  --danger:        #ff5555;
  --danger-bg:     #2b0000;
  --success:       #4ade6a;
  --success-bg:    #02240a;

  --brand-mark:    #ffffff;
  --banner:        repeating-linear-gradient(45deg, #fff 0 12px, #000 12px 24px);
}

/* Everything still shouts — unchanged from brutal.css. */
.hero__title,
.page-head__title,
.prose h1 { text-transform: uppercase; }

.header__link,
.tabs__tab,
.btn { text-transform: uppercase; letter-spacing: var(--caps-letterspacing); font-weight: 700; }

/* Structural rules keep the heavy black edge. Softening these too
   would tip the theme into plain editorial and lose the posture. */
.header { border-bottom: 2px solid var(--border-strong); }
.footer { border-top: 2px solid var(--border-strong); }

/* The active tab underline is a deliberate accent, not a hairline. */
.tabs__tab.is-active { border-bottom-width: 3px; }

/* Primary action stays a solid block with a hard edge. */
.btn--primary { border-color: var(--accent); }

/* Ghost buttons and inputs were the worst of the 2px black boxing —
   a hairline is enough to define them. */
.btn--ghost,
.field__input,
.searchbar__input,
.gsearch__input { border-color: var(--border); }

.btn--ghost:hover { border-color: var(--border-strong); }
.field__input:focus,
.searchbar__input:focus { border-color: var(--accent); }