/* Ophicina do Cabelo — brand tokens */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Institutional — charcoal stack (do logo) */
  --ink-1000: #1a1a1d;
  --ink-900:  #26262a;   /* primary charcoal — dark like logo bg */
  --ink-800:  #2f2f33;
  --ink-700:  #3a3a3f;
  --ink-500:  #6b6b71;
  --ink-300:  #a8a8ad;

  /* Warm neutrals — espaço físico (madeira, m\u00e1rmore travertino) */
  --linen:    #f5f1ea;   /* off-white */
  --bone:     #ece6db;
  --sand:     #e0d5c2;   /* travertino claro */
  --travertine:#cfbfa6;
  --putty:    #b8a78b;
  --clay:     #8c7558;   /* madeira média */

  /* Accent — dourado morno (luminária do salão) */
  --gold-500: #b08a4a;
  --gold-400: #c8a268;
  --gold-300: #d9bc8a;

  /* Soft botanic — sansevieria do salão (uso muito raro, 1 toque) */
  --leaf-700: #4a5a3a;

  /* Type */
  --serif: 'Cormorant Garamond', 'Cardo', Georgia, serif;
  --sans:  'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Spacing rhythm (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
}

.op-serif { font-family: var(--serif); font-weight: 500; letter-spacing: 0.02em; }
.op-sans  { font-family: var(--sans);  font-weight: 400; letter-spacing: 0; }
.op-mono  { font-family: var(--mono);  font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }

/* Wordmark recreation using Cormorant — close to the supplied logo. */
.op-wordmark {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.045em;
  font-feature-settings: "ss01" on;
  line-height: 0.92;
  text-transform: uppercase;
}
.op-wordmark-sub {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

/* Eyebrow / micro caps */
.op-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Card chrome inside artboards */
.op-card {
  background: var(--linen);
  color: var(--ink-900);
  font-family: var(--sans);
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.op-card.dark {
  background: var(--ink-900);
  color: var(--linen);
}
.op-card.warm {
  background: var(--bone);
}

/* shared rules */
.op-hr { height: 1px; background: currentColor; opacity: 0.18; border: 0; }
.op-grid-faint {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 64px 100%;
}