/* SignalWire Component Roles - Auto-generated from signalwire-tokens.dtcg.json roles section */
/* Do not edit manually. Run: python3 build_design.py */
/* These map UI elements to the correct design tokens. */

:root {
  /* H1 headings. Cool white dark, deep navy light. */
  --role-heading-h1: var(--fg-headings);
  /* H2 headings. Same as H1. */
  --role-heading-h2: var(--fg-headings);
  /* H3 headings. Same as H1. */
  --role-heading-h3: var(--fg-headings);
  /* Hero keywords inside headings. Turquoise dark, fuchsia light. The contrast color to headings. */
  --role-heading-keyword: var(--fg-emphasis);
  /* Body paragraphs, descriptions, list items. */
  --role-body-text: var(--fg-secondary);
  /* Bold text in body copy. White/black, emphasis through weight not color. */
  --role-body-bold: var(--fg-default);
  /* Uppercase eyebrow labels. Fuchsia accent in both themes. */
  --role-eyebrow-label: var(--sw-fuchsia);
  /* Titles inside cards. White/black, emphasis through typography. */
  --role-card-title: var(--fg-default);
  /* Body text inside cards. */
  --role-card-body: var(--fg-secondary);
  /* Big numbers in stat displays. Fuchsia accent draws eye to metrics. */
  --role-stat-value: var(--sw-fuchsia);
  /* Labels under stat values. Must be readable, not muted. */
  --role-stat-label: var(--fg-secondary);
  /* Default link color. The accent draws eye to interactive elements. */
  --role-link-default: var(--sw-fuchsia);
  /* Link hover color. Brightens to white/black. */
  --role-link-hover: var(--fg-default);
  /* Navigation bar links. */
  --role-nav-link: var(--fg-secondary);
  /* Nav link hover. */
  --role-nav-link-hover: var(--fg-default);
  /* Primary CTA button background. */
  --role-button-primary-bg: var(--sw-fuchsia);
  /* Primary CTA button text. Always white. */
  --role-button-primary-text: #ffffff;
  /* Secondary/outline button text. Fuchsia, matching the accent. */
  --role-button-secondary-text: var(--sw-fuchsia);
  /* Secondary button border. Fuchsia outline. */
  --role-button-secondary-border: var(--sw-fuchsia);
  /* Table column headers. Uppercase, small, code font. */
  --role-table-header: var(--fg-muted);
  /* Line under table header. Accent line. */
  --role-table-header-line: var(--sw-fuchsia);
  /* Table cell text. */
  --role-table-cell: var(--fg-secondary);
  /* Bold text in table cells. White/black, weight does the work. */
  --role-table-cell-bold: var(--fg-default);
  /* Inline code background. */
  --role-code-inline-bg: var(--code-bg);
  /* Inline code text. */
  --role-code-inline-text: var(--code-fg);
  /* Code block background. Always dark. */
  --role-code-block-bg: var(--cb-bg);
  /* Code block text. */
  --role-code-block-text: var(--cb-fg);
  /* Inactive tab text. */
  --role-tab-default: var(--fg-muted);
  /* Active tab text and indicator. Accent marks selected state. */
  --role-tab-active: var(--sw-fuchsia);
  /* Testimonial left border accent. */
  --role-testimonial-border: var(--sw-fuchsia);
  /* Quote text. */
  --role-testimonial-text: var(--fg-default);
  /* Attribution name. Secondary info, not accent. */
  --role-testimonial-attr: var(--fg-muted);
  /* Footer text and links. */
  --role-footer-text: var(--fg-muted);
  /* Footer link hover. Accent on interaction. */
  --role-footer-link-hover: var(--sw-fuchsia);
  /* Lines between sections. */
  --role-section-divider: var(--border-default);
  /* Top accent bar gradient stops. Blue-purple-fuchsia-purple-blue. */
  --role-accent-bar-colors: var(--sw-blue), var(--sw-purple), var(--sw-fuchsia), var(--sw-purple), var(--sw-blue);
  /* FAQ +/- toggle icon. Accent marks interactive element. */
  --role-faq-marker: var(--sw-fuchsia);
  /* Checkmark in positive comparison items. */
  --role-compare-positive: var(--sw-turquoise);
  /* X mark in negative comparison items. */
  --role-compare-negative: var(--sw-fuchsia);
  /* Step number circle colors, alternating fuchsia and blue. */
  --role-step-colors: var(--sw-fuchsia), var(--sw-blue);
  /* Featured pricing card top border. */
  --role-pricing-featured-accent: var(--sw-fuchsia);
  /* Checkmark in pricing feature lists. */
  --role-pricing-check: var(--sw-turquoise);
  /* Price text. Fuchsia accent on pricing numbers. */
  --role-pricing-price: var(--sw-fuchsia);
}

/* Font shorthands */
:root {
  --font-heading: var(--type-family-heading);
  --font-body: var(--type-family-body);
  --font-code: var(--type-family-code);
}

/* ═══ BASE COMPONENT CLASSES ═══ */

h1, h2, h3 { color: var(--role-heading-h1); }
h1 .hero-keyword, h2 .hero-keyword, .text-emphasis { color: var(--role-heading-keyword); }
p, li, td { color: var(--role-body-text); }
strong, b { color: var(--role-body-bold); }

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

.eyebrow, .label { color: var(--role-eyebrow-label); }

code { background: var(--role-code-inline-bg); color: var(--role-code-inline-text); }
pre { background: var(--role-code-block-bg); color: var(--role-code-block-text); }

/* ═══ BACKGROUND PATTERNS ═══ */
/* Add class to any container. Pattern renders via ::after pseudo-element. */
/* Combine: sw-bg-dots + sw-bg-orbs by adding both classes. */

.sw-bg-dots { position: relative; }
.sw-bg-dots::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 24px 24px; background-repeat: repeat; pointer-events: none; z-index: 0; }

.sw-bg-grid { position: relative; }
.sw-bg-grid::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; background-repeat: repeat; pointer-events: none; z-index: 0; }

.sw-bg-noise { position: relative; }
.sw-bg-noise::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 256px 256px; background-repeat: repeat; opacity: 0.025; pointer-events: none; z-index: 0; }

.sw-bg-hex { position: relative; }
.sw-bg-hex::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15Z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 60px 52px; background-repeat: repeat; pointer-events: none; z-index: 0; }

.sw-bg-diagonal { position: relative; }
.sw-bg-diagonal::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,0.02) 28px, rgba(255,255,255,0.02) 29px); background-repeat: repeat; pointer-events: none; z-index: 0; }

.sw-bg-orbs { position: relative; }
.sw-bg-orbs::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 15% 20%, rgba(4,78,244,0.08) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 85% 70%, rgba(247,42,114,0.06) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(96,27,230,0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; }

.sw-bg-rings { position: relative; }
.sw-bg-rings::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 300px at 25% 35%, transparent 60%, rgba(4,78,244,0.04) 60%, rgba(4,78,244,0.04) 61%, transparent 61%), radial-gradient(circle 200px at 75% 60%, transparent 60%, rgba(247,42,114,0.03) 60%, rgba(247,42,114,0.03) 61%, transparent 61%), radial-gradient(circle 250px at 50% 80%, transparent 60%, rgba(96,27,230,0.03) 60%, rgba(96,27,230,0.03) 61%, transparent 61%); pointer-events: none; z-index: 0; }

/* Combo patterns: dots+orbs, grid+orbs */
.sw-bg-dots-orbs { position: relative; }
.sw-bg-dots-orbs::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 15% 20%, rgba(4,78,244,0.08) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 85% 70%, rgba(247,42,114,0.06) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(96,27,230,0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.sw-bg-dots-orbs::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; z-index: 0; }

.sw-bg-grid-orbs { position: relative; }
.sw-bg-grid-orbs::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 15% 20%, rgba(4,78,244,0.08) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 85% 70%, rgba(247,42,114,0.06) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(96,27,230,0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.sw-bg-grid-orbs::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; }