/* ============================================================
   CloudFiles Design System — extracted from Figma Design Handbook
   (Website V3.0, node 188-15046). Single source of truth for all
   three prototype options.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---- Primary (actions only) ---- */
  --blue: #3d73d1;
  --blue-100: #dfe6f6;
  --blue-200: #b6c9f3;
  --blue-400: #6d9dec;
  --blue-700: #2d61c1;
  --blue-900: #2a4f9e;

  /* ---- Inks (text hierarchy) ---- */
  --ink: #222222;
  --ink-2: #3a3a3a;
  --ink-3: #6b6b6b;
  --ink-4: #9f9f9f;
  --ink-5: #d9d9d9;

  /* ---- Canvas (depth without borders) ---- */
  --canvas: #ffffff;
  --canvas-2: #f3f3f3;
  --canvas-3: #ececec;
  --dark-surface: #404054;
  --dark-surface-2: #343446;

  /* ---- Semantic (status only) ---- */
  --teal: #00b89c;
  --teal-100: #d3f6f1;
  --teal-200: #9dece0;
  --teal-700: #208c7b;
  --red: #e84040;
  --red-100: #f8ecec;
  --red-200: #f09b9b;
  --amber: #e6af55;
  --amber-100: #fef4e3;
  --amber-200: #f5d7a5;
  --amber-900: #a0742b;

  /* ---- Borders ---- */
  --dash: #bcbcbc;
  --dash-teal: #00b89c;
  --hairline: #e5e5e5;

  /* ---- Spacing (4px grid) ---- */
  --sp-2: 2px;  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px;
  --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px;
  --sp-64: 64px; --sp-80: 80px; --sp-120: 120px;

  /* ---- Type ---- */
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 8px;
  --radius-sm: 5px;
}

/* ============ Reset & base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink-2);
  background: var(--canvas-2);
}
img { max-width: 100%; display: block; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: var(--sans); cursor: pointer; }
::selection { background: var(--blue-100); }

/* ============ Type helpers ============ */
.display-xl { font: 500 56px/1.0 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.display-lg { font: 500 44px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.heading-xl { font: 500 32px/1.05 var(--serif); letter-spacing: -.016em; color: var(--ink); }
.heading-lg { font: 500 24px/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.heading-md { font: 500 20px/1.3 var(--serif); color: var(--ink); }
.heading-sm { font: 500 17px/1.3 var(--serif); color: var(--ink); }
.em-accent { font-style: italic; color: var(--teal-700); }
.em-blue { font-style: italic; color: var(--blue-700); }

.label {
  font: 600 11px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.body-sm { font-size: 14px; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  font: 500 14px/1 var(--sans);
  padding: 11px 18px; border-radius: var(--radius);
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
  text-decoration: none !important;
}
.btn-filled { background: var(--blue); color: #fff; }
.btn-filled:hover { background: var(--blue-700); }
.btn-tonal { background: var(--blue-100); color: var(--blue-700); }
.btn-tonal:hover { background: var(--blue-200); }
.btn-outline { background: var(--canvas); color: var(--ink-2); border-color: var(--ink-5); }
.btn-outline:hover { background: var(--canvas-3); }
.btn-ghost { background: transparent; color: var(--blue-700); }
.btn-ghost:hover { background: var(--blue-100); }

/* label-style arrow link (the website "LEARN MORE →" pattern) */
.linklabel {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-700); text-decoration: none !important;
  padding: var(--sp-12) 0; transition: gap .15s;
}
.linklabel:hover { gap: 10px; }
.linklabel .arr { font-family: var(--sans); }

/* ============ Status badges ============ */
.badge {
  display: inline-flex; align-items: center;
  font: 500 12px/1 var(--sans); padding: 4px 10px; border-radius: 99px;
  white-space: nowrap;
}
.badge-blue  { background: var(--blue-100); color: var(--blue-900); }
.badge-teal  { background: var(--teal-100); color: var(--teal-700); }
.badge-amber { background: var(--amber-100); color: var(--amber-900); }
.badge-red   { background: var(--red-100); color: #b13232; }
.badge-gray  { background: var(--canvas-3); color: var(--ink-3); }
.badge-dark  { background: var(--dark-surface); color: #fff; }

/* method badges for API */
.badge-get    { background: var(--blue-100); color: var(--blue-900); font-family: var(--mono); font-size: 11px; }
.badge-post   { background: var(--teal-100); color: var(--teal-700); font-family: var(--mono); font-size: 11px; }
.badge-delete { background: var(--red-100); color: #b13232; font-family: var(--mono); font-size: 11px; }
.badge-put    { background: var(--amber-100); color: var(--amber-900); font-family: var(--mono); font-size: 11px; }

/* ============ Alerts / callouts ============ */
.alert {
  display: flex; gap: var(--sp-12); align-items: flex-start;
  padding: var(--sp-16) var(--sp-16);
  border-radius: var(--radius); border: 1px solid;
  margin: var(--sp-24) 0; font-size: 14px;
}
.alert .alert-title { font: 500 16px/1.3 var(--serif); display: block; margin-bottom: 2px; }
.alert-info    { background: #eef2fb; border-color: var(--blue-200); }
.alert-info    .alert-title { color: var(--blue-900); }
.alert-success { background: var(--teal-100); border-color: var(--teal-200); }
.alert-success .alert-title { color: var(--teal-700); }
.alert-warning { background: var(--amber-100); border-color: var(--amber-200); }
.alert-warning .alert-title { color: var(--amber-900); }
.alert-error   { background: var(--red-100); border-color: var(--red-200); }
.alert-error   .alert-title { color: #b13232; }
.alert .ph { margin-top: 2px; }

/* ============ Tabs ============ */
.tabs-underline { display: flex; gap: var(--sp-24); border-bottom: 1px solid var(--hairline); }
.tabs-underline .tab {
  background: none; border: none; padding: var(--sp-12) 2px; font: 500 14px var(--sans);
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs-underline .tab:hover { color: var(--ink); }
.tabs-underline .tab.active { color: var(--ink); border-bottom-color: var(--blue); }

.tabs-segment {
  display: inline-flex; background: var(--canvas-3); border-radius: var(--radius);
  padding: 3px; gap: 2px;
}
.tabs-segment .tab {
  background: none; border: none; border-radius: var(--radius-sm);
  padding: 7px 14px; font: 500 13px var(--sans); color: var(--ink-3);
}
.tabs-segment .tab:hover { color: var(--ink); }
.tabs-segment .tab.active { background: var(--canvas); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.07); }

/* ============ Cards ============ */
.card {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.card-dashed { background: var(--canvas); border: 1px dashed var(--dash); }
.card-dashed-teal { background: var(--canvas); border: 1px dashed var(--dash-teal); }

/* ============ Tables ============ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--sp-16) 0; }
.table th {
  text-align: left; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4); padding: var(--sp-8) var(--sp-12); border-bottom: 1px solid var(--ink-5);
}
.table td { padding: var(--sp-12); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table code { font: 500 12.5px var(--mono); background: var(--canvas-2); padding: 2px 6px; border-radius: 4px; color: var(--ink); }

/* ============ Code ============ */
.codeblock {
  background: var(--dark-surface); color: #e7e7f0;
  border-radius: var(--radius); font: 400 13px/1.6 var(--mono);
  padding: var(--sp-16) var(--sp-16); overflow-x: auto; margin: var(--sp-16) 0;
}
.codeblock .c-key { color: #9dece0; }
.codeblock .c-str { color: #f5d7a5; }
.codeblock .c-com { color: #9090a8; font-style: italic; }
.codeblock .c-fn  { color: #b6c9f3; }
code.inline { font: 500 13px var(--mono); background: var(--canvas-3); padding: 2px 6px; border-radius: 4px; color: var(--ink); }

/* ============ Inputs ============ */
.input {
  width: 100%; font: 400 14px var(--sans); color: var(--ink);
  padding: 11px 14px; border: 1px solid var(--ink-5); border-radius: var(--radius);
  background: var(--canvas); outline: none; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--ink-4); }
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); }

/* ============ Tooltip-ish kbd ============ */
.kbd {
  font: 500 11px var(--mono); background: var(--canvas); border: 1px solid var(--ink-5);
  border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; color: var(--ink-3);
}

/* ============ Progress ============ */
.progress { height: 6px; background: var(--canvas-3); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: var(--teal); }

/* ============ Doc prose (article body) ============ */
.prose { max-width: 720px; }
.prose > * + * { margin-top: var(--sp-16); }
.prose h1 { font: 500 34px/1.1 var(--serif); letter-spacing: -.014em; color: var(--ink); }
.prose h2 { font: 500 24px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); margin-top: var(--sp-48); }
.prose h3 { font: 500 19px/1.3 var(--serif); color: var(--ink); margin-top: var(--sp-32); }
.prose p  { color: var(--ink-2); }
.prose li { margin: var(--sp-8) 0 var(--sp-8) var(--sp-4); color: var(--ink-2); }
.prose ul, .prose ol { padding-left: var(--sp-24); }
.prose hr { border: none; border-top: 1px dashed var(--dash); margin: var(--sp-32) 0; }
.prose figure { margin: var(--sp-24) 0; }
.prose figcaption { font-size: 13px; color: var(--ink-4); margin-top: var(--sp-8); text-align: center; }

/* fake screenshot/video placeholders so prototypes read honestly */
.media-ph {
  border: 1px dashed var(--dash); border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,.018) 14px 28px),
    var(--canvas-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-8); color: var(--ink-4); font-size: 13px; min-height: 220px;
}
.media-ph .ph-icon { font-size: 26px; color: var(--ink-5); }
.media-ph.is-video { background:
    radial-gradient(circle at center, rgba(64,64,84,.05), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,.018) 14px 28px),
    var(--canvas-2); }

/* steps */
.step { display: flex; gap: var(--sp-16); margin: var(--sp-24) 0; }
.step-num {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff; font: 500 14px/30px var(--serif); text-align: center;
}
.step-body { flex: 1; min-width: 0; }
.step-body > .step-title { font: 500 17px/1.3 var(--serif); color: var(--ink); margin-bottom: var(--sp-4); }

/* internal doc link chip (mention-doc) */
.docchip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 2px 8px 2px 6px; font-size: 13.5px; color: var(--blue-700);
  text-decoration: none !important; white-space: nowrap;
}
.docchip:hover { border-color: var(--blue-200); background: var(--blue-100); }

/* ============ Scrollbars (subtle) ============ */
.thin-scroll { scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; }
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 4px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* ============ Shared modal search (⌘K) ============ */
.cmdk-overlay {
  position: fixed; inset: 0; background: rgba(34,34,34,.4); z-index: 200;
  display: none; align-items: flex-start; justify-content: center; padding-top: 12vh;
  backdrop-filter: blur(2px);
}
.cmdk-overlay.open { display: flex; }
.cmdk {
  width: min(640px, 92vw); background: var(--canvas); border-radius: 12px;
  box-shadow: 0 24px 80px rgba(34,34,52,.35); overflow: hidden;
  animation: cmdk-in .18s ease-out;
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.cmdk input {
  width: 100%; border: none; outline: none; font: 400 17px var(--sans);
  padding: 18px 20px; border-bottom: 1px solid var(--hairline); color: var(--ink);
}
.cmdk input::placeholder { color: var(--ink-4); }
.cmdk-results { max-height: 46vh; overflow-y: auto; padding: var(--sp-8); }
.cmdk-section { padding: var(--sp-12) var(--sp-12) var(--sp-4); }
.cmdk-item {
  display: flex; align-items: center; gap: var(--sp-12); padding: 10px 12px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--ink-2);
}
.cmdk-item:hover, .cmdk-item.sel { background: var(--blue-100); }
.cmdk-item .crumb { color: var(--ink-4); font-size: 12px; margin-left: auto; white-space: nowrap; }
.cmdk-foot {
  display: flex; gap: var(--sp-16); padding: 10px 16px; border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--ink-4); background: var(--canvas-2);
}

/* ============ Utility ============ */
.flex { display: flex; } .aic { align-items: center; } .jcb { justify-content: space-between; }
.gap-8 { gap: var(--sp-8); } .gap-12 { gap: var(--sp-12); } .gap-16 { gap: var(--sp-16); } .gap-24 { gap: var(--sp-24); }
.mt-8 { margin-top: var(--sp-8); } .mt-16 { margin-top: var(--sp-16); } .mt-24 { margin-top: var(--sp-24); }
.mt-32 { margin-top: var(--sp-32); } .mt-48 { margin-top: var(--sp-48); } .mt-64 { margin-top: var(--sp-64); }
.hide { display: none !important; }