/* Generated from shared Comuvia tokens and existing ForeGlass Home tokens. */
:root {

  /* Neutral palette — shared */
  --color-bg:      #fafafa;
  --color-surface: #ffffff;
  --color-fg:      #111111;
  --color-muted:   #6b7280;
  --color-border:  #e5e5e5;
  --color-warn:    #fef3c7;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;

  /* Typography */
  --font-sans:   system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   ui-monospace, "SF Mono", Monaco, Consolas, monospace;
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   2rem;
  --fs-4xl:   2.5rem;
  --fs-5xl:   3rem;
  --lh-tight:   1.15;
  --lh-normal:  1.55;
  --lh-loose:   1.75;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Radii + shadows */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 4px 12px rgba(0,0,0,0.08);

  /* Layout */
  --container-narrow: 720px;
  --container-wide:   1080px;
  --container-max:    1280px;

  /* Per-brand accent — overridden by brand-* classes below */
  --color-accent:    #2563eb;
  --color-accent-bg: #dbeafe;
  --env-chip-bg:     #fef3c7;


  /* Blue–turquoise–teal primary with yellow-orange secondary (complementary).
     Solid token values are chosen to pass WCAG AA as text on white; the bright
     gradient is reserved for large decorative surfaces (no small text on it). */
  --color-accent:    #0f766e;  /* teal-700 — links/text, 5.0:1 on white */
  --color-accent-bg: #d8f3ee;  /* soft teal surface */
  --env-chip-bg:     #fef0c7;  /* warm amber chip — yellow-orange accent */

  /* Brand gradients (blue → turquoise → teal). The default keeps white text
     legible (each stop ≥ 4.5:1 on white text); the bright variant is for
     decorative fills only. */
  --gradient-accent:        linear-gradient(135deg, #0369a1 0%, #0e7490 50%, #0f766e 100%);
  --gradient-accent-bright: linear-gradient(120deg, #38bdf8 0%, #22d3ee 50%, #2dd4bf 100%);

  /* Yellow-orange secondary accent. */
  --color-accent-2:    #b45309;  /* amber-700 — text, 5.9:1 on white */
  --color-accent-2-bg: #fef3c7;
  --gradient-accent-2: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);

  /* Full brand line: teal → turquoise → blue → amber, for the header rule. */
  --gradient-brandline: linear-gradient(90deg, #0ea5e9 0%, #06b6d4 32%, #2dd4bf 58%, #fbbf24 100%);


    --color-bg:      #e4e9ee;   /* comuvia.ai's cooler content canvas */
    /* the hero tint, promoted to the page canvas (owner 2026-08-18) */
    --color-canvas-top: #e6f2f1;
    --color-canvas-mid: #eef6f6;
    --color-canvas-end: #e3ecee;
    --color-surface: #ffffff;
    --color-fg:      #111111;
    --color-muted:   #6b7280;
    --color-border:  #e5e5e5;
    --color-accent:    #0f766e;
    --color-accent-bg: #d8f3ee;
    --color-accent-2:    #b45309;
    --color-accent-2-bg: #fef3c7;
    --env-chip-bg:   #fef0c7;
    --gradient-brandline: linear-gradient(90deg, #0ea5e9 0%, #06b6d4 32%, #2dd4bf 58%, #fbbf24 100%);
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Monaco, Consolas, monospace;
    --radius-sm: 4px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
  
}
html,body.sdk-product{margin:0;padding:0;color:var(--color-fg);font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal);background:var(--color-canvas-top)}
body.sdk-product{min-height:100vh;background:linear-gradient(180deg,var(--color-canvas-top) 0%,var(--color-canvas-mid) 46%,var(--color-canvas-end) 100%);background-attachment:fixed}
