/* Ortiz Dental Studio — Design Tokens
   Editorial luxury, light theme only. */

:root {
  /* — Color: Foundation — */
  --ods-ivory: #F6F1E8;          /* canvas */
  --ods-bone:  #FBF7EF;          /* card / elevated surface */
  --ods-paper: #FFFEFB;          /* deepest highlight */
  --ods-ink:    #1C1A16;         /* primary text */
  --ods-ink-2:  #3A352D;         /* secondary text */
  --ods-ink-3:  #6E6757;         /* tertiary / captions */
  --ods-rule:   #E5DDCB;         /* hairline divider */
  --ods-rule-2: #D6CDB7;         /* stronger divider */
  --ods-veil:   rgba(28,26,22,0.04); /* hover wash */

  /* — Color: Accents — */
  --ods-bronze:   #8B6F47;       /* primary accent (CTAs, links, marks) */
  --ods-bronze-2: #6F5836;       /* hover / dense bronze */
  --ods-bronze-3: #C5A87E;       /* tint */
  --ods-sage:     #6E7567;       /* secondary mute */
  --ods-clay:     #A77956;       /* warm signal */

  /* — Color: Semantic (used sparingly inside CRM) — */
  --ods-pos:    #4F7A4A;
  --ods-pos-bg: #E7EFE2;
  --ods-warn:   #A07338;
  --ods-warn-bg:#F2E8D6;
  --ods-info:   #46698A;
  --ods-info-bg:#E1E8F0;

  /* — Type — */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* — Spacing (8pt + half-step) — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 96px; --s-12: 128px;

  /* — Radii — */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;

  /* — Elevation — */
  --shadow-1: 0 1px 0 rgba(28,26,22,0.04), 0 1px 2px rgba(28,26,22,0.04);
  --shadow-2: 0 1px 0 rgba(28,26,22,0.04), 0 6px 16px -8px rgba(28,26,22,0.10);
  --shadow-3: 0 2px 0 rgba(28,26,22,0.03), 0 24px 48px -24px rgba(28,26,22,0.18);
  --shadow-pop: 0 12px 36px -12px rgba(28,26,22,0.22), 0 2px 4px rgba(28,26,22,0.06);

  /* — Motion — */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 240ms;
}

/* Global resets scoped to .ods root */
.ods, .ods * { box-sizing: border-box; }
.ods {
  font-family: var(--font-sans);
  color: var(--ods-ink);
  font-feature-settings: "ss01","cv11","tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ods .eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ods-ink-3);
}

.ods .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.ods .display em { font-style: italic; color: var(--ods-bronze); }

.ods .rule { border: 0; border-top: 1px solid var(--ods-rule); }

.ods .num { font-variant-numeric: tabular-nums; }

/* Button primitives */
.ods .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 22px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.ods .btn-primary { background: var(--ods-ink); color: var(--ods-paper); }
.ods .btn-primary:hover { background: var(--ods-bronze-2); }
.ods .btn-ghost { background: transparent; color: var(--ods-ink); border-color: var(--ods-ink); }
.ods .btn-ghost:hover { background: var(--ods-ink); color: var(--ods-paper); }
.ods .btn-bronze { background: var(--ods-bronze); color: var(--ods-paper); }
.ods .btn-bronze:hover { background: var(--ods-bronze-2); }
.ods .btn-text {
  background: transparent; padding: 4px 0; border-radius: 0;
  border-bottom: 1px solid var(--ods-ink); text-transform: none;
  letter-spacing: 0; font-size: 14px; font-weight: 500;
}
.ods .btn-sm { padding: 8px 14px; font-size: 11px; }

/* Form inputs (used in CRM + concept B) */
.ods .input {
  width: 100%; padding: 12px 14px;
  background: var(--ods-paper); border: 1px solid var(--ods-rule);
  border-radius: var(--r-md); font: 500 14px/1.4 var(--font-sans);
  color: var(--ods-ink); transition: border-color var(--dur);
}
.ods .input:focus { outline: none; border-color: var(--ods-bronze); }

/* Cards */
.ods .card {
  background: var(--ods-bone); border: 1px solid var(--ods-rule);
  border-radius: var(--r-lg);
}

/* Placeholder image — subtly striped, monospace label */
.ods .ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(139,111,71,0.08) 0 12px,
      rgba(139,111,71,0.00) 12px 24px),
    var(--ods-bone);
  border: 1px solid var(--ods-rule);
  display: flex; align-items: center; justify-content: center;
  color: var(--ods-ink-3);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
}
.ods .ph::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px dashed rgba(110,103,87,0.35);
  pointer-events: none;
}

/* Scrollbar quietened inside cards */
.ods .scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ods .scroll::-webkit-scrollbar-thumb { background: var(--ods-rule-2); border-radius: 999px; }