/* Neet Inc — OpenClaw Architecture Showcase
 * Cloudflare warm palette, professional presentation styling
 * Based on revealjs skill's Cloudflare Design System
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --cf-bg-page:    #F5F1EB;
  --cf-bg-content: #FFFBF5;
  --cf-bg-card:    #FFFDFB;
  --cf-bg-active:  #FEF7ED;
  --cf-text:       #521000;
  --cf-text-muted: #52100099;
  --cf-text-subtle:#52100060;
  --cf-border:       #EBD5C1;
  --cf-border-light: #EBD5C180;
  --cf-orange: #FF6633;
  --cf-orange-light: #FF663310;
  --cf-blue:          #0A95FF;
  --cf-blue-light:    #0A95FF10;
  --cf-purple:        #9333EA;
  --cf-purple-light:  #9333EA10;
  --cf-green:         #19B006;
  --cf-green-light:   #19B00610;
  --cf-accent-orange: #F6821F;
  --cf-accent-orange-light: #F6821F10;
  --heading-font: "DM Sans", Helvetica, sans-serif;
  --body-font:    "DM Sans", Helvetica, sans-serif;
  --mono-font:    "DM Mono", ui-monospace, monospace;
  --base-font-size: 32px;
  --text-size:  16pt;
  --h1-size:    48pt;
  --h2-size:    36pt;
  --h3-size:    24pt;
  --h4-size:    18pt;
  --footnote-size: 11pt;
  --slide-padding:     54px;
  --slide-padding-top: 36px;
  --content-gap:       24px;
  --box-radius:        8px;
}

.reveal-viewport { background-color: var(--cf-bg-page); }

.reveal {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
  -webkit-font-smoothing: antialiased;
}

.reveal .slides section {
  height: 100%;
  padding: var(--slide-padding-top) var(--slide-padding) var(--slide-padding) var(--slide-padding) !important;
  box-sizing: border-box;
  text-align: left;
}
.reveal .slides section.stack { padding: 0 !important; }

.reveal h1 { font-size: var(--h1-size); font-weight: 500; color: var(--cf-text); text-transform: none; line-height: 1.2; }
.reveal h2 { font-size: var(--h2-size); font-weight: 500; color: var(--cf-text); text-transform: none; line-height: 1.2; margin-bottom: 8px; }
.reveal h3 { font-size: var(--h3-size); font-weight: 500; color: var(--cf-text); text-transform: none; line-height: 1.3; }
.reveal p, .reveal li { font-size: var(--text-size); color: var(--cf-text); line-height: 1.5; }
.reveal code, .reveal pre { font-family: var(--mono-font); }

.reveal strong, .reveal b { font-weight: 600; }
.reveal em { color: var(--cf-orange); font-style: normal; font-weight: 500; }

.reveal .progress { height: 4px; background: var(--cf-border); }
.reveal .progress span { background: var(--cf-orange); transition: width 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); }

.reveal ul { list-style: none; padding-left: 0; margin: 12px 0; }
.reveal ul li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.reveal ul li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; background: var(--cf-text); border-radius: 50%;
}
.reveal ul ul { margin: 4px 0; }
.reveal ul ul li::before { background: var(--cf-text-muted); width: 6px; height: 6px; }

.reveal .slides section.section-divider {
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}
.reveal .slides section.section-divider h1 { font-size: 56pt; text-align: center; }
.reveal .slides section.section-divider p { font-size: 20pt; color: var(--cf-text-muted); }

.text-lg   { font-size: 18pt !important; }
.text-xl   { font-size: 20pt !important; }
.text-2xl  { font-size: 24pt !important; }
.text-3xl  { font-size: 28pt !important; }
.text-muted    { color: var(--cf-text-muted) !important; }
.text-center   { text-align: center !important; }
.font-mono     { font-family: var(--mono-font) !important; }
.font-bold     { font-weight: 600 !important; }
.mt-1 { margin-top: 16px !important; }
.mt-2 { margin-top: 24px !important; }
.mb-1 { margin-bottom: 16px !important; }

.card { background: var(--cf-bg-content); border: 1px dashed var(--cf-border); border-radius: var(--box-radius); padding: 18px; }
.card-solid { background: var(--cf-bg-content); border: 1px solid var(--cf-border); border-radius: var(--box-radius); padding: 18px; }
.card-orange { background: var(--cf-orange-light); border: 1px solid var(--cf-orange); border-radius: var(--box-radius); padding: 18px; }
.card-blue { background: var(--cf-blue-light); border: 1px dashed var(--cf-blue); border-radius: var(--box-radius); padding: 18px; }
.card-purple { background: var(--cf-purple-light); border: 1px dashed var(--cf-purple); border-radius: var(--box-radius); padding: 18px; }
.card-green { background: var(--cf-green-light); border: 1px dashed var(--cf-green); border-radius: var(--box-radius); padding: 18px; }

.badge { display: inline-block; font-family: var(--mono-font); font-size: 10pt; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--cf-orange-light); color: var(--cf-orange); border: 1px solid var(--cf-orange); }
.badge-blue { background: var(--cf-blue-light); color: var(--cf-blue); border-color: var(--cf-blue); }
.badge-purple { background: var(--cf-purple-light); color: var(--cf-purple); border-color: var(--cf-purple); }
.badge-green { background: var(--cf-green-light); color: var(--cf-green); border-color: var(--cf-green); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; flex: 1; }

.code-block { background: var(--cf-bg-content); border: 1px solid var(--cf-border); border-radius: var(--box-radius); overflow: hidden; }
.reveal .code-block pre { margin: 0; padding: 14px; background: transparent; box-shadow: none; font-family: var(--mono-font); font-size: 12pt; line-height: 1.5; }

.reveal table { font-size: 13pt; width: 100%; border-collapse: collapse; }
.reveal table th { background: var(--cf-bg-active); font-family: var(--heading-font); font-weight: 500; padding: 10px 14px; border-bottom: 2px solid var(--cf-border); color: var(--cf-text); }
.reveal table td { padding: 9px 14px; border-bottom: 1px solid var(--cf-border-light); }
.reveal table tr:last-child td { border-bottom: none; }

.reveal .slides section > .footnote {
  position: absolute; bottom: 14px; left: var(--slide-padding); right: var(--slide-padding);
  font-size: var(--footnote-size); color: var(--cf-text-muted);
}

.reveal blockquote { border-left: 4px solid var(--cf-orange); padding-left: 18px; margin: 16px 0; font-style: italic; background: none; box-shadow: none; width: 100%; }

.stat { text-align: center; padding: 12px; }
.stat-num { font-size: 36pt; font-weight: 600; color: var(--cf-orange); display: block; }
.stat-label { font-size: 11pt; color: var(--cf-text-muted); display: block; margin-top: 2px; }

.agent-card { background: var(--cf-bg-content); border: 1px solid var(--cf-border); border-radius: var(--box-radius); padding: 14px; display: flex; flex-direction: column; }
.agent-card .name { font-size: 14pt; font-weight: 600; color: var(--cf-text); }
.agent-card .role { font-size: 10pt; color: var(--cf-text-muted); margin-bottom: 4px; }
.agent-card .desc { font-size: 10pt; line-height: 1.4; }

.title-slide { justify-content: center !important; align-items: center !important; text-align: center !important; }
.title-slide h1 { font-size: 56pt; margin-bottom: 16px; }
.title-slide .subtitle { font-size: 22pt; color: var(--cf-text-muted); margin-bottom: 8px; }
.title-slide .meta { font-size: 12pt; color: var(--cf-text-subtle); margin-top: 36px; }

.highlight-box { background: var(--cf-orange-light); border-left: 4px solid var(--cf-orange); padding: 14px 18px; border-radius: 0 var(--box-radius) var(--box-radius) 0; margin: 12px 0; }
.highlight-box p { margin: 0; }