/* Fonts: self-hosted IBM Plex Sans, IBM Plex Sans Condensed, DM Mono, Inter (latin, latin-ext) */
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GigOpsAi Design System: flattened stylesheet (generated by scripts/copy-assets.mjs). */


/* ============================================================
   GigOpsAi: Design Tokens
   The canonical brand tokens from gigopsai-brand.css (the "road
   case" language: hard edges, rules instead of glow, condensed caps,
   mono figures), the per-flavor accents and logo trios from the
   body[data-flavor] blocks in gigops.html, and the app-name aliases
   the GigOps product uses at scale (--blue, --text, ...). Those two
   files are the source of truth; keep this one in step with them.
   ============================================================ */

:root {
  /* ── Brand colors (canonical) ── */
  --color-primary:        #3B6CF6;   /* Signal Blue: CTAs, links, active states */
  --color-primary-dark:   #1C3D8A;   /* Signal Blue Dark: pressed and hover fills, headings on tint */
  --color-primary-light:  #5B8BF5;   /* Sky Pulse: hover states, accents */
  --color-primary-tint:   #EEF3FF;   /* Cloud Tint: backgrounds, badge fills */
  --color-primary-border: #C5D4FA;   /* Outline buttons */

  /* ── Logo: gradient stops and wordmark accent (GigOps.AI and TourOps) ── */
  --logo-1:               #1C3D8A;   /* gradient start, top left */
  --logo-2:               #3B6CF6;   /* gradient 60% stop and wordmark accent */
  --logo-3:               #5B8BFF;   /* gradient end, bottom right */
  --logo-dot:             inline;    /* the pale dot on the mark (display value) */
  --logo-board:           none;      /* the ActionOps skateboard in its place */

  --color-dark:           #0A0F1E;   /* Stage Dark: primary text, dark surfaces */
  --color-bg:             #F5F7FF;   /* Off White: page background */
  --color-surface:        #FFFFFF;   /* Cards, modals */
  --color-border:         #C8D2E8;   /* Dividers, card borders: a real rule, not a hairline */
  --color-rule:           #97A6C4;   /* Emphatic rule: section heads, table heads, metric tops */
  --color-muted:          #6B7A99;   /* Secondary text, labels */
  --color-subtle:         #99A8C6;   /* Tertiary text, placeholders */

  /* ── Status ── */
  --color-success:        #1E7B4B;
  --color-success-tint:   #E6F5EE;
  --color-warning:        #C4460A;
  --color-warning-tint:   #FFF3EE;
  --color-neutral-tint:   #F0F2F7;

  /* ── Typography ──
     Plex Sans is the workhorse; Plex Sans Condensed carries every heading
     and uppercase label, so heading/body contrast comes from width as well
     as weight; DM Mono sets figures, codes and times; Inter is the wordmark
     and nothing else. */
  --font-sans:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cond:   'IBM Plex Sans Condensed', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:   'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-logo:   'Inter', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;   /* wordmark only */

  --text-display:  700;   /* Headlines: heavy and condensed, never hairline */
  --text-body:     400;   /* Body copy */
  --text-medium:   500;   /* Subheadings, nav */
  --text-semibold: 600;   /* Buttons, labels */

  --size-display: 2rem;     /* 32px */
  --size-h1:      1.75rem;  /* 28px */
  --size-h2:      1.375rem; /* 22px */
  --size-h3:      1.125rem; /* 18px */
  --size-body:    1rem;     /* 16px */
  --size-small:   0.875rem; /* 14px */
  --size-label:   0.6875rem;/* 11px */

  --leading-tight:  1.15;
  --leading-normal: 1.6;
  --tracking-wide:  0.08em;

  /* ── Spacing scale ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  80px;

  /* ── Radius ──
     Near-square by intent, and each step means something: controls,
     containers, then the one platform-mandated app-icon shape. */
  --radius-sm:   2px;    /* inputs, chips, badges */
  --radius-md:   3px;    /* buttons, cards */
  --radius-lg:   4px;    /* panels, modals */
  --radius-pill: 999px;  /* reserved: avatars and status dots only */
  --radius-app:  22px;   /* iOS app-icon mask: a platform requirement, not a style */

  /* ── Shadows ──
     Only for things that genuinely float (modals, menus, toasts). Neutral
     and tight, so elevation reads as a cast shadow, not a glow. A card in
     the page flow gets a border instead. */
  --shadow-sm:  0 1px 2px rgba(10,15,30,0.10);
  --shadow-md:  0 2px 6px rgba(10,15,30,0.14);
  --shadow-lg:  0 6px 18px rgba(10,15,30,0.20);

  --focus-ring: rgba(59,108,246,0.5);
}

/* ============================================================
   Flavors
   One engine, five products. GigOps.AI and TourOps use the Signal
   Blue above; the other flavors swap only the accent family and the
   logo trio, and leave the neutrals and the status colors alone
   (FestivalOps emerald is not --color-success). Put data-flavor on
   any container (a page, a section, a card) and everything inside
   follows: buttons, links, badges, metric accents, the AppIcon mark
   (ActionOps swaps its dot for a skateboard) and the Wordmark accent. data-flavor="tour" resets to Signal Blue
   inside another flavor.

   Values are the light-mode ones from gigops.html: the accent, wash,
   focus ring and tinted-button border from the body[data-flavor]
   blocks, and the --logo trio. The dark and light accents are the
   trio's outer stops.
   ============================================================ */

[data-flavor="tour"] {
  --color-primary:        #3B6CF6;
  --color-primary-dark:   #1C3D8A;
  --color-primary-light:  #5B8BF5;
  --color-primary-tint:   #EEF3FF;
  --color-primary-border: #C5D4FA;
  --logo-1: #1C3D8A;  --logo-2: #3B6CF6;  --logo-3: #5B8BFF;
  --logo-dot: inline;  --logo-board: none;
  --focus-ring: rgba(59,108,246,0.5);
}

[data-flavor="festival"] {
  --color-primary:        #047857;   /* emerald: solid buttons hold white text */
  --color-primary-dark:   #03543F;
  --color-primary-light:  #10B981;
  --color-primary-tint:   #E3F5EF;
  --color-primary-border: rgba(16,185,129,0.28);
  --logo-1: #03543F;  --logo-2: #047857;  --logo-3: #10B981;
  --logo-dot: inline;  --logo-board: none;
  --focus-ring: rgba(4,120,87,0.5);
}

[data-flavor="venue"] {
  --color-primary:        #A8432A;   /* brick: the house, not the road */
  --color-primary-dark:   #7C2D12;
  --color-primary-light:  #DF7149;
  --color-primary-tint:   #F8E9E2;
  --color-primary-border: rgba(207,95,54,0.28);
  --logo-1: #7C2D12;  --logo-2: #B5451B;  --logo-3: #DF7149;
  --logo-dot: inline;  --logo-board: none;
  --focus-ring: rgba(168,67,42,0.5);
}

[data-flavor="promoter"] {
  --color-primary:        #6D28D9;   /* violet: the money side of the show */
  --color-primary-dark:   #3B1685;
  --color-primary-light:  #8B5CF6;
  --color-primary-tint:   #EFEAFD;
  --color-primary-border: rgba(139,92,246,0.28);
  --logo-1: #3B1685;  --logo-2: #6D28D9;  --logo-3: #8B5CF6;
  --logo-dot: inline;  --logo-board: none;
  --focus-ring: rgba(109,40,217,0.5);
}

[data-flavor="action"] {
  --color-primary:        #C2410C;   /* orange: reads on snow and in sunlight */
  --color-primary-dark:   #7C2D12;
  --color-primary-light:  #F97316;
  --color-primary-tint:   #FDEBDD;
  --color-primary-border: rgba(234,88,12,0.28);
  --logo-1: #7C2D12;  --logo-2: #C2410C;  --logo-3: #F97316;
  --logo-dot: none;    --logo-board: inline;
  --focus-ring: rgba(194,65,12,0.5);
}

/* ============================================================
   App-name aliases: the token vocabulary used across gigops.html
   (var(--blue), var(--text), ...), at the app's light-mode values.
   Most alias a brand name; secondary text, tertiary text and the
   strong border are the app's own darker values (its AA contrast
   pass), a step past --color-muted and --color-subtle.

   Declared on :root AND on every [data-flavor] container: a custom
   property that refers to another resolves where it is declared, so
   on :root alone --blue would stay Signal Blue inside a flavor.
   ============================================================ */

:root,
[data-flavor] {
  --blue:    var(--color-primary);
  --bbg:     var(--color-primary-tint);
  --bg4:     var(--color-primary-tint);
  --text:    var(--color-dark);
  --text2:   #556385;
  --text3:   #64739A;
  --bg:      var(--color-bg);
  --bg2:     var(--color-surface);
  --bg3:     var(--color-neutral-tint);
  --border:  var(--color-border);
  --border2: #B4C2DE;
  --rule:    var(--color-rule);
  --green:   var(--color-success);
  --gbg:     var(--color-success-tint);
  --amber:   var(--color-warning);
  --abg:     var(--color-warning-tint);
}

:root {
  /* App accent colors outside the brand core: real light-mode values */
  --red:    #dc2626;
  --rbg:    rgba(220,38,38,0.08);
  --purple: #7c3aed;
  --pbg:    rgba(124,58,237,0.1);
  --teal:   #0d9488;
  --tbg:    #E0F2F1;
}

/* ============================================================
   GigOpsAi: Component styles
   The component classes from gigopsai-brand.css, consumed by the
   React components in this package. Every rule reads from the tokens
   in tokens.css, so a [data-flavor] container re-skins them all.

   House rules (from the brand file): headings and uppercase labels
   take --font-cond, body copy --font-sans, figures --font-mono. No
   gradient fills except the logo mark. No backdrop-filter. Shadows
   only on things that float. Radius stops at 4px (--radius-pill for
   avatars and dots, --radius-app for the iOS icon mask). Hover
   changes colour, never lifts or scales. Tokens only.
   ============================================================ */

/* ── Base ── */
.gigops-base {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-dark);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Typography
   Headings are condensed and set tight; body is the regular width.
   ============================================================ */

.text-display {
  font-family: var(--font-cond);
  font-size: var(--size-display);
  font-weight: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--color-dark);
}

.text-h1 {
  font-family: var(--font-cond);
  font-size: var(--size-h1);
  font-weight: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.text-h2 {
  font-family: var(--font-cond);
  font-size: var(--size-h2);
  font-weight: var(--text-semibold);
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.text-h3 {
  font-family: var(--font-cond);
  font-size: var(--size-h3);
  font-weight: var(--text-semibold);
}

/* The body sizes carry the body face too, so Text reads right on a page
   that has not applied .gigops-base. */
.text-body   { font-family: var(--font-sans); font-size: var(--size-body); font-weight: var(--text-body); }
.text-small  { font-family: var(--font-sans); font-size: var(--size-small); }
.text-muted  { color: var(--color-muted); }
.text-subtle { color: var(--color-subtle); }
.text-primary-color { color: var(--color-primary); }

/* Figures, codes, timestamps, currency. Tabular so columns align. */
.text-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.text-label {
  font-family: var(--font-cond);
  font-size: var(--size-label);
  font-weight: var(--text-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ============================================================
   Wordmark
   Inter Light base word, Inter Bold accent in the logo color.
   ============================================================ */

.wordmark {
  font-family: var(--font-logo);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}

.wordmark__ai {
  font-weight: 700;
  color: var(--logo-2);
}

/* ============================================================
   Logo mark (AppIcon)
   The one gradient in the brand. The stops read --logo-1/2/3, so the
   mark follows the nearest [data-flavor]; the SVG's own stop colors
   are the Signal Blue fallback. ActionOps swaps the pale dot for a
   skateboard, as the app does. Custom properties rather than
   descendant selectors, so a flavor nested inside another resolves
   to the nearest one.
   ============================================================ */

.app-icon__stop-1 { stop-color: var(--logo-1); }
.app-icon__stop-2 { stop-color: var(--logo-2); }
.app-icon__stop-3 { stop-color: var(--logo-3); }

.app-icon__dot   { display: var(--logo-dot, inline); }
.app-icon__board { display: var(--logo-board, none); }

/* ============================================================
   Buttons
   Flat fills. The hierarchy is fill vs. outline vs. bare.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-weight: var(--text-semibold);
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background-color 0.12s ease;
  text-decoration: none;
}

.btn:not(:disabled):active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}
.btn-primary:not(:disabled):hover { background: var(--color-primary-dark); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
}
.btn-outline:not(:disabled):hover { background: var(--color-primary-tint); }

.btn-ghost {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.btn-ghost:not(:disabled):hover { background: var(--color-neutral-tint); }

.btn-sm { padding: 7px 14px; font-size: var(--size-label); }
.btn-lg { padding: 13px 28px; font-size: var(--size-body); }

/* ============================================================
   Cards
   Border, no shadow. A surface that IS raised (a menu, a modal, a
   framed hero screenshot) opts in to the shadow and reads as raised.
   ============================================================ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.card-sm { padding: var(--space-4); }
.card-lg { padding: var(--space-6); border-radius: var(--radius-lg); }

/* Opt in for genuinely floating surfaces only. */
.card-raised { box-shadow: var(--shadow-lg); }

/* ============================================================
   Badges
   Squared tags with a status bar down the left edge, a flag on a
   printed line rather than a pill. Condensed caps keep them short.
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px 3px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: var(--text-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.badge::before {
  content: '';
  display: inline-block;
  align-self: stretch;
  width: 3px;
  background: currentColor;
}

.badge-live       { background: var(--color-success-tint); color: var(--color-success); }
.badge-scheduled  { background: var(--color-primary-tint);  color: var(--color-primary-dark); }
.badge-review     { background: var(--color-warning-tint);  color: var(--color-warning); }
.badge-draft      { background: var(--color-neutral-tint);  color: var(--color-muted); }

/* ============================================================
   Metric / Stat columns
   Ruled off the top like a column on a settlement sheet, figures in
   the mono face. Not a tinted tile.
   ============================================================ */

.metric-card {
  background: transparent;
  border-top: 2px solid var(--color-rule);
  border-radius: 0;
  padding: var(--space-3) 0 0;
}

.metric-card__label {
  font-family: var(--font-cond);
  font-size: var(--size-label);
  font-weight: var(--text-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.metric-card__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--color-dark);
  margin-top: var(--space-1);
  letter-spacing: -0.03em;
}

.metric-card__value--accent { color: var(--color-primary); }

/* ============================================================
   Form Elements
   ============================================================ */

.input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--color-dark);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.12s;
  box-sizing: border-box;
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.input::placeholder { color: var(--color-subtle); }

.input:disabled {
  background: var(--color-neutral-tint);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* ============================================================
   Nav / Header pattern
   Opaque, with a hard rule underneath. No frosted glass.
   ============================================================ */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-rule);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

.nav__link {
  font-family: var(--font-cond);
  font-size: var(--size-small);
  font-weight: var(--text-medium);
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.12s;
  cursor: pointer;
}

.nav__link:hover { color: var(--color-dark); }
.nav__link--active { color: var(--color-primary); }

/* ============================================================
   Divider
   ============================================================ */

.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-6) 0;
}