/**
 * Circloud GUI - CSS Variables
 * Dome UI palette
 */

:root {
  --primary: #5ecbff;
  --primary-dark: #3fb2ff;
  --secondary: #6b5cff;
  --accent: #ff8bb8;
  --background: #070b17;
  --surface: #10162c;
  --surface-light: #182043;
  --surface-hover: #222b58;
  --text: #ffffff;
  --text-secondary: #a7b0d1;
  --text-muted: #6d7696;
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.1);
  --warning: #f59e0b;
  --error: #ef4444;
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --gradient: linear-gradient(135deg, var(--primary) 0%, #7a63ff 45%, var(--accent) 100%);
  --gradient-soft: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --glass: rgba(255, 255, 255, 0.03);
  --card-alpha: 0.8;
  --card-alpha-strong: 0.86;
  --card-alpha-soft: 0.76;
  --card-surface: rgba(16, 22, 44, 0.76);
  --card-surface-light: rgba(24, 32, 67, 0.76);
  --card-surface-strong: rgba(12, 18, 36, 0.82);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --content-width: 1600px;
  --app-header-height: 60px;
  --hero-cover-height: 205px;
  --hero-cover-height-compact: 185px;
  --hero-bar-height: 30px;
  --network-lines-lg: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'900'%20height%3D'600'%20viewBox%3D'0%200%20900%20600'%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'white'%20stroke-opacity%3D'0.18'%20stroke-width%3D'1.2'%3E%0A%20%20%20%20%3Cpath%20d%3D'M60%20120%20C%20220%2040%20380%2060%20520%20140'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M520%20140%20C%20640%20210%20730%20190%20860%2080'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M120%20340%20C%20260%20300%20360%20340%20520%20300'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M520%20300%20C%20640%20260%20740%20310%20860%20420'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M80%20520%20C%20200%20480%20320%20500%20440%20560'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M440%20560%20C%20580%20620%20720%20580%20860%20520'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M220%2040%20C%20200%20180%20240%20260%20120%20340'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M380%2060%20C%20360%20210%20380%20250%20520%20300'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M730%20190%20C%20700%20330%20720%20380%20860%20420'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D'white'%20fill-opacity%3D'0.32'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'60'%20cy%3D'120'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'220'%20cy%3D'40'%20r%3D'2.5'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'380'%20cy%3D'60'%20r%3D'2.5'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'520'%20cy%3D'140'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'860'%20cy%3D'80'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'120'%20cy%3D'340'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'520'%20cy%3D'300'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'860'%20cy%3D'420'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'80'%20cy%3D'520'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'440'%20cy%3D'560'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'860'%20cy%3D'520'%20r%3D'3'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D'white'%20fill-opacity%3D'0.14'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'320'%20cy%3D'180'%20r%3D'1.5'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'640'%20cy%3D'260'%20r%3D'1.5'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'300'%20cy%3D'500'%20r%3D'1.5'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'720'%20cy%3D'120'%20r%3D'1.5'%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --network-lines-sm: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'320'%20height%3D'220'%20viewBox%3D'0%200%20320%20220'%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'white'%20stroke-opacity%3D'0.16'%20stroke-width%3D'1.1'%3E%0A%20%20%20%20%3Cpath%20d%3D'M20%2050%20C%2090%2010%20140%2020%20200%2060'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M200%2060%20C%20240%2090%20270%2080%20300%2030'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M40%20130%20C%20100%20110%20160%20130%20220%20120'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M220%20120%20C%20260%20110%20290%20140%20310%20190'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M60%20200%20C%20140%20180%20200%20200%20260%20210'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D'white'%20fill-opacity%3D'0.28'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'20'%20cy%3D'50'%20r%3D'2.6'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'140'%20cy%3D'20'%20r%3D'2.4'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'200'%20cy%3D'60'%20r%3D'2.8'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'300'%20cy%3D'30'%20r%3D'2.6'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'40'%20cy%3D'130'%20r%3D'2.8'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'220'%20cy%3D'120'%20r%3D'2.6'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'310'%20cy%3D'190'%20r%3D'2.4'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'60'%20cy%3D'200'%20r%3D'2.6'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'260'%20cy%3D'210'%20r%3D'2.4'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D'white'%20fill-opacity%3D'0.12'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'110'%20cy%3D'90'%20r%3D'1.4'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'250'%20cy%3D'150'%20r%3D'1.4'%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --flow-lines-sm: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'420'%20height%3D'260'%20viewBox%3D'0%200%20420%20260'%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'white'%20stroke-opacity%3D'0.16'%20stroke-width%3D'1.1'%3E%0A%20%20%20%20%3Cpath%20d%3D'M-40%2040%20C%2060%200%20140%2010%20220%2050%20C%20300%2090%20360%20140%20460%20200'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M-30%20120%20C%2070%2080%20150%20100%20230%20140%20C%20300%20170%20360%20200%20450%20240'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M-20%20190%20C%2080%20150%20160%20170%20250%20200%20C%20320%20220%20360%20235%20440%20260'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D'white'%20fill-opacity%3D'0.2'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'70'%20cy%3D'30'%20r%3D'1.5'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'180'%20cy%3D'90'%20r%3D'1.5'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'320'%20cy%3D'170'%20r%3D'1.5'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'120'%20cy%3D'200'%20r%3D'1.2'%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");

  /* Map existing GUI variables */
  --body-bg: var(--background);
  --container-bg: transparent;
  --header-bg: rgba(12, 15, 34, 0.86);
  --header-color: var(--text);

  --admin-bar-bg: var(--surface);
  --admin-bar-border: var(--border);
  --admin-bar-text: var(--text);
  --admin-bar-label: var(--text-muted);

  --auth-bg: var(--surface);
  --auth-border: var(--border);
  --auth-text: var(--text);
  --auth-label: var(--text-secondary);
  --auth-value-color: var(--text);
  --auth-value-code-bg: rgba(255, 255, 255, 0.04);
  --auth-value-code-color: var(--text);

  --code-inline-bg: rgba(122, 99, 255, 0.12);
  --code-inline-color: var(--text-secondary);
  --code-inline-border: var(--border);

  --tenant-border: var(--border);
  --tenant-header-bg: linear-gradient(160deg, rgba(16, 22, 44, 0.86) 0%, rgba(12, 18, 36, 0.9) 100%);
  --tenant-header-color: var(--text);
  --tenant-header-hover-bg: var(--surface-hover);
  --tenant-content-bg: var(--card-surface);
  --tenant-description-color: var(--text-secondary);
  --tenant-description-bg: rgba(24, 32, 67, 0.5);

  --section-heading-color: var(--text);
  --section-bg: var(--card-surface);
  --section-container-bg: var(--card-surface);
  --section-container-border: var(--border);
  --section-h3-color: var(--text);
  --section-h4-color: var(--text-secondary);
  --section-header-border: var(--border);
  --section-header-bg: var(--card-surface-strong);

  --core-services-bg: var(--card-surface);
  --core-services-header-bg: var(--card-surface-strong);
  --core-services-header-hover-bg: var(--surface-hover);

  --subnets-bg: var(--card-surface);
  --subnets-header-bg: var(--card-surface-strong);
  --subnets-header-hover-bg: var(--surface-hover);

  --pods-bg: var(--card-surface);
  --pods-header-bg: var(--card-surface-strong);
  --pods-header-hover-bg: var(--surface-hover);

  --vpc-section-bg: var(--card-surface);
  --vpc-header-bg: var(--card-surface-strong);
  --vpc-header-color: var(--text);
  --vpc-header-hover-bg: var(--surface-hover);
  --vpc-info-li-bg: var(--surface);
  --vpc-info-li-color: var(--text-secondary);
  --vpc-info-strong-color: var(--primary);

  --provider-section-bg: var(--card-surface);
  --provider-header-bg: var(--card-surface-strong);
  --provider-header-hover-bg: var(--surface-hover);

  --tenants-section-bg: var(--card-surface);
  --tenants-header-bg: var(--card-surface-strong);
  --tenants-header-hover-bg: var(--surface-hover);

  --table-bg: rgba(8, 12, 24, 0.78);
  --table-header-bg: rgba(14, 18, 34, 0.92);
  --table-header-color: #c7d2f2;
  --table-header-border: rgba(255, 255, 255, 0.06);
  --table-cell-border: rgba(255, 255, 255, 0.06);
  --table-cell-color: #b4bdd8;
  --table-row-hover-bg: rgba(255, 255, 255, 0.03);
  --table-row-replica-bg: rgba(255, 255, 255, 0.015);
}