/* iOwnIt brand overrides for MkDocs Material.
   Palette mirrors frontend/tailwind.config.js. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap');

:root {
  --iownit-terracotta:      #C75B39;
  --iownit-terracotta-dark: #A84832;
  --iownit-charcoal:        #2D2A26;
  --iownit-warm-gray:       #6B635A;
  --iownit-cream:           #F5EDE3;
  --iownit-warm-white:      #FDF9F3;
  --iownit-green:           #7A9E7E;
}

/* --- Custom primary/accent (Material's supported custom-color hook) --- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--iownit-terracotta);
  --md-primary-fg-color--light: #d67c5f;
  --md-primary-fg-color--dark:  var(--iownit-terracotta-dark);
  --md-primary-bg-color:        var(--iownit-warm-white);
  --md-primary-bg-color--light: var(--iownit-warm-white);
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color:             var(--iownit-terracotta-dark);
  --md-accent-fg-color--transparent: rgba(168, 72, 50, 0.10);
}

/* --- Light scheme: warm paper background, terracotta links --- */
[data-md-color-scheme="default"] {
  --md-default-bg-color:   var(--iownit-warm-white);
  --md-typeset-a-color:    var(--iownit-terracotta);
  --md-code-bg-color:      var(--iownit-cream);
}

/* --- Dark scheme: keep terracotta accent legible on slate --- */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #e08a6c;
}

/* --- Headings in Fraunces (display serif), body stays DM Sans --- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: -0.015em;
}
.md-typeset h1 {
  font-weight: 700;
  color: var(--iownit-charcoal);
}
[data-md-color-scheme="slate"] .md-typeset h1 { color: inherit; }

/* Material force-uppercases h5; keep headings in their authored casing. */
.md-typeset h5 {
  text-transform: none;
  font-weight: 600;
  color: inherit;
}

/* Screenshots share the app's warm-white background, which matches the page,
   so give content images a visible edge + lift. Exclude inline emoji (twemoji). */
.md-typeset img:not(.twemoji):not(.emojione) {
  border: 1px solid rgba(45, 42, 38, 0.14);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(45, 42, 38, 0.10);
  max-width: 100%;
  height: auto;
}
[data-md-color-scheme="slate"] .md-typeset img:not(.twemoji):not(.emojione) {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* --- Soft-green for success admonitions, terracotta for tips --- */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--iownit-terracotta);
}

/* --- Home hero --- */
.iownit-hero {
  text-align: center;
  padding: 2.5rem 1rem 1rem;
}
.iownit-hero .tile {
  display: inline-block;
  background: var(--iownit-terracotta);
  color: var(--iownit-warm-white);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  padding: 0.6rem 0.75rem;
  border-radius: 16px;
  letter-spacing: -1px;
}
.iownit-hero .tagline {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  color: var(--iownit-terracotta);
  font-size: 1.25rem;
  margin-top: 0.75rem;
}