/* ============================================================
   Bryill Design System v1.0 — token layer
   Source: Bryill Design System.dc.html (Claude Design project)
   ============================================================ */

:root {
  /* Neutrals & surfaces */
  --charcoal: #181613;      /* primary page canvas */
  --espresso: #24201A;      /* raised dark surface */
  --espresso-2: #2C2720;
  --ink: #1F1C16;           /* text on light surfaces */
  --ink-soft: #5B5346;      /* secondary text on light */
  --on-dark: #EFE9DD;       /* primary text on dark */
  --on-dark-dim: #A59C8B;   /* secondary text on dark */
  --on-dark-mid: #C9BFAE;
  --on-dark-faint: #8A8272;
  --paper: #F4EFE6;         /* warm light section */
  --cream: #FBF8F2;         /* lightest surface / cards */

  /* Accent */
  --gold: #F7931E;          /* primary accent — CTAs, emphasis */
  --gold-soft: #CAA056;
  --champagne: #D8BC86;     /* gold-button hover */
  --gold-deep: #C98A20;     /* gold on light surfaces */

  /* Lifecycle */
  --lc-create: #89C03E;
  --lc-develop: #29A7DE;
  --lc-manage: #8E268A;
  --lc-refine: #F08F20;
  --lc-comply: #F50100;
  --lc-audit: #E41D75;

  /* Lines & borders */
  --hairline: rgba(216,188,134,.14);
  --hairline-strong: rgba(216,188,134,.2);
  --hairline-light: rgba(31,28,22,.12);

  /* Type */
  --font-display: 'Besley', Georgia, serif;
  --font-body: 'Roboto', system-ui, sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: 32px;
  --section-pad: clamp(4.5rem, 10vh, 8rem);

  /* Radii */
  --r-btn: 1px;
  --r-card: 3px;
  --r-panel: 6px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .35s;
}

/* ---- Base ---------------------------------------------------- */
::selection { background: var(--gold); color: var(--charcoal); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(216,188,134,.22); border-radius: 6px; border: 3px solid var(--charcoal); }
::-webkit-scrollbar-track { background: var(--charcoal); }

/* Italic gold emphasis inside headings */
h1 em, h2 em, h3 em, .bryill-em { font-style: italic; color: var(--gold); }

/* ---- Section bands ------------------------------------------- */
.bryill-section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.bryill-dark { background: var(--charcoal); color: var(--on-dark); }
.bryill-dark-raised { background: var(--espresso); color: var(--on-dark); }
.bryill-light { background: var(--paper); color: var(--ink); }
.bryill-light h1, .bryill-light h2, .bryill-light h3, .bryill-light h4 { color: var(--ink); }
.bryill-light p { color: var(--ink-soft); }

/* ---- Eyebrow & label ------------------------------------------ */
.bryill-eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.bryill-label { font-family: var(--font-body); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-dim); }
.bryill-rule { width: 46px; height: 2px; background: var(--gold); }

/* ---- Buttons --------------------------------------------------
   Primary gold / outline / ghost. Also themes Elementor buttons. */
.bryill-btn, .bryill-btn--outline, .bryill-btn--ghost {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 22px; border-radius: var(--r-btn);
  cursor: pointer; text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.bryill-btn { border: 1px solid var(--gold); background: var(--gold); color: #1A1712; }
.bryill-btn:hover { background: var(--champagne); border-color: var(--champagne); color: #1A1712; }
.bryill-btn--outline { border: 1px solid rgba(184,138,62,.45); background: transparent; color: var(--gold); }
.bryill-btn--outline:hover { border-color: var(--gold); background: rgba(184,138,62,.08); color: var(--gold); }
.bryill-btn--ghost { border: 1px solid rgba(239,233,221,.3); background: transparent; color: var(--on-dark); }
.bryill-btn--ghost:hover { border-color: var(--on-dark); background: rgba(239,233,221,.06); color: var(--on-dark); }
.bryill-light .bryill-btn--ghost { border-color: rgba(31,28,22,.3); color: var(--ink); }
.bryill-light .bryill-btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Arrow nudge */
.bryill-btn span:last-child, .bryill-btn--outline span:last-child, .bryill-btn--ghost span:last-child, .bryill-link span:last-child { transition: transform var(--dur) var(--ease); }
.bryill-btn:hover span:last-child, .bryill-btn--outline:hover span:last-child, .bryill-btn--ghost:hover span:last-child, .bryill-link:hover span:last-child { transform: translateX(4px); }

/* Text link */
.bryill-link { display: inline-flex; align-items: center; gap: .5em; color: var(--gold); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.bryill-light .bryill-link { color: var(--gold-deep); }

/* ---- Cards ----------------------------------------------------
   Cream card, 3px lifecycle bar on top, hover lift −6px. */
.bryill-card {
  position: relative; display: block; background: var(--cream);
  border: 1px solid var(--hairline-light); border-radius: var(--r-card);
  overflow: hidden; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bryill-card::before { content: ''; display: block; height: 3px; background: var(--gold); }
.bryill-card:hover { transform: translateY(-6px); box-shadow: 0 24px 52px -30px rgba(31,28,22,.5); }
.bryill-card.is-create::before { background: var(--lc-create); }
.bryill-card.is-develop::before { background: var(--lc-develop); }
.bryill-card.is-manage::before { background: var(--lc-manage); }
.bryill-card.is-refine::before { background: var(--lc-refine); }
.bryill-card.is-comply::before { background: var(--lc-comply); }
.bryill-card.is-audit::before { background: var(--lc-audit); }

/* Dark panel */
.bryill-panel { border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); background: var(--espresso); }

/* ---- Icon rings ----------------------------------------------- */
.bryill-icon-ring {
  width: 84px; height: 84px; border: 1px solid var(--hairline-strong);
  border-radius: 50%; display: grid; place-items: center; color: var(--gold);
  transition: all var(--dur) var(--ease);
}
.bryill-icon-ring svg { stroke-width: 1.5; }

/* ---- Hero scrim & Ken Burns ----------------------------------- */
.bryill-scrim { background: linear-gradient(to top, rgba(9,7,5,.92) 2%, rgba(9,7,5,.4) 45%, rgba(9,7,5,.25) 100%), linear-gradient(to right, rgba(9,7,5,.7), rgba(9,7,5,.12) 60%); }
@keyframes bryillKen { from { transform: scale(1); } to { transform: scale(1.09); } }
.bryill-ken { animation: bryillKen 28s ease-in-out infinite alternate; }

/* ---- Scroll reveal --------------------------------------------
   Add .bryill-reveal via Elementor entrance animation alternative. */
@keyframes bryillReveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.bryill-reveal { animation: bryillReveal .9s var(--ease) both; }

/* ---- Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}