/* ============================================================
   Cloud Digit docs — professional, content-first.

   Principles
   ----------
   1. Body type is the product. Bigger (~15 px), high contrast,
      generous line-height. Inter with OpenType features on.
   2. Mostly grayscale. Orange shows up in exactly three places:
        - body links
        - active top-tab underline
        - the `note` admonition's left rule
      Nothing else is coloured.
   3. No decorative chrome. No zebra rows, no card shadows, no
      gradient buttons. Hierarchy comes from typography + space,
      not from boxes.
   4. The header is a clean white bar (light) or a clean
      near-black bar (dark) — same as Stripe, Vercel, GitHub.
   ============================================================ */

/* ----- Brand ------------------------------------------------------ */

:root {
  --cd-orange:        #c2410c;          /* link / accent — AA on white */
  --cd-orange-bright: #f6821f;          /* active-state pop */
  --cd-orange-light:  #f6a55a;          /* link colour on dark bg */
  --cd-orange-soft:   rgba(194, 65, 12, 0.10);
}

/* ----- Light scheme ----------------------------------------------- */

[data-md-color-scheme="default"] {
  /* Header / chrome -- white, with dark text. Material reads
     `primary-fg-color` as the chrome BG and `primary-bg-color`
     as the chrome FG (text/icons) when both are overridden. */
  --md-primary-fg-color:        #ffffff;
  --md-primary-fg-color--light: #f7f7f8;
  --md-primary-fg-color--dark:  #ececee;
  --md-primary-bg-color:        #1a1f2c;
  --md-primary-bg-color--light: #4b5563;

  /* Body type and surfaces. */
  --md-default-fg-color:           #1a1f2c;     /* body text */
  --md-default-fg-color--light:    #4b5563;     /* secondary text */
  --md-default-fg-color--lighter:  #9ca3af;     /* tertiary, separators */
  --md-default-fg-color--lightest: #e5e7eb;     /* hairlines */
  --md-default-bg-color:           #ffffff;
  --md-default-bg-color--light:    #f7f7f8;
  --md-default-bg-color--lighter:  #fafafb;
  --md-default-bg-color--lightest: #ffffff;

  /* Accent — for hover, focus rings, search highlights. */
  --md-accent-fg-color:                var(--cd-orange);
  --md-accent-fg-color--transparent:   var(--cd-orange-soft);

  /* Body links. Slightly desaturated orange so contrast is AA on white
     and the colour reads professional rather than playful. */
  --md-typeset-a-color: var(--cd-orange);

  /* Inline code chip. */
  --md-code-fg-color: #1a1f2c;
  --md-code-bg-color: #f4f4f5;
}

/* ----- Dark scheme ------------------------------------------------ */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #0d1117;
  --md-primary-fg-color--light: #161b22;
  --md-primary-fg-color--dark:  #010409;
  --md-primary-bg-color:        #e6edf3;
  --md-primary-bg-color--light: #c9d1d9;

  --md-default-fg-color:           #e6edf3;
  --md-default-fg-color--light:    #c9d1d9;
  --md-default-fg-color--lighter:  #8b949e;
  --md-default-fg-color--lightest: #21262d;
  --md-default-bg-color:           #0d1117;
  --md-default-bg-color--light:    #161b22;
  --md-default-bg-color--lighter:  #1c2128;
  --md-default-bg-color--lightest: #21262d;

  --md-accent-fg-color:                var(--cd-orange-light);
  --md-accent-fg-color--transparent:   rgba(246, 165, 90, 0.16);

  --md-typeset-a-color: var(--cd-orange-light);

  --md-code-fg-color: #e6edf3;
  --md-code-bg-color: #161b22;
}

/* ============================================================
   Typography
   ============================================================ */

.md-typeset {
  font-size:        0.95rem;          /* ~15.2 px */
  line-height:      1.75;
  letter-spacing:   -0.005em;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:   optimizeLegibility;
  /* Inter stylistic sets — disambiguate 'I'/'l', single-storey 'a'. */
  font-feature-settings: "ss01", "cv11";
}

.md-typeset p,
.md-typeset li {
  text-wrap: pretty;
}

.md-typeset p {
  margin: 0 0 1em;
}

/* ----- Headings — hierarchy from weight and rhythm, not borders --- */

.md-typeset h1 {
  font-size:        2.05rem;
  font-weight:      700;
  letter-spacing:   -0.022em;
  line-height:      1.2;
  margin:           0 0 1.2rem;
  padding:          0;
  border:           none;
  color:            var(--md-default-fg-color);
}

.md-typeset h2 {
  font-size:        1.45rem;
  font-weight:      650;
  letter-spacing:   -0.012em;
  line-height:      1.3;
  margin:           2.6rem 0 0.85rem;
  padding:          0;
  border:           none;
}

.md-typeset h3 {
  font-size:        1.15rem;
  font-weight:      600;
  letter-spacing:   -0.005em;
  line-height:      1.4;
  margin:           1.9rem 0 0.55rem;
}

.md-typeset h4 {
  font-size:        1rem;
  font-weight:      600;
  margin:           1.4rem 0 0.4rem;
}

.md-typeset h5,
.md-typeset h6 {
  font-size:        0.9rem;
  font-weight:      600;
  text-transform:   none;
  letter-spacing:   0;
  margin:           1.2rem 0 0.4rem;
}

/* ----- Links ------------------------------------------------------ */

.md-typeset a {
  color:            var(--md-typeset-a-color);
  text-decoration:  none;
  border-bottom:    1px solid currentColor;
  transition:       opacity 120ms ease;
}
.md-typeset a:hover {
  opacity: 0.7;
}
.md-typeset a:focus-visible {
  outline:          2px solid var(--md-accent-fg-color);
  outline-offset:   2px;
  border-bottom-color: transparent;
}

/* ============================================================
   Header & top tabs — clean, minimal
   ============================================================ */

[data-md-color-scheme="default"] .md-header {
  background:       #ffffff;
  color:            var(--md-default-fg-color);
  border-bottom:    1px solid var(--md-default-fg-color--lightest);
  box-shadow:       none;
}

[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__button {
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="default"] .md-tabs {
  background:       #ffffff;
  color:            var(--md-default-fg-color);
  border-bottom:    1px solid var(--md-default-fg-color--lightest);
  box-shadow:       none;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color:            var(--md-default-fg-color--light);
  opacity:          1;
  font-weight:      500;
}
[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: var(--md-default-fg-color);
}
[data-md-color-scheme="default"] .md-tabs__link--active {
  color:       var(--md-default-fg-color);
  font-weight: 600;
}

/* Search input */
[data-md-color-scheme="default"] .md-search__form {
  background: var(--md-default-bg-color--light);
  border:     1px solid var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="default"] .md-search__form:hover,
[data-md-color-scheme="default"] [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--md-default-bg-color);
  border-color: var(--md-default-fg-color--lighter);
}

/* Active top tab — small orange bar (the only place orange appears in chrome) */
.md-tabs__item--active {
  position: relative;
}
.md-tabs__item--active::after {
  content:    "";
  position:   absolute;
  left:       0.8rem;
  right:      0.8rem;
  bottom:     0;
  height:     2px;
  background: var(--cd-orange-bright);
  border-radius: 1px;
}

/* ----- Sidebar nav ------------------------------------------------ */

.md-nav__title {
  font-weight:    600;
  letter-spacing: -0.005em;
  color:          var(--md-default-fg-color);
}
.md-nav__link {
  color: var(--md-default-fg-color--light);
}
.md-nav__link:hover {
  color: var(--md-default-fg-color);
}
.md-nav__link--active,
.md-nav__link.md-nav__link--active {
  color:        var(--md-typeset-a-color);
  font-weight:  500;
}

/* ============================================================
   Tables — minimal Tufte-ish: top + bottom rule, hairline rows
   ============================================================ */

.md-typeset table:not([class]) {
  border:         none;
  border-radius:  0;
  font-size:      0.9rem;
  display:        table;
  width:          100%;
  margin:         1.4rem 0;
}
.md-typeset table:not([class]) th {
  background:     transparent;
  border-bottom:  2px solid var(--md-default-fg-color);
  border-top:     0;
  font-weight:    600;
  text-align:     left;
  padding:        0.55rem 0.75rem;
  color:          var(--md-default-fg-color);
}
.md-typeset table:not([class]) td {
  border:         0;
  border-top:     1px solid var(--md-default-fg-color--lightest);
  padding:        0.55rem 0.75rem;
  vertical-align: top;
}
.md-typeset table:not([class]) tbody tr:hover td {
  background: var(--md-default-bg-color--light);
}

/* ============================================================
   Cards — single hairline border, neutral hover
   ============================================================ */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border:        1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding:       1.1rem;
  transition:    border-color 120ms ease;
  background:    transparent;
  box-shadow:    none;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  border-color: var(--md-default-fg-color--lighter);
  transform:    none;
  box-shadow:   none;
}
.md-typeset .grid.cards > ul > li > p > strong:first-child,
.md-typeset .grid.cards > ol > li > p > strong:first-child {
  color: var(--md-default-fg-color);
}

/* ============================================================
   Code
   ============================================================ */

.md-typeset code {
  font-size:      0.86em;
  padding:        0.12em 0.36em;
  border-radius:  0.25rem;
  background:     var(--md-code-bg-color);
  color:          var(--md-code-fg-color);
  border:         1px solid var(--md-default-fg-color--lightest);
}
.md-typeset pre > code,
.md-typeset .highlight code {
  font-size:    0.84em;
  line-height:  1.6;
  border:       none;
  background:   transparent;
}
.md-typeset .highlight {
  border:        1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  background:    var(--md-code-bg-color);
}

.md-clipboard {
  color: var(--md-default-fg-color--lighter);
}
.md-clipboard:hover {
  color: var(--md-default-fg-color);
}

/* ============================================================
   Admonitions — minimal: left rule + bold title, no fill
   ============================================================ */

.md-typeset .admonition,
.md-typeset details {
  border:        1px solid var(--md-default-fg-color--lightest);
  border-left:   3px solid var(--md-default-fg-color--lighter);
  border-radius: 0.3rem;
  background:    transparent;
  box-shadow:    none;
  margin:        1.4rem 0;
  padding:       0.6rem 1rem;
  font-size:     0.92rem;
}
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background:     transparent;
  border:         none;
  padding-left:   0;
  margin-bottom:  0.4rem;
  font-weight:    600;
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  /* Hide Material's default coloured icon background so the title is
     just bold text — feels more like prose, less like a UI widget. */
  margin-right: 0.4rem;
}

/* note: brand orange */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--cd-orange-bright);
}

/* tip: muted teal */
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success {
  border-left-color: #008771;
}

/* warning: amber */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: #b45309;
}

/* danger: red */
.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.failure,
.md-typeset details.failure {
  border-left-color: #b91c1c;
}

/* ============================================================
   Search highlight, buttons, footer
   ============================================================ */

.md-search-result mark {
  color:        var(--cd-orange);
  background:   transparent;
  font-weight:  600;
}

.md-button.md-button--primary {
  background:   var(--cd-orange);
  border-color: var(--cd-orange);
  color:        #ffffff;
}
.md-button.md-button--primary:hover {
  background:   #9a3408;
  border-color: #9a3408;
  color:        #ffffff;
}
.md-button {
  border-radius: 0.35rem;
  font-weight:   500;
}

[data-md-color-scheme="default"] .md-footer {
  background:    var(--md-default-bg-color--light);
  color:         var(--md-default-fg-color--light);
  border-top:    1px solid var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="default"] .md-footer-meta {
  background:    #ffffff;
  color:         var(--md-default-fg-color--light);
  border-top:    1px solid var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="default"] .md-footer a {
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .md-footer {
  background:    var(--md-default-bg-color--light);
  color:         var(--md-default-fg-color--light);
  border-top:    1px solid var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] .md-footer-meta {
  background:    var(--md-default-bg-color);
  border-top:    1px solid var(--md-default-fg-color--lightest);
}

/* ============================================================
   Mobile
   ============================================================ */

@media screen and (max-width: 600px) {
  .md-typeset {
    font-size:    0.92rem;        /* ~14.7 px */
    line-height:  1.7;
  }
  .md-typeset h1 {
    font-size:    1.7rem;
    margin-bottom: 0.85rem;
  }
  .md-typeset h2 {
    font-size:    1.25rem;
    margin-top:   2rem;
  }
  .md-typeset h3 {
    font-size:    1.05rem;
    margin-top:   1.5rem;
  }
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid.cards > ol > li {
    padding: 0.85rem;
  }
  .md-typeset table:not([class]) {
    font-size: 0.84rem;
  }
  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    padding: 0.45rem 0.55rem;
  }
  .md-typeset pre > code,
  .md-typeset .highlight code {
    font-size:   0.8rem;
    line-height: 1.55;
  }
  .md-content__inner {
    padding-left:  0.6rem;
    padding-right: 0.6rem;
  }
}

@media screen and (min-width: 601px) and (max-width: 960px) {
  .md-typeset h1 {
    font-size: 1.8rem;
  }
}

/* Touch targets ≥ 44 px on coarse pointers */
@media (pointer: coarse) {
  .md-nav__link {
    padding-top:    0.6rem;
    padding-bottom: 0.6rem;
  }
  .md-search-result__link {
    padding-top:    0.7rem;
    padding-bottom: 0.7rem;
  }
}

/* ============================================================
   Selection
   ============================================================ */

::selection {
  background: var(--cd-orange-soft);
  color:      inherit;
}