/* ============================================
   Foundry — The Spec Sheet
   Brand: Kauply · Icelandic small-batch maker-shop
   Identity: a light engineering blueprint. Cool paper-white field
   ruled by hairlines, products presented as catalogued specimens on
   a measured grid. JetBrains Mono does structural/measurement work
   (coordinates, ticks, ledger prices); Red Hat Text carries prose.
   NOT a dark dev-tools shell — this is a printed parts catalogue.
   Signature motif: the bracket-and-tick — [ corner-framed cells,
   monospace measure rules (//, ┊, ·), and tabular-nums ledger columns.
   Fonts: var(--font-display)=JetBrains Mono · var(--font-body)=Red Hat Text
   ============================================ */

.theme-foundry {
  /* --- Theme-local tokens: one cool hue, owned + tunable --- */
  --fd-hue: 250;
  --fd-paper:    oklch(0.985 0.003 var(--fd-hue));   /* page field            */
  --fd-panel:    oklch(0.965 0.004 var(--fd-hue));   /* recessed panels        */
  --fd-cell:     oklch(0.998 0.001 var(--fd-hue));   /* specimen cell ground  */
  --fd-line:     oklch(0.86 0.006 var(--fd-hue));    /* hairline ruling        */
  --fd-line-2:   oklch(0.78 0.008 var(--fd-hue));    /* heavier rule           */
  --fd-ink:      oklch(0.24 0.012 var(--fd-hue));    /* primary text           */
  --fd-ink-2:    oklch(0.42 0.010 var(--fd-hue));    /* secondary text         */
  --fd-dim:      oklch(0.56 0.008 var(--fd-hue));    /* annotations / measures */
  --fd-acc:      var(--primary);                       /* consumed store accent */
  --fd-acc-soft: color-mix(in oklab, var(--primary) 12%, var(--fd-paper));

  /* Modular type scale — 1.28 ratio, mono measurements vs prose */
  --fd-step--1: 0.75rem;     /* annotation / measure tick */
  --fd-step-0:  0.9375rem;   /* body / catalogue prose    */
  --fd-step-1:  1.2rem;      /* product name / sub-title  */
  --fd-step-2:  1.5375rem;   /* section title             */
  --fd-step-3:  1.96rem;     /* PDP heading lower bound    */
  --fd-step-4:  2.5rem;      /* PDP heading upper          */

  /* Vertical rhythm anchored to an 8px baseline */
  --fd-rhythm: 0.5rem;
  --fd-r: 0px;               /* hard corners — a drafting table, not a bubble */
  --fd-tick: 12px;           /* corner-bracket arm length */
  --fd-grid: 56px;           /* blueprint lattice pitch   */
  --fd-dur: 0.16s;

  font-family: var(--font-body);
  color: var(--fd-ink);
  background:
    linear-gradient(var(--fd-line) 1px, transparent 1px) 0 0 / 100% var(--fd-grid),
    var(--fd-paper);
  background-attachment: fixed;

  /* Hairline crispness for the catalogue mono numerals everywhere */
  & .product-price,
  & .pdp-price,
  & .result-count,
  & .filter-count,
  & .pdp-sku,
  & time { font-variant-numeric: tabular-nums; }

  /* Crisp keyboard focus — a drafting cursor, not a browser default */
  & a:focus-visible,
  & button:focus-visible,
  & input:focus-visible,
  & select:focus-visible {
    outline: 2px solid var(--fd-acc);
    outline-offset: 2px;
    border-radius: var(--fd-r);
  }

  /* ============================================================
     HERO — the title block of a technical drawing
     ============================================================ */
  & .hero-content {
    & .hero-eyebrow {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--fd-acc);

      &::before { content: "// "; color: var(--fd-dim); }
    }

    & h1 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(2.4rem, 5vw, 4rem);
      line-height: 1.04;
      letter-spacing: -0.025em;
      color: var(--fd-ink);
    }

    & .hero-sub {
      font-family: var(--font-body);
      font-size: var(--fd-step-0);
      line-height: 1.65;
      color: var(--fd-ink-2);
      max-width: 60ch;
      padding-inline-start: 1rem;
      border-inline-start: 1px solid var(--fd-line-2);
    }
  }

  /* Edge hero: re-skin the base dark surface into a blueprint sheet */
  & .hero.hero-edge {
    background: var(--fd-panel);
    color: var(--fd-ink);
    margin-inline: calc(var(--gap) * -1);

    & .hero-bg { opacity: 0.1; filter: grayscale(1); }

    /* the signature lattice, dense, behind the title block */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background-image:
        linear-gradient(var(--fd-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--fd-line) 1px, transparent 1px);
      background-size: var(--fd-grid) var(--fd-grid);
      pointer-events: none;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    }

    & .hero-center {
      & h1 {
        font-family: var(--font-display);
        font-weight: 500;
        color: var(--fd-ink);
        text-shadow: none;
      }
      & .hero-sub { color: var(--fd-ink-2); }

      & a {
        background: var(--fd-ink);
        color: var(--fd-paper);
      }
      & a.secondary {
        background: transparent;
        color: var(--fd-ink);
        border: 1px solid var(--fd-line-2);
      }
    }
  }

  & .hero-minimal h1,
  & .hero-banner .hero-banner-text h1 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.025em;
  }

  /* Buttons as command tokens — caret on primaries only */
  & .hero-actions a {
    border-radius: var(--fd-r);
    padding: 0.7em 1.6em;
    font-family: var(--font-display);
    font-size: var(--fd-step--1);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background var(--fd-dur) var(--ease-out),
                color var(--fd-dur) var(--ease-out),
                border-color var(--fd-dur) var(--ease-out);

    &:not(.secondary)::before { content: "> "; opacity: 0.7; }
  }

  /* ============================================================
     SECTION HEADS — drawing-sheet captions with a query prefix
     ============================================================ */
  & .section-head {
    border-block-end: 1px dashed var(--fd-line-2);
    padding-block-end: var(--fd-rhythm);
    margin-block-end: calc(var(--fd-rhythm) * 4);

    & h2 {
      font-family: var(--font-display);
      font-size: var(--fd-step-2);
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--fd-ink);

      &::before {
        content: "// ";
        color: var(--fd-acc);
        font-weight: 500;
      }
    }

    & p { color: var(--fd-ink-2); font-size: var(--fd-step-0); }

    & .section-link {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--fd-dim);

      &::after { content: " →"; }
      &:hover { color: var(--fd-acc); }
    }
  }

  /* ============================================================
     CATEGORIES — index tags in a register
     ============================================================ */
  & .category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-rhythm);
  }

  & .category-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--fd-line);
    border-radius: var(--fd-r);
    background: var(--fd-cell);
    box-shadow: none;
    transition: border-color var(--fd-dur) var(--ease-out),
                background var(--fd-dur) var(--ease-out),
                box-shadow var(--fd-dur) var(--ease-out);

    & .category-image,
    & .category-initial { display: none; }

    & h3 {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      font-weight: 500;
      letter-spacing: 0.01em;
      margin: 0;
      color: var(--fd-ink);

      &::before { content: "#"; color: var(--fd-acc); margin-inline-end: 0.15em; opacity: 0.8; }
    }

    & p { display: none; }

    &:hover {
      border-color: var(--fd-acc);
      background: var(--fd-acc-soft);
      box-shadow: inset 0 0 0 1px var(--fd-acc);

      & .category-image { transform: none; }
    }
  }

  /* ============================================================
     PRODUCT GRID — specimens in a hairline ledger
     ============================================================ */
  & .product-card {
    border-radius: var(--fd-r);
    background: var(--fd-cell);
    border: 1px solid var(--fd-line);
    overflow: visible;
    transition: border-color var(--fd-dur) var(--ease-out),
                box-shadow var(--fd-dur) var(--ease-out);

    /* corner brackets — the signature [ ] frame of a catalogued part */
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: var(--fd-tick);
      height: var(--fd-tick);
      pointer-events: none;
      opacity: 0;
      transition: opacity var(--fd-dur) var(--ease-out);
    }
    &::before {
      top: -1px; left: -1px;
      border-top: 2px solid var(--fd-acc);
      border-left: 2px solid var(--fd-acc);
    }
    &::after {
      bottom: -1px; right: -1px;
      border-bottom: 2px solid var(--fd-acc);
      border-right: 2px solid var(--fd-acc);
    }

    & .product-image {
      border-radius: var(--fd-r);
      background: var(--fd-panel);
      border-block-end: 1px solid var(--fd-line);
    }

    & .product-info {
      padding: 0.7rem 0.8rem 0.8rem;
      gap: var(--fd-rhythm);
    }

    & .product-brand {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      letter-spacing: 0.1em;
      color: var(--fd-dim);
    }

    & h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--fd-step-1);
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--fd-ink);
    }

    /* price as a ledger row — name left, figure right, dotted leader */
    & .product-price {
      display: flex;
      align-items: baseline;
      gap: 0.4rem;
      font-family: var(--font-display);
      font-size: var(--fd-step-1);
      font-weight: 500;
      color: var(--fd-ink);

      &::before {
        content: "";
        flex: 1;
        border-block-end: 1px dotted var(--fd-line-2);
        transform: translateY(-0.2em);
      }
      & del { order: -1; font-size: var(--fd-step--1); color: var(--fd-dim); }
      & ins { color: var(--fd-acc); }
    }

    & .card-action {
      border-radius: var(--fd-r);
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: var(--fd-ink);
      color: var(--fd-paper);
      transition: background var(--fd-dur) var(--ease-out);

      &::before { content: "+ "; }
      &:hover { opacity: 1; background: var(--fd-acc); color: var(--fd-paper); }
      &.added { background: var(--fd-acc); }
    }

    & .card-variants > button {
      border-radius: var(--fd-r);
      font-family: var(--font-display);
      background: var(--fd-ink);
      color: var(--fd-paper);
      transition: background var(--fd-dur) var(--ease-out),
                  transform var(--fd-dur) var(--ease-out);
      &:hover { background: var(--fd-acc); transform: none; }
    }

    & .sale-badge {
      border-radius: var(--fd-r);
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    &:hover {
      border-color: var(--fd-acc);
      box-shadow: none;

      &::before, &::after { opacity: 1; }
      & .product-image { transform: none; }
    }
  }

  /* ============================================================
     CATALOG — dense data grid: cells split by hairlines
     ============================================================ */
  & .catalog { gap: clamp(2rem, 5vw, 4rem); }

  & .catalog-toolbar {
    border-block-end: 1px solid var(--fd-line-2);

    & .result-count {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      letter-spacing: 0.02em;
      color: var(--fd-dim);

      &::before { content: "$ ls --count "; color: var(--fd-acc); opacity: 0.75; }
    }

    & .sort-select select {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      border-radius: var(--fd-r);
      border: 1px solid var(--fd-line-2);
      background: var(--fd-cell);
    }
  }

  /* hairline-separated cells: the grid line bleeds through 1px gaps */
  & .catalog .product-grid {
    gap: 1px;
    background: var(--fd-line);
    border: 1px solid var(--fd-line);
    border-radius: var(--fd-r);

    & .product-card {
      border: none;
      background: var(--fd-cell);
      &::before, &::after { display: none; }
      &:hover { box-shadow: inset 0 0 0 1px var(--fd-acc); }
    }
  }

  & .filter-group {
    border-block-end: 1px solid var(--fd-line);

    & h3 {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--fd-ink-2);
    }
  }

  & .filter-toggle {
    border-radius: var(--fd-r);
    font-family: var(--font-display);
    font-size: var(--fd-step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--fd-ink);
    color: var(--fd-paper);
  }

  & .active-filters .active-filter-pill {
    border-radius: var(--fd-r);
    font-family: var(--font-display);
    font-size: var(--fd-step--1);
    letter-spacing: 0.02em;
    background: var(--fd-acc-soft);
    border: 1px solid var(--fd-acc);
    color: var(--fd-ink);
  }

  & .breadcrumb ol {
    font-family: var(--font-display);
    font-size: var(--fd-step--1);
    letter-spacing: 0.02em;
    color: var(--fd-dim);
  }

  /* ============================================================
     PDP — the parts datasheet
     ============================================================ */
  & .pdp { gap: clamp(2rem, 4vw, 3rem); }

  & .pdp-gallery .pdp-hero {
    border-radius: var(--fd-r);
    border: 1px solid var(--fd-line);
    background: var(--fd-panel);
  }

  & .pdp-gallery nav button {
    border-radius: var(--fd-r);
    border: 1px solid var(--fd-line);
    &[aria-pressed="true"] { border-color: var(--fd-acc); box-shadow: inset 0 0 0 1px var(--fd-acc); }
  }

  & .pdp-info {
    & .pdp-brand {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      font-weight: 500;
      letter-spacing: 0.12em;
      color: var(--fd-acc);
    }

    & h1 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(var(--fd-step-3), 3.5vw, var(--fd-step-4));
      letter-spacing: -0.025em;
      color: var(--fd-ink);
    }

    & .pdp-sku {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      color: var(--fd-dim);
      &::before { content: "ref · "; opacity: 0.7; }
    }

    & .pdp-price {
      font-family: var(--font-display);
      font-size: var(--fd-step-3);
      font-weight: 500;
      color: var(--fd-ink);
      border-block-end: 1px solid var(--fd-line-2);
    }

    & .pdp-description {
      font-family: var(--font-body);
      font-size: var(--fd-step-0);
      line-height: 1.7;
      color: var(--fd-ink-2);
      max-width: 68ch;
    }
  }

  & .pdp-details {
    background: var(--fd-panel);
    border: 1px solid var(--fd-line);
    border-radius: var(--fd-r);

    & dt { font-family: var(--font-display); font-size: var(--fd-step--1); color: var(--fd-ink); }
    & dd { color: var(--fd-ink-2); }
  }

  & .pdp-add-btn {
    border-radius: var(--fd-r);
    background: var(--fd-ink);
    color: var(--fd-paper);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background var(--fd-dur) var(--ease-out);

    &::before { content: "> "; opacity: 0.7; }
    &:hover { background: var(--fd-acc); }
    &.added { background: var(--fd-acc); }
  }

  & .quantity-selector {
    border-radius: var(--fd-r);
    border: 1px solid var(--fd-line-2);
    & input { font-family: var(--font-display); color: var(--fd-ink); }
  }

  & .pdp-variants .pdp-variant-btn {
    border-radius: var(--fd-r);
    font-family: var(--font-display);
    font-size: var(--fd-step--1);
    letter-spacing: 0.02em;
    background: var(--fd-cell);
    border: 1px solid var(--fd-line-2);
    color: var(--fd-ink);
    transition: border-color var(--fd-dur) var(--ease-out),
                background var(--fd-dur) var(--ease-out);

    &:hover { border-color: var(--fd-acc); }
    &[aria-pressed="true"] { border-color: var(--fd-acc); box-shadow: inset 0 0 0 1px var(--fd-acc); }
  }

  & .pdp-trust {
    border-block-start: 1px solid var(--fd-line);

    & .trust-item {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      letter-spacing: 0.02em;
      color: var(--fd-dim);
      & svg { color: var(--fd-acc); }
    }
  }

  & .pdp-tabs {
    border-block-start: 1px solid var(--fd-line-2);

    & .pdp-tab-nav button {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: var(--fd-r);
      color: var(--fd-dim);
      transition: color var(--fd-dur) var(--ease-out);

      &:hover { color: var(--fd-ink); }
      &[aria-selected="true"] { color: var(--fd-acc); }
    }
  }

  & .related-section {
    border-block-start: 1px solid var(--fd-line-2);

    & .section-head h2 {
      font-family: var(--font-display);
      font-size: var(--fd-step-2);
      letter-spacing: -0.02em;
      text-transform: none;
      opacity: 1;
      &::before { content: "// "; color: var(--fd-acc); }
    }
  }

  & .carousel-track > .product-card { width: 300px; }

  /* ============================================================
     NEWSLETTER — a registration form on the datasheet
     ============================================================ */
  & .newsletter {
    background: var(--fd-panel);
    border-radius: var(--fd-r);
    border: 1px solid var(--fd-line-2);
    color: var(--fd-ink);

    /* signature lattice corner inside the panel */
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--fd-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--fd-line) 1px, transparent 1px);
      background-size: var(--fd-grid) var(--fd-grid);
      opacity: 0.5;
      pointer-events: none;
      mask-image: radial-gradient(circle at 100% 0%, black, transparent 60%);
    }

    & .newsletter-inner { position: relative; z-index: 1; }

    & h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--fd-step-2);
      letter-spacing: -0.02em;
      color: var(--fd-ink);
    }

    & p { color: var(--fd-ink-2); font-size: var(--fd-step-0); }

    & form {
      background: var(--fd-cell);
      border: 1px solid var(--fd-line-2);
      border-radius: var(--fd-r);
      padding: 0.25rem;
    }

    & input[type="email"] {
      color: var(--fd-ink);
      font-family: var(--font-body);
      &::placeholder { color: var(--fd-dim); }
    }

    & button {
      border-radius: var(--fd-r);
      background: var(--fd-ink);
      color: var(--fd-paper);
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: background var(--fd-dur) var(--ease-out);
      &:hover { background: var(--fd-acc); }
    }
  }

  /* ============================================================
     EMPTY STATES / CTA links
     ============================================================ */
  & .empty-state a,
  & .empty-state button,
  & .empty-state-btn {
    border-radius: var(--fd-r);
    background: var(--fd-ink);
    color: var(--fd-paper);
    font-family: var(--font-display);
    font-size: var(--fd-step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background var(--fd-dur) var(--ease-out);
    &:hover { background: var(--fd-acc); }
  }

  /* ============================================================
     HEADER / FOOTER — drawing border + title block
     ============================================================ */
  & header {
    background: var(--fd-paper);
    border-block-end: 1px solid var(--fd-line-2);

    & .logo-text {
      font-family: var(--font-display);
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--fd-ink);
    }

    & nav a {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      letter-spacing: 0.04em;
      border-radius: var(--fd-r);
      color: var(--fd-ink-2);
      transition: background var(--fd-dur) var(--ease-out),
                  color var(--fd-dur) var(--ease-out);

      &:hover { background: var(--fd-panel); color: var(--fd-ink); }
      &[aria-current="page"] { color: var(--fd-acc); }
    }
  }

  & .announcement-bar {
    background: var(--fd-ink);
    color: var(--fd-paper);
    font-family: var(--font-display);
    font-size: var(--fd-step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  & footer {
    background: var(--fd-panel);
    border-block-start: 1px solid var(--fd-line-2);

    /* title-block rule: a heavier double hairline like a drawing border */
    box-shadow: inset 0 2px 0 var(--fd-line);

    & nav h3 {
      font-family: var(--font-display);
      font-size: var(--fd-step--1);
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--fd-ink-2);

      &::before { content: "· "; color: var(--fd-acc); }
    }

    & nav a { color: var(--fd-dim); &:hover { color: var(--fd-ink); } }
  }

  & .footer-brand .logo-text {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--fd-ink);
  }

  & .footer-payment .payment-badge {
    font-family: var(--font-display);
    border-radius: var(--fd-r);
    border-color: var(--fd-line-2);
    color: var(--fd-dim);
  }

  /* ============================================================
     CMS pages — datasheet prose
     ============================================================ */
  & .cms-page > h1 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.025em;
    border-block-end: 1px dashed var(--fd-line-2);
    color: var(--fd-ink);
    &::before { content: "// "; color: var(--fd-acc); }
  }

  & .cms-content { color: var(--fd-ink); max-width: 70ch; }
  & .cms-content h2 { font-family: var(--font-display); font-weight: 500; color: var(--fd-ink); }
  & .cms-content p { max-width: 70ch; color: var(--fd-ink-2); }
}

/* The demo ships a dark color scheme (light --text), but Foundry is a LIGHT
   theme (paper field + ink text). Re-bind the inherited text tokens to Foundry's
   ink (beats the inline :root config by specificity) so base elements — the
   header nav especially — read dark on the light field instead of vanishing. */
body.theme-foundry {
  --text: var(--fd-ink);
  --text-muted: var(--fd-dim);
  --heading: var(--fd-ink);
}
body.theme-foundry header nav a { color: var(--fd-ink-2); }