/* ============================================================
   ANCILLARY — Design Tokens & Brand System
   Source: Ancillary Brand Identity V2 (17 Jan 2022)
   This is the design-system root stylesheet. Link it from any
   page (deck, site, future work) and the full token set,
   fonts, and brand atoms come with it.
   ============================================================ */

/* Brand face: Beausite Classic (commercial). Free stand-in: Hanken
   Grotesk. Logo face: Graphik Black → Hanken Grotesk ExtraBold.
   Swap the @import below for licensed @font-face rules when ready. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');

:root {
  /* ───────────────  BRAND COLORS  ─────────────── */
  --anc-orange:  #FF6432;   /* @kind color */  /* PRIMARY accent */
  --anc-black:   #000000;   /* @kind color */
  --anc-white:   #FFFFFF;   /* @kind color */
  --anc-grey:    #424242;   /* @kind color */  /* brand dark grey */

  /* SECONDARY accent — brand teal. Petrol base reads best on light
     surfaces; the bright tint is the dark-surface variant so it keeps
     presence on black the way orange does. */
  --anc-teal:        #136375;   /* @kind color */  /* secondary — light surfaces */
  --anc-teal-bright: #2EA6C2;   /* @kind color */  /* secondary — dark surfaces */

  /* ───────────────  EXTENDED NEUTRALS  ─────────────── */
  --anc-grey-1:  #f4f4f3;   /* @kind color */  /* light surface */
  --anc-grey-7:  #a8a8a6;   /* @kind color */  /* muted on dark */
  --anc-grey-8:  #6e6e6c;   /* @kind color */  /* muted on light */
  --anc-border:  #e4e4e2;   /* @kind color */

  /* ───────────────  SEMANTIC  ─────────────── */
  --fg:          #000000;
  --fg-accent:   var(--anc-orange);   /* primary accent */
  --fg-accent-2: var(--anc-teal);     /* secondary accent (light bg) */
  --bg:          var(--anc-white);
  --bg-inverse:  var(--anc-black);

  /* ───────────────  TYPOGRAPHY  ─────────────── */
  --font-display: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --font-label:   'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --font-logo:    'Hanken Grotesk', 'Helvetica Neue', sans-serif;

  --weight-light:    300;  /* @kind font */
  --weight-regular:  400;  /* @kind font */
  --weight-medium:   500;  /* @kind font */
  --weight-semibold: 600;  /* @kind font */
  --weight-bold:     700;  /* @kind font */
  --weight-black:    800;  /* @kind font */ /* logo wordmark */

  /* ───────────────  GEOMETRY  ─────────────── */
  --anc-angle:       58.85deg; /* @kind other */ /* signature rule angle */
  --duration-fast:   140ms;    /* @kind other */
  --duration-base:   220ms;    /* @kind other */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
}

/* ── Logo lockup (live-text recreation of the wordmark) ──────
   The brand A is oblique — slanted to echo the 58.85° rule. */
.anc-logo {
  font-family: var(--font-logo);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
}
.anc-logo .a {
  display: inline-block;
  transform: skewX(-14deg);
  transform-origin: 50% 100%;
  margin-right: 0.06em;
}

/* ── Graphic element: thin rule at 58.85° ──────────────────── */
.anc-diag {
  position: absolute;
  width: 1px; height: 3000px;
  background: var(--anc-orange);
  transform: rotate(31.15deg); /* vertical line tilted → 58.85° from horizontal */
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}