/* ==========================================================================
   TwelveTwo Digital — Brand Tokens
   --------------------------------------------------------------------------
   Version: v2.0
   Date:    2026-06-19
   Source:  ~/Kosie/ventures/twelvetwo-digital/brand/
            colours.md · typography.md · logo-usage.md · voice-and-tone.md · design-brief.md
   v1.1:    Added --colour-slate-blue (sixth brand colour) and the
            --colour-text-secondary semantic alias.
   v2.0:    Website rebuild reconciliation (design-brief v2.0).
            - Heading face Space Grotesk -> Geist; mono JetBrains Mono -> Geist Mono (brand-wide).
            - Added P3 wide-gamut variants for cyan/orange (and tints) via @supports.
            - Added motion + elevation tokens (--ease-swift, --ease-snappy, durations,
              --inset-highlight) from the aave/todesktop reference study.
            Palette values, spacing, scale, and the tagline are unchanged. Tagline fate
            (terminal framing) is OPEN pending sign-off — see design-brief v2.0 §5.4.
   --------------------------------------------------------------------------
   Single source of truth for every TwelveTwo-branded surface that renders
   via HTML/CSS or a PDF engine that consumes CSS. Reference these tokens;
   do not hard-code values.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     1. Colour — raw palette
     ---------------------------------------------------------------------- */
  --colour-deep-black:   #0B0F14;
  --colour-charcoal:     #2A3138;
  --colour-off-white:    #F5F4F1;
  --colour-slate-blue:   #8CA6BC;  /* Secondary text / wordmark partner */
  --colour-cyan:         #00C7FF;
  --colour-orange:       #FF6A00;

  /* ----------------------------------------------------------------------
     2. Colour — semantic aliases (dark theme default)
     ---------------------------------------------------------------------- */
  --colour-background:        var(--colour-deep-black);
  --colour-surface:           var(--colour-charcoal);
  --colour-text:              var(--colour-off-white);
  --colour-text-secondary:    var(--colour-slate-blue);   /* DIGITAL wordmark partner, captions, footers */
  --colour-text-muted:        rgba(245, 244, 241, 0.72);
  --colour-text-subtle:       rgba(245, 244, 241, 0.52);
  --colour-accent-primary:    var(--colour-cyan);
  --colour-accent-secondary:  var(--colour-orange);
  --colour-link:              var(--colour-cyan);
  --colour-link-hover:        var(--colour-orange);
  --colour-focus-ring:        var(--colour-cyan);
  /* Selection background: opacity 0.28 tuned by eye for legibility against highlighted text.
     Sits outside the named overlay token set (cyan-12, cyan-24) by design — it has no other
     consumer, and naming a token for a single use case would dilute the overlay system.
     If a second use case emerges, promote it to a named token at that point. */
  --colour-selection-bg:      rgba(0, 199, 255, 0.28);
  --colour-selection-text:    var(--colour-off-white);

  /* ----------------------------------------------------------------------
     3. Colour — subtle variations (borders, dividers, overlays)
     ---------------------------------------------------------------------- */
  --colour-border:            rgba(245, 244, 241, 0.12);
  --colour-border-strong:     rgba(245, 244, 241, 0.24);
  --colour-divider:           rgba(245, 244, 241, 0.08);
  --colour-overlay-04:        rgba(245, 244, 241, 0.04);
  --colour-overlay-08:        rgba(245, 244, 241, 0.08);
  --colour-overlay-12:        rgba(245, 244, 241, 0.12);
  --colour-overlay-24:        rgba(245, 244, 241, 0.24);
  --colour-scrim:             rgba(11, 15, 20, 0.72);

  --colour-cyan-12:           rgba(0, 199, 255, 0.12);
  --colour-cyan-24:           rgba(0, 199, 255, 0.24);
  --colour-orange-12:         rgba(255, 106, 0, 0.12);
  --colour-orange-24:         rgba(255, 106, 0, 0.24);

  /* ----------------------------------------------------------------------
     4. Typography — families (with fallbacks)
     ---------------------------------------------------------------------- */
  --font-heading: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

  /* ----------------------------------------------------------------------
     5. Typography — weights
     ---------------------------------------------------------------------- */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* ----------------------------------------------------------------------
     6. Typography — scale (rem-based, 16px root)
     ---------------------------------------------------------------------- */
  --text-h1:        3.052rem;   /* 48.83px */
  --text-h2:        2.441rem;   /* 39.06px */
  --text-h3:        1.953rem;   /* 31.25px */
  --text-h4:        1.563rem;   /* 25.00px */
  --text-h5:        1.25rem;    /* 20.00px */
  --text-h6:        1.0rem;     /* 16.00px */
  --text-lead:      1.25rem;    /* 20.00px */
  --text-body:      1.0rem;     /* 16.00px */
  --text-small:     0.875rem;   /* 14.00px */
  --text-caption:   0.75rem;    /* 12.00px */
  --text-code:      0.9375rem;  /* 15.00px */
  --text-tagline:   1.25rem;    /* 20.00px */

  /* ----------------------------------------------------------------------
     7. Typography — line heights
     ---------------------------------------------------------------------- */
  --line-tight:    1.15;
  --line-snug:     1.25;
  --line-normal:   1.4;
  --line-relaxed:  1.55;
  --line-loose:    1.6;

  /* ----------------------------------------------------------------------
     8. Typography — letter spacing
     ---------------------------------------------------------------------- */
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.02em;
  --tracking-wider:     0.04em;

  /* ----------------------------------------------------------------------
     9. Spacing scale (4px base)
     ---------------------------------------------------------------------- */
  --space-0:    0;
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */

  /* ----------------------------------------------------------------------
     10. Border — radius and widths
     ---------------------------------------------------------------------- */
  --radius-none:  0;
  --radius-sm:    0.25rem;   /*  4px — chips, inputs */
  --radius-md:    0.5rem;    /*  8px — cards, buttons */
  --radius-lg:    0.75rem;   /* 12px — large panels */
  --radius-xl:    1rem;      /* 16px — hero plates */
  --radius-pill:  9999px;    /*       — fully rounded */

  --border-width-1: 1px;
  --border-width-2: 2px;

  /* ----------------------------------------------------------------------
     10.5 Motion & elevation (v2.0 — from the reference study, aave + todesktop)
     ---------------------------------------------------------------------- */
  --ease-swift:        cubic-bezier(0.19, 1, 0.22, 1);        /* hero / scroll-enter reveals, large elements */
  --ease-snappy:       cubic-bezier(0.175, 0.885, 0.32, 1.1); /* buttons / small interactive — slight overshoot */
  --duration-reveal:   600ms;                                  /* scroll-enter fade-up */
  --duration-section:  400ms;                                  /* background-colour flow between sections */
  --duration-hover:    180ms;                                  /* triggered hover lift */
  --inset-highlight:   rgba(255, 255, 255, 0.12);              /* lit-from-above top edge on raised surfaces (dark) */

  /* ----------------------------------------------------------------------
     11. Layout — page dimensions (A4 at 96dpi)
     ---------------------------------------------------------------------- */
  --page-a4-width:    210mm;
  --page-a4-height:   297mm;
  --page-margin-x:    18mm;
  --page-margin-y:    20mm;
  --page-content-width: calc(var(--page-a4-width) - (var(--page-margin-x) * 2));

  /* ----------------------------------------------------------------------
     12. Brand — non-CSS-property tokens surfaced as custom properties
     ---------------------------------------------------------------------- */
  --brand-name:      "TwelveTwo Digital";
  --brand-version:   "v2.0";
  --brand-tagline:   "> INTELLIGENCE, IMPLEMENTED._"; /* RESOLVED 2026-09-09: footer signature only, never a hero/header (design-brief v3.0 §5.4) */

}

/* ==========================================================================
   P3 wide-gamut colour (v2.0)
   --------------------------------------------------------------------------
   On displays that support it, cyan and orange render in the wider P3 gamut
   so the accents genuinely glow. The semantic aliases (accent-primary, link,
   focus-ring, etc.) reference --colour-cyan / --colour-orange, so overriding
   the raw tokens cascades automatically. sRGB hex above stays the fallback.
   ========================================================================== */

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --colour-cyan:          color(display-p3 0 0.7804 1);
    --colour-orange:        color(display-p3 1 0.4157 0);
    --colour-cyan-12:       color(display-p3 0 0.7804 1 / 0.12);
    --colour-cyan-24:       color(display-p3 0 0.7804 1 / 0.24);
    --colour-orange-12:     color(display-p3 1 0.4157 0 / 0.12);
    --colour-orange-24:     color(display-p3 1 0.4157 0 / 0.24);
    --colour-selection-bg:  color(display-p3 0 0.7804 1 / 0.28);
  }
  .theme-light {
    --colour-selection-bg:  color(display-p3 0 0.7804 1 / 0.20);
  }
}

/* ==========================================================================
   Base typography defaults
   --------------------------------------------------------------------------
   Apply the brand to the document. Consuming projects may override; the
   defaults exist so a bare HTML render still lands on-brand.
   ========================================================================== */

html {
  font-size: 16px;
}

body {
  margin: 0;
  background-color: var(--colour-background);
  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-loose);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--colour-text);
  margin: 0 0 var(--space-4) 0;
}

h1 {
  font-size: var(--text-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-snug);
  letter-spacing: var(--tracking-snug);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-snug);
  letter-spacing: var(--tracking-snug);
}

h4 {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
}

h5 {
  font-size: var(--text-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
}

h6 {
  font-size: var(--text-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

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

a {
  color: var(--colour-link);
  text-decoration: none;
  transition: color 120ms ease;
}

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

a:focus-visible {
  outline: var(--border-width-2) solid var(--colour-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

code {
  background-color: var(--colour-overlay-08);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

pre {
  background-color: var(--colour-surface);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  line-height: var(--line-relaxed);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

hr {
  border: 0;
  height: var(--border-width-1);
  background-color: var(--colour-divider);
  margin: var(--space-8) 0;
}

::selection {
  background-color: var(--colour-selection-bg);
  color: var(--colour-selection-text);
}

/* The tagline — render with the canonical class. */
.twelvetwo-tagline {
  font-family: var(--font-mono);
  font-size: var(--text-tagline);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--line-normal);
  color: var(--colour-text);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   Light theme override
   --------------------------------------------------------------------------
   Apply `.theme-light` to <html> or a containing element to flip the
   semantic aliases. The raw palette tokens do not change — only the
   semantic mappings invert. Cyan and Orange retain their original hex
   values; they are not inverted (see colours.md § 2 and § 4).
   ========================================================================== */

.theme-light {
  --colour-background:        var(--colour-off-white);
  --colour-surface:           #EDECE8;                       /* Off-White × 0.96 */
  --colour-text:              var(--colour-deep-black);
  --colour-text-secondary:    var(--colour-charcoal);        /* Slate-Blue fails AA on light — swap to Charcoal */
  --colour-text-muted:        rgba(11, 15, 20, 0.72);
  --colour-text-subtle:       rgba(11, 15, 20, 0.52);
  --colour-link:              var(--colour-deep-black);
  --colour-link-hover:        var(--colour-orange);
  --colour-focus-ring:        var(--colour-deep-black);
  /* Selection background: opacity 0.20 (lighter than dark-theme 0.28 — less visual weight
     needed on an Off-White surface). Same rationale: single-use, outside the named overlay
     token set by design. Promote to a named token if reused. */
  --colour-selection-bg:      rgba(0, 199, 255, 0.20);
  --colour-selection-text:    var(--colour-deep-black);

  --colour-border:            rgba(11, 15, 20, 0.12);
  --colour-border-strong:     rgba(11, 15, 20, 0.24);
  --colour-divider:           rgba(11, 15, 20, 0.08);
  --colour-overlay-04:        rgba(11, 15, 20, 0.04);
  --colour-overlay-08:        rgba(11, 15, 20, 0.08);
  --colour-overlay-12:        rgba(11, 15, 20, 0.12);
  --colour-overlay-24:        rgba(11, 15, 20, 0.24);
  --colour-scrim:             rgba(245, 244, 241, 0.72);
}

/* ==========================================================================
   Reduced-motion accommodation
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* end of brand-tokens.css */