/**
 * ScaleCraft Bureau Design System — CSS Custom Properties
 * Version: 1.0 | Extracted: 2026-08-31
 * Source: Claude Design canvases (Bureau v1.0, Aug 2026)
 *
 * Usage: Add to WordPress child theme's style.css or enqueue as a separate file.
 * In Elementor: reference these variables in Custom CSS fields.
 * ACTIVE SYSTEM — GoldenChords (Obsidian/Foundry White/Ingot/Alexana/Inter) is retired.
 */

:root {

  /* ============================================================
     COLORS
     ============================================================ */

  --sc-graphite:  #1B1F23;   /* Primary text, dark backgrounds */
  --sc-chalk:     #F5F5F2;   /* Primary background, light ground */
  --sc-pine:      #14453D;   /* Brand field, links at rest, full sections */
  --sc-copper:    #C2673A;   /* Accent — one per screen max. Hover, labels, focus */
  --sc-stone:     #A8B2AC;   /* Dividers, disabled, placeholders */

  /* Pine hover (darkened 8%) */
  --sc-pine-hover: #0F3530;

  /* Copper hover (darkened 8%) */
  --sc-copper-hover: #B25C32;

  /* Functional aliases */
  --sc-color-bg:          var(--sc-chalk);
  --sc-color-bg-dark:     var(--sc-graphite);
  --sc-color-bg-brand:    var(--sc-pine);
  --sc-color-text:        var(--sc-graphite);
  --sc-color-text-light:  var(--sc-chalk);
  --sc-color-accent:      var(--sc-copper);
  --sc-color-divider:     var(--sc-stone);
  --sc-color-link:        var(--sc-pine);
  --sc-color-link-hover:  var(--sc-copper);

  /* Transparent overlays */
  --sc-graphite-14:  rgba(27,31,35,.14);   /* Card borders */
  --sc-graphite-20:  rgba(27,31,35,.20);   /* Form field borders */
  --sc-graphite-60:  rgba(27,31,35,.60);   /* Secondary text on light */
  --sc-graphite-72:  rgba(27,31,35,.72);   /* Body on light */
  --sc-chalk-55:     rgba(245,245,242,.55); /* Secondary text on dark */
  --sc-chalk-68:     rgba(245,245,242,.68); /* Body on dark */


  /* ============================================================
     TYPOGRAPHY — FAMILIES
     ============================================================ */

  --sc-font-display: 'Newsreader', Georgia, serif;
  --sc-font-body:    'Familjen Grotesk', Helvetica, Arial, sans-serif;
  --sc-font-mono:    'IBM Plex Mono', 'Courier New', monospace;


  /* ============================================================
     TYPE SCALE
     ============================================================ */

  /* D1 — Hero headline */
  --sc-type-d1-size:        88px;
  --sc-type-d1-line-height: 0.977;
  --sc-type-d1-tracking:    -0.038em;
  --sc-type-d1-weight:      400;

  /* D2 — Section title */
  --sc-type-d2-size:        64px;
  --sc-type-d2-line-height: 1.016;
  --sc-type-d2-tracking:    -0.035em;
  --sc-type-d2-weight:      400;

  /* D3 — Pull quote, large metric */
  --sc-type-d3-size:        42px;
  --sc-type-d3-line-height: 1.167;
  --sc-type-d3-tracking:    -0.028em;
  --sc-type-d3-weight:      400;

  /* D4 — Subhead */
  --sc-type-d4-size:        30px;
  --sc-type-d4-line-height: 1.2;
  --sc-type-d4-tracking:    -0.028em;
  --sc-type-d4-weight:      400;

  /* B1 — Lead paragraph */
  --sc-type-b1-size:        20px;
  --sc-type-b1-line-height: 1.5;
  --sc-type-b1-weight:      400;

  /* B2 — Body (default for 2+ lines) */
  --sc-type-b2-size:        17px;
  --sc-type-b2-line-height: 1.588;
  --sc-type-b2-weight:      400;

  /* B3 — Caption, list item, table cell */
  --sc-type-b3-size:        15px;
  --sc-type-b3-line-height: 1.533;
  --sc-type-b3-weight:      400;

  /* L1 — Eyebrow, label, metadata (always uppercase, mono) */
  --sc-type-l1-size:        12px;
  --sc-type-l1-tracking:    0.14em;
  --sc-type-l1-weight:      500;


  /* ============================================================
     SPACING (golden-ratio φ chain)
     Only use these values. Never interpolate.
     ============================================================ */

  --sc-space-1:   8px;
  --sc-space-2:  13px;
  --sc-space-3:  21px;
  --sc-space-4:  34px;
  --sc-space-5:  55px;
  --sc-space-6:  89px;
  --sc-space-7: 144px;

  /* Semantic aliases */
  --sc-gap-tight:          var(--sc-space-1);   /*  8px */
  --sc-gap-component:      var(--sc-space-2);   /* 13px */
  --sc-gap-section-inner:  var(--sc-space-3);   /* 21px */
  --sc-card-padding:       var(--sc-space-4);   /* 34px */
  --sc-section-padding:    var(--sc-space-6);   /* 89px */
  --sc-section-padding-hero: var(--sc-space-7); /* 144px */


  /* ============================================================
     GRID
     ============================================================ */

  --sc-grid-columns:     12;
  --sc-grid-gutter:      21px;
  --sc-grid-margin:      88px;
  --sc-grid-max-width:   1440px;
  --sc-content-measure:  72ch;   /* Max line length for body copy */


  /* ============================================================
     BORDERS & RADIUS
     ============================================================ */

  --sc-radius:           0;     /* No border radius — ever */
  --sc-border-card:      1px solid var(--sc-graphite-14);
  --sc-border-field:     1px solid rgba(27,31,35,.20);
  --sc-border-divider:   1px solid var(--sc-stone);
  --sc-border-accent:    2px solid var(--sc-copper);  /* Pull quote rule */
  --sc-shadow:           none;  /* No shadows */


  /* ============================================================
     MOTION
     ============================================================ */

  --sc-ease-struck:      cubic-bezier(.2, .7, .1, 1);
  --sc-ease-linear:      linear;

  --sc-duration-stagger:    130ms;
  --sc-duration-state:      210ms;
  --sc-duration-reveal:     340ms;
  --sc-duration-draw:       550ms;
  --sc-duration-max:        890ms;

  /* Scroll reveal lift distance */
  --sc-reveal-lift:  21px;

  /* Focus ring */
  --sc-focus-ring: 2px solid var(--sc-copper);

}


/* ============================================================
   BASE STYLES
   ============================================================ */

body {
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b2-size);
  line-height: var(--sc-type-b2-line-height);
  color: var(--sc-color-text);
  background-color: var(--sc-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--sc-color-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(20,69,61,.35);
  transition: color var(--sc-duration-state) var(--sc-ease-struck),
              border-color var(--sc-duration-state) var(--sc-ease-struck);
}

a:hover {
  color: var(--sc-color-link-hover);
  border-bottom-color: rgba(194,103,58,.5);
}

*:focus-visible {
  outline: var(--sc-focus-ring);
  outline-offset: 2px;
}

* {
  border-radius: 0 !important; /* Bureau system has no border radius */
  box-shadow: none !important; /* Bureau system has no shadows */
}


/* ============================================================
   DISPLAY TYPE (Newsreader)
   ============================================================ */

.sc-d1 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-type-d1-size);
  line-height: var(--sc-type-d1-line-height);
  letter-spacing: var(--sc-type-d1-tracking);
  font-weight: var(--sc-type-d1-weight);
}

.sc-d2 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-type-d2-size);
  line-height: var(--sc-type-d2-line-height);
  letter-spacing: var(--sc-type-d2-tracking);
  font-weight: var(--sc-type-d2-weight);
}

.sc-d3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-type-d3-size);
  line-height: var(--sc-type-d3-line-height);
  letter-spacing: var(--sc-type-d3-tracking);
  font-weight: var(--sc-type-d3-weight);
}

.sc-d4 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-type-d4-size);
  line-height: var(--sc-type-d4-line-height);
  letter-spacing: var(--sc-type-d4-tracking);
  font-weight: var(--sc-type-d4-weight);
}


/* ============================================================
   BODY TYPE (Familjen Grotesk)
   ============================================================ */

.sc-b1 {
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b1-size);
  line-height: var(--sc-type-b1-line-height);
  font-weight: var(--sc-type-b1-weight);
  max-width: var(--sc-content-measure);
}

.sc-b2 {
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b2-size);
  line-height: var(--sc-type-b2-line-height);
  font-weight: var(--sc-type-b2-weight);
  max-width: var(--sc-content-measure);
}

.sc-b3 {
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  font-weight: var(--sc-type-b3-weight);
}


/* ============================================================
   LABELS (IBM Plex Mono)
   ============================================================ */

.sc-l1 {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  font-weight: var(--sc-type-l1-weight);
  text-transform: uppercase;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.sc-btn {
  display: inline-block;
  font-family: var(--sc-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: var(--sc-space-2) var(--sc-space-4);
  transition: background-color var(--sc-duration-state) var(--sc-ease-struck),
              color var(--sc-duration-state) var(--sc-ease-struck);
}

/* Primary */
.sc-btn-primary {
  background-color: var(--sc-pine);
  color: var(--sc-chalk);
  border: none;
}

.sc-btn-primary:hover {
  background-color: var(--sc-pine-hover);
  color: var(--sc-chalk);
  border-bottom: none;
}

/* Secondary */
.sc-btn-secondary {
  background-color: transparent;
  color: var(--sc-graphite);
  border: 1px solid var(--sc-graphite);
}

.sc-btn-secondary:hover {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  border-color: var(--sc-graphite);
}

/* Tertiary (text link style) */
.sc-btn-tertiary {
  background-color: transparent;
  color: var(--sc-pine);
  border: none;
  border-bottom: 1px solid rgba(20,69,61,.35);
  padding-left: 0;
  padding-right: 0;
}

.sc-btn-tertiary:hover {
  color: var(--sc-copper);
  border-bottom-color: rgba(194,103,58,.5);
}


/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */

.sc-bg-chalk    { background-color: var(--sc-chalk);    color: var(--sc-graphite); }
.sc-bg-graphite { background-color: var(--sc-graphite); color: var(--sc-chalk); }
.sc-bg-pine     { background-color: var(--sc-pine);     color: var(--sc-chalk); }
.sc-bg-stone    { background-color: var(--sc-stone);    color: var(--sc-graphite); }


/* ============================================================
   PULL QUOTE
   ============================================================ */

.sc-pullquote {
  font-family: var(--sc-font-display);
  font-size: var(--sc-type-d3-size);
  line-height: var(--sc-type-d3-line-height);
  letter-spacing: var(--sc-type-d3-tracking);
  font-weight: 400;
  border-left: var(--sc-border-accent);
  padding-left: var(--sc-space-4);
  margin: 0;
}

.sc-pullquote-attribution {
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  color: var(--sc-stone);
  margin-top: var(--sc-space-2);
}


/* ============================================================
   CARDS
   ============================================================ */

.sc-card {
  border: var(--sc-border-card);
  padding: var(--sc-card-padding);
  background-color: var(--sc-chalk);
}


/* ============================================================
   DIVIDERS
   ============================================================ */

.sc-rule          { border: none; border-top: var(--sc-border-divider); }
.sc-rule-accent   { border: none; border-top: var(--sc-border-accent); }


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.sc-reveal {
  opacity: 0;
  transform: translateY(var(--sc-reveal-lift));
  transition: opacity var(--sc-duration-reveal) var(--sc-ease-struck),
              transform var(--sc-duration-reveal) var(--sc-ease-struck);
}

.sc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sc-reveal {
    opacity: 1;
    transform: none;
    transition: opacity var(--sc-duration-state) linear;
  }
}


/* ============================================================
   LOGO MARK SVG (inline, Pine on Chalk)
   Use stroke="currentColor" and set color via CSS for easy theming
   ============================================================ */

.sc-mark {
  color: var(--sc-pine);
  display: block;
}

/* On dark (Graphite) backgrounds */
.sc-bg-graphite .sc-mark,
.sc-mark--on-dark {
  color: var(--sc-copper);
}

/* On Pine backgrounds */
.sc-bg-pine .sc-mark,
.sc-mark--on-pine {
  color: var(--sc-chalk);
}