/* AureliusOS Design System v2, colors_and_type.css, copied verbatim except for one line:
   the Google Fonts @import is removed, so no page sends a visitor's IP address to Google.
   Hanken Grotesk and News Cycle stay in the stacks as fallbacks a visitor may have installed. */

/* ============================================================
   AureliusOS — Colors & Type
   Single source of truth for design tokens.
   Version 2.0 · Signal Green base (v1 tokens unchanged; v2 adds §13–17)
   ============================================================

   READ THIS FIRST
   ---------------
   Every visual decision in AureliusOS resolves to a token in this
   file. Components never hard-code a hex value. If a colour, size or
   duration is not here, it does not exist in the system yet — add it
   here first, then use it.

   The anchor is Signal Green (#02AD84). It is the one loud thing in
   the system: everything else is deep ink, quiet neutrals and space.
   ============================================================ */


/* ------------------------------------------------------------------
   1 · WEBFONTS

   Three faces, three jobs:

     • September            → the brand face. Wordmark, display
                              headlines, the "aurelius" in the logo.
                              Licensed from Device Fonts (Rian Hughes),
                              available through Adobe Fonts.
     • Neue Alte Grotesk    → interface headings.
     • Trade Gothic LT Pro  → body copy.

   ACTIVATING SEPTEMBER
   September is a licensed face and is deliberately NOT bundled.
   Two ways to switch it on:

     a) Adobe Fonts (recommended for web)
        Add the family to a web project in your Adobe Fonts account,
        then paste the kit <link> into your page <head>. The stack
        below picks it up automatically — no CSS change needed.

     b) Self-host
        Drop September-Regular.woff2 / -Medium.woff2 / -Bold.woff2
        into fonts/ and uncomment the @font-face blocks below.

   Until then, --font-brand falls through to Neue Alte Grotesk, which
   is metrically close enough that layouts will not reflow when you
   activate the real thing.
   ------------------------------------------------------------------ */


/* --- September (licensed — uncomment when self-hosting) ---------- */
/*
@font-face {
  font-family: "September";
  src: url("fonts/September-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "September";
  src: url("fonts/September-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "September";
  src: url("fonts/September-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

/* --- Neue Alte Grotesk — interface headings ---------------------- */
@font-face {
  font-family: "Neue Alte Grotesk";
  src: url("fonts/1-font.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Alte Grotesk";
  src: url("fonts/font.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Alte Grotesk";
  src: url("fonts/2-font.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- Trade Gothic LT Pro — body --------------------------------- */
@font-face {
  font-family: "Trade Gothic LT Pro";
  src: url("fonts/TradeGothicLTPro.otf") format("opentype"),
       url("fonts/3-font.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}


:root {

  /* ================================================================
     2 · BRAND COLOUR

     Signal Green is the anchor and the only saturated colour in the
     system. Deep Ink carries every dark surface. The teal between
     them exists to make the gradient breathe — it is a bridge, not
     a colour you reach for on its own.
     ================================================================ */

  --aos-green:            #02AD84;   /* Signal Green — the brand anchor */
  --aos-green-deep:       #018768;   /* pressed / hover on solid green */
  --aos-green-bright:     #24D5A6;   /* accent on dark surfaces only */
  --aos-green-quiet:      #6FE3C4;   /* decorative, large areas, dark bg */

  --aos-ink:              #0C2733;   /* primary dark — the wordmark ink */
  --aos-ink-deep:         #071A23;   /* deepest surface, section breaks */
  --aos-teal:             #14424F;   /* gradient bridge, secondary dark */
  --aos-slate:            #1E3A44;   /* raised dark surface, dark cards */

  /* ================================================================
     3 · BRAND GRADIENT — THE SIGNATURE

     One gradient, five framings. This is the most recognisable thing
     in the system: green resolving into ink. Use it on accent bars,
     the monogram, emphasis words, section-break fields and the
     4px L-borders. Never as a full-bleed background behind body copy.
     ================================================================ */

  --aos-gradient:           linear-gradient(90deg, #02AD84 8%, #0C2733 92%);
  --aos-gradient-diagonal:  linear-gradient(to right top, #02AD84 8%, #0C2733 92%);
  --aos-gradient-vertical:  linear-gradient(180deg, #02AD84 0%, #0C2733 100%);
  --aos-gradient-radial:    radial-gradient(circle at bottom left, #02AD84 4%, #0C2733 46%);
  --aos-gradient-extended:  linear-gradient(90deg, #02AD84 0%, #14424F 52%, #0C2733 100%);

  /* ================================================================
     4 · NEUTRALS & SURFACES
     ================================================================ */

  --aos-surface:          #FFFFFF;   /* cards, panels, primary surface */
  --aos-bg:               #F7F9F9;   /* page background */
  --aos-bg-sunk:          #EFF3F3;   /* wells, inset areas */
  --aos-mist:             #E4EDEC;   /* dividers on tinted ground */

  --aos-border:           #E2E8E8;   /* default hairline */
  --aos-border-soft:      #EDF1F1;   /* internal separators */
  --aos-border-strong:    #C9D4D4;   /* inputs, focus-adjacent */

  /* Text — descending contrast. Every step is AA on --aos-surface. */
  --aos-text:             #0C2733;   /* primary text (same as ink) */
  --aos-text-2:           #38505A;   /* secondary, supporting copy */
  --aos-text-3:           #5A7079;   /* tertiary, captions, meta */
  --aos-text-4:           #8399A0;   /* placeholders, disabled */

  /* On dark surfaces */
  --aos-on-dark:          #FFFFFF;
  --aos-on-dark-2:        rgba(255,255,255,0.76);
  --aos-on-dark-3:        rgba(255,255,255,0.54);
  --aos-on-dark-border:   rgba(255,255,255,0.16);

  /* ================================================================
     5 · TINTS
     Green-derived washes for large calm areas. These carry the brand
     without shouting; use them behind cards, callouts and table rows.
     ================================================================ */

  --aos-tint-green:       #E8F8F3;
  --aos-tint-green-deep:  #D0F2E8;
  --aos-tint-teal:        #E3EFF1;
  --aos-tint-ink:         #EAEEF0;

  /* ================================================================
     6 · SEMANTIC
     Deliberately desaturated so nothing competes with Signal Green.
     Positive is a deeper teal-green — never reuse the brand green for
     a success state, or "good" and "brand" become the same signal.

     Every semantic colour clears AA (4.5:1) both on white and on its
     own tint, so a coloured label on a tinted chip is always legal:
       positive  4.59 on tint · 5.30 on white
       warning   6.25 on tint · 7.05 on white
       negative  6.27 on tint · 7.54 on white
       info      5.82 on tint · 6.84 on white
     ================================================================ */

  --aos-positive:         #0B7A5E;
  --aos-positive-tint:    #DFF3ED;
  --aos-warning:          #7E4E00;
  --aos-warning-tint:     #FBF0DC;
  --aos-negative:         #A32020;
  --aos-negative-tint:    #F8E6E6;
  --aos-info:             #1F5F8B;
  --aos-info-tint:        #E4EEF5;

  /* ================================================================
     7 · TYPE STACKS
     ================================================================ */

  --font-brand:  "September", "Neue Alte Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-display:"Neue Alte Grotesk", "Hanken Grotesk", "Neue Haas Grotesk", Arial, sans-serif;
  --font-body:   "Trade Gothic LT Pro", "News Cycle", "Trade Gothic", Arial, sans-serif;
  --font-slide-heading: "Hanken Grotesk", "Neue Haas Grotesk", sans-serif;
  --font-slide-body:    "News Cycle", "News Gothic MT", sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes — web */
  --fs-display:  72px;
  --fs-h1:       52px;
  --fs-h2:       42px;
  --fs-h3:       32px;
  --fs-h4:       22px;
  --fs-featured: 28px;
  --fs-lead:     19px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-eyebrow:  13px;
  --fs-xs:       12px;

  /* Sizes — slides (1280×720 canvas)
     Calibrated for a projected 16:9 surface, where anything under
     ~16px stops being readable from the back of a room. */
  --fs-slide-hero:     64px;
  --fs-slide-title:    44px;
  --fs-slide-subtitle: 18px;
  --fs-slide-body:     16px;
  --fs-slide-bullet:   15px;
  --fs-slide-meta:     11px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-body:    1.6;

  /* Tracking */
  --ls-eyebrow: 0.14em;
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;

  /* ================================================================
     8 · SPACE, RADII, ELEVATION
     Radii are the quiet signature: nothing in AureliusOS has a square
     corner. 8 / 16 / 20 / 32 / 40, plus the pill.
     ================================================================ */

  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  56px;
  --space-2xl: 96px;

  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-card:  20px;
  --radius-lg:    32px;
  --radius-xl:    40px;
  --radius-pill:  9999px;

  /* Elevation. The offset shadow is the brand's structural signature:
     a hard 4px displacement in a brand colour, no blur. Use it on
     cards that matter. The soft shadows are for genuine floating UI
     (menus, popovers) only. */
  --shadow-offset-ink:    4px 4px 0 0 #0C2733;
  --shadow-offset-green:  4px 4px 0 0 #02AD84;
  --shadow-offset-teal:   4px 4px 0 0 #14424F;
  --shadow-soft:          0 2px 8px rgba(12,39,51,0.07);
  --shadow-card:          0 6px 24px rgba(12,39,51,0.09);
  --shadow-float:         0 16px 48px rgba(12,39,51,0.16);

  /* Focus — visible, branded, never removed. */
  --focus-ring: 0 0 0 3px rgba(2,173,132,0.42);

  /* ================================================================
     9 · LAYOUT WIDTHS
     ================================================================ */

  --w-narrow: 680px;
  --w-normal: 980px;
  --w-wide:   1280px;
  --w-xwide:  1600px;

  /* ================================================================
     10 · MOTION

     House curves. Built-in CSS easings are too weak to read as
     intentional. Discrete state changes use transitions with
     --ease-out. Anything the pointer drives uses a spring in JS,
     not these curves — see SKILL.md.
     ================================================================ */

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press:   120ms;   /* button feedback */
  --dur-fast:    160ms;   /* tooltips, small popovers */
  --dur-base:    220ms;   /* dropdowns, selects */
  --dur-slow:    320ms;   /* modals, drawers */
}


/* ------------------------------------------------------------------
   11 · REDUCED MOTION
   Gentler, not none: keep opacity and colour, drop movement.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 1ms;
    --dur-fast:  1ms;
    --dur-base:  1ms;
    --dur-slow:  1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}


/* ------------------------------------------------------------------
   12 · UTILITIES
   The few things every surface needs. Everything else belongs in a
   component.
   ------------------------------------------------------------------ */

.aos-gradient-text {
  background: var(--aos-gradient-diagonal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The L-border: a 4px gradient rule anchoring a corner. Used on
   slides and hero sections to frame content without boxing it in. */
.aos-l-border::before,
.aos-l-border::after {
  content: "";
  position: absolute;
  background: var(--aos-gradient-vertical);
  border-radius: 4px;
}
.aos-l-border::before { left: 0; top: 0; bottom: 0; width: 4px; }
.aos-l-border::after  { left: 0; bottom: 0; width: 120px; height: 4px;
                        background: var(--aos-gradient); }

.aos-focus:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Gate hover effects — never let a touch device inherit a hover state. */
@media (hover: hover) and (pointer: fine) {
  .aos-hover-lift {
    transition: transform var(--dur-base) var(--ease-out);
  }
  .aos-hover-lift:hover { transform: translateY(-2px); }
}


/* ==================================================================
   v2.0 ADDITIONS (October 2026)
   Everything below was added in v2. Nothing above changed: no colour,
   gradient, type, spacing, radius, shadow or motion value from v1 was
   altered. New tokens only reference v1 tokens.
   ================================================================== */

:root {

  /* ================================================================
     13 · ICONS
     The 500-glyph line set (assets/icons/, ui_kits/atoms/Icon.jsx).
     Two strokes: ink carries the structure, Signal Green carries the
     one path that holds the meaning. On ink and gradient grounds the
     structure turns white and the meaning moves to the bright green,
     which exists for exactly that job.
     ================================================================ */

  --aos-icon-line:           var(--aos-ink);
  --aos-icon-accent:         var(--aos-green);
  --aos-icon-line-inverse:   var(--aos-on-dark);
  --aos-icon-accent-inverse: var(--aos-green-bright);

  /* Icon sizes. 24 is the default; nothing sits between steps. */
  --icon-xs:  16px;   /* inline with body copy */
  --icon-sm:  20px;   /* buttons, inputs, menus */
  --icon-md:  24px;   /* default, feature rows */
  --icon-lg:  32px;   /* card slots, next to a metric */
  --icon-xl:  48px;   /* feature tiles */
  --icon-2xl: 64px;   /* hero, empty states */

  /* ================================================================
     14 · ROLE ALIASES
     Short semantic names for tools and generated code that expect a
     foreground / background / accent triple. Each is an alias of a v1
     token, never a new value.
     ================================================================ */

  --fg1: var(--aos-text);
  --fg2: var(--aos-text-2);
  --fg3: var(--aos-text-3);
  --bg1: var(--aos-surface);
  --bg2: var(--aos-bg);
  --bg3: var(--aos-tint-green);
  --accent: var(--aos-green);

  /* ================================================================
     15 · HAIRLINES
     Border shorthands so components stop re-typing "1px solid".
     ================================================================ */

  --border-hairline:        1px solid var(--aos-border);
  --border-hairline-soft:   1px solid var(--aos-border-soft);
  --border-hairline-strong: 1px solid var(--aos-border-strong);
}


/* ------------------------------------------------------------------
   16 · TYPE UTILITIES
   Classes for the recurring web text patterns, so a page does not
   rebuild them from five custom properties each time.
   ------------------------------------------------------------------ */

/* Eyebrow — web and marketing only, never on a slide. ALL CAPS at
   --ls-eyebrow, the one place caps are allowed. */
.aos-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--aos-text-2);
  margin-bottom: 16px;
}
/* With the Signal Green dot, for an eyebrow that leads a section. */
.aos-eyebrow--dot { position: relative; padding-left: 22px; }
.aos-eyebrow--dot::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: var(--radius-pill);
  background: var(--aos-green);
}

/* Featured (sub-hero) title, directly under an H1. */
.aos-featured-title {
  font-family: var(--font-display);
  font-size: var(--fs-featured);
  font-weight: 500;
  color: var(--aos-text);
  line-height: var(--lh-snug);
  margin: 12px 0 24px;
}

/* Triangle-bullet list — the brand bullet from preview/brand-marks.html
   as a reusable list. Replaces dots, dashes and diamonds everywhere. */
.aos-tri-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aos-tri-list > li { display: flex; gap: 12px; align-items: flex-start; }
.aos-tri-list > li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 0.45em;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--aos-ink);
}


/* ------------------------------------------------------------------
   17 · SEMANTIC ELEMENT DEFAULTS — opt in
   Put class="aos-base" on <body> (or any wrapper) and raw headings,
   paragraphs and links take the system defaults. Opt-in on purpose:
   v1 surfaces style their elements explicitly and must not shift.
   ------------------------------------------------------------------ */

.aos-base {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--aos-text);
  background: var(--aos-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.aos-base :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--aos-text);
  line-height: var(--lh-snug);
  margin: 0 0 0.5em;
}
.aos-base :where(h1) { font-size: var(--fs-h1); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.aos-base :where(h2) { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); }
.aos-base :where(h3) { font-size: var(--fs-h3); letter-spacing: var(--ls-tight); }
.aos-base :where(h4) { font-size: var(--fs-h4); }
.aos-base :where(h5) { font-size: var(--fs-lead); }
.aos-base :where(h6) { font-size: var(--fs-body); }
.aos-base :where(p)  { margin: 0 0 1em; }
.aos-base :where(small) { font-size: var(--fs-sm); color: var(--aos-text-2); }
.aos-base :where(code, pre) { font-family: var(--font-mono); font-size: var(--fs-sm); }
.aos-base :where(a) { color: var(--aos-green-deep); text-decoration: underline; text-underline-offset: 2px; }
.aos-base :where(a):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .aos-base :where(a) { transition: color var(--dur-fast) var(--ease-out); }
  .aos-base :where(a):hover { color: var(--aos-text); }
}