/*
Theme Name: Strongback
Template: generatepress
Description: Strongback Consulting design system — these tokens are the source of truth.
Version: 1.0
*/
/* Strongback Consulting — Design System, single-file build.
 * Consumers link THIS file. Tokens + base element styles, in one place.
 */
/* Strongback Consulting — Type stack
 * Native operating-system fonts — no download, no webfont CDN, no license to
 * manage. Each OS substitutes its own equivalent, so the system always
 * renders instantly with zero network requests:
 *   Display : system UI, condensed stretch  (macOS: SF Pro Condensed,
 *             Windows: Segoe UI/Bahnschrift condensed, Linux: Roboto/Noto
 *             condensed where installed) — echoes the tight wordmark voice.
 *   Body    : system UI, regular stretch    (macOS: SF Pro, Windows: Segoe UI,
 *             Android: Roboto, Linux: Ubuntu/Cantarell/Noto Sans)
 *   Mono    : system UI monospace           (macOS: SF Mono, Windows: Consolas,
 *             Linux: Liberation Mono) — same DevOps voice as a webfont mono,
 *             without the extra network request.
 * Exact font stacks are in the typography tokens below.
 */

/* Strongback Consulting — Color Tokens
 * Source of truth: official brand palette (StrongBackColors.html) + the
 * signature orange/navy sampled from the interlocking-S logo mark.
 */
:root {
  /* ---- Brand palette (official names) ---- */
  --sb-mediterranean: #5C9DD9;  /* Mediterranean Blue — bright accent blue */
  --sb-drake:         #3B658C;  /* Drake Channel Blue — primary mid navy   */
  --sb-knotty-pine:   #D9C25B;  /* Knotty Pine — gold                      */
  --sb-barnacle:      #8C703B;  /* Barnacle — bronze                       */
  --sb-cast-iron:     #262626;  /* Cast Iron — near-black ink              */
  --sb-stormy:        #D9D9D9;  /* Stormy Skies — light gray               */

  /* ---- Logo-derived (signature) ---- */
  --sb-spinnaker:     #E0592A;  /* Spinnaker Orange — the logo accent      */
  --sb-spinnaker-deep:#C0432A;  /* deeper orange-red shadow in the mark    */
  --sb-navy:          #104A6E;  /* Deep navy — the dark half of the S mark */
  --sb-navy-deep:     #0C3A57;  /* Deepest navy — wordmark ink             */

  /* ---- Blue ramp (built around Drake + Mediterranean) ---- */
  --sb-blue-900: #0C3A57;
  --sb-blue-800: #104A6E;
  --sb-blue-700: #1F557F;
  --sb-blue-600: #3B658C;
  --sb-blue-500: #4C82B8;
  --sb-blue-400: #5C9DD9;
  --sb-blue-300: #8DBBE5;
  --sb-blue-200: #BDD7F0;
  --sb-blue-100: #E2EEF8;
  --sb-blue-50:  #F2F7FC;

  /* ---- Neutral ramp (cool gray, Cast Iron → white) ---- */
  --sb-gray-900: #1A1A1A;
  --sb-gray-800: #262626;  /* Cast Iron */
  --sb-gray-700: #3D3D3D;
  --sb-gray-600: #595959;
  --sb-gray-500: #767676;
  --sb-gray-400: #999999;
  --sb-gray-300: #C4C4C4;
  --sb-gray-200: #D9D9D9;  /* Stormy Skies */
  --sb-gray-100: #ECECEC;
  --sb-gray-50:  #F6F7F8;
  --sb-white:    #FFFFFF;

  /* ---- Supporting / status ---- */
  --sb-gold:      #D9C25B;
  --sb-gold-deep: #B79E3E;
  --sb-bronze:    #8C703B;
  --sb-success:   #2E7D55;
  --sb-warning:   #D9A23B;
  --sb-danger:    #C0392B;
  --sb-info:      #5C9DD9;

  /* ================= Semantic aliases ================= */
  /* Brand / action */
  --color-brand:          var(--sb-drake);
  --color-brand-strong:   var(--sb-navy-deep);
  --color-accent:         var(--sb-spinnaker);
  --color-accent-hover:   var(--sb-spinnaker-deep);

  /* Text */
  --text-strong:   var(--sb-navy-deep);
  --text-body:     var(--sb-gray-800);
  --text-muted:    var(--sb-gray-600);
  --text-subtle:   var(--sb-gray-500);
  --text-inverse:  var(--sb-white);
  --text-link:     var(--sb-blue-600);
  --text-on-brand: var(--sb-white);

  /* Surfaces */
  --surface-page:    var(--sb-white);
  --surface-subtle:  var(--sb-gray-50);
  --surface-muted:   var(--sb-blue-50);
  --surface-card:    var(--sb-white);
  --surface-inverse: var(--sb-navy-deep);
  --surface-ink:     var(--sb-gray-900);

  /* Borders / lines */
  --border-subtle:  var(--sb-gray-200);
  --border-default: var(--sb-gray-300);
  --border-strong:  var(--sb-gray-400);
  --border-brand:   var(--sb-drake);

  /* Focus */
  --focus-ring: var(--sb-mediterranean);
}

/* Strongback Consulting — Typography Tokens */
:root {
  /* Families — native OS stacks only, no webfont download required */
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-display-stretch: condensed;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (1.250 major-third, 16px base) */
  --text-2xs: 0.6875rem;  /* 11px — labels, legal      */
  --text-xs:  0.75rem;    /* 12px — captions, eyebrows */
  --text-sm:  0.875rem;   /* 14px — secondary, UI      */
  --text-md:  1rem;       /* 16px — body               */
  --text-lg:  1.125rem;   /* 18px — lead body          */
  --text-xl:  1.375rem;   /* 22px — H4 / card title    */
  --text-2xl: 1.75rem;    /* 28px — H3                 */
  --text-3xl: 2.25rem;    /* 36px — H2                 */
  --text-4xl: 3rem;       /* 48px — H1                 */
  --text-5xl: 3.75rem;    /* 60px — hero display       */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.16em;  /* CONSULTING-style spaced caps */
}

/* Strongback Consulting — Spacing, Radii, Elevation, Motion Tokens */
:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* Radii — restrained, corporate. Square-ish with a soft touch. */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* Border widths */
  --border-width: 1px;
  --border-width-thick: 2px;
  --rule-accent: 3px;   /* the signature short accent rule under headings */

  /* Elevation — cool, low-spread shadows (no warm tints) */
  --shadow-xs: 0 1px 2px rgba(16, 74, 110, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 74, 110, 0.10), 0 1px 2px rgba(16, 74, 110, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 74, 110, 0.10), 0 2px 4px rgba(16, 74, 110, 0.06);
  --shadow-lg: 0 12px 28px rgba(16, 74, 110, 0.14), 0 4px 10px rgba(16, 74, 110, 0.08);
  --shadow-focus: 0 0 0 3px rgba(92, 157, 217, 0.45);

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-5);

  /* Motion — quick, professional, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med:  200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* Strongback Consulting — Base element styling & utility primitives.
 * Light-touch resets so specimen cards and kits inherit the brand voice.
 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-stretch: var(--font-display-stretch);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-normal); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

/* Signature eyebrow — spaced caps echoing the "CONSULTING" wordmark line */
.sb-eyebrow {
  font-family: var(--font-display);
  font-stretch: var(--font-display-stretch);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Signature short accent rule placed under section headings */
.sb-rule {
  display: block;
  width: 48px;
  height: var(--rule-accent);
  background: var(--color-accent);
  border: 0;
  margin: var(--space-3) 0;
}

.sb-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}