/* ==========================================================================
   SUS KIGALI HAIRCUT — "POLE & BLADE" DESIGN SYSTEM
   Shared foundation for the public website and the admin dashboard.

   Every colour below is sampled directly from SUS logo.jpeg:
     gold   #FED700  — the wordmark and the pole's cap fittings
     red    #EE1C25  — the pole stripe
     blue   #0F74BC  — the pole stripe
     black  #0B0B0C  — the logo's background field

   IMPORTANT ACCESSIBILITY NOTE
   Brand gold is a FILL colour, not a text colour on light backgrounds:
     gold #FED700 on ink   #0B0B0C -> 13.4:1 (excellent)
     gold #FED700 on paper #FAF7F0 ->  1.4:1 (never do this)
   So on light surfaces use --gold-ink (#7A5E00, 6.2:1 on paper) for gold text,
   and reserve pure --gold for fills, rules and dark surfaces.
   ========================================================================== */

:root {
  /* ---- brand -------------------------------------------------------- */
  --gold:        #fed700;
  --gold-deep:   #e0be00;
  --gold-soft:   rgba(254, 215, 0, .14);
  --gold-line:   rgba(254, 215, 0, .34);
  --gold-ink:    #7a5e00;   /* readable gold for light surfaces */
  --red:         #ee1c25;
  --red-deep:    #c1121b;
  --red-soft:    rgba(238, 28, 37, .12);
  --blue:        #0f74bc;
  --blue-deep:   #0a588f;
  --blue-soft:   rgba(15, 116, 188, .12);

  /* ---- surfaces ----------------------------------------------------- */
  --ink:         #0b0b0c;
  --ink-2:       #141417;
  --ink-3:       #1d1d22;
  --ink-4:       #2a2a31;
  --paper:       #faf7f0;
  --paper-2:     #f2ece0;
  --paper-3:     #e9e1d1;
  --surface:     #ffffff;

  /* ---- text --------------------------------------------------------- */
  --text:         #191919;
  --text-soft:    #5e5b54;
  --text-faint:   #8c887e;
  --on-dark:      #f6f3ea;
  --on-dark-soft: #cbc6b8;
  --on-dark-faint:#8d897e;

  /* ---- lines -------------------------------------------------------- */
  --line:        #e4decf;
  --line-2:      #d5cdb9;
  --line-dark:   rgba(246, 243, 234, .12);
  --line-darker: rgba(246, 243, 234, .07);

  /* ---- semantic ----------------------------------------------------- */
  --ok:     #1e7a3c;  --ok-bg:     #e4f3e8;
  --warn:   #8a5a00;  --warn-bg:   #fbefd3;
  --danger: #b3261e;  --danger-bg: #fbe6e5;
  --info:   #0a588f;  --info-bg:   #e4f0f9;

  /* ---- radii -------------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;
  --r-lg: 22px; --r-xl: 32px; --r-full: 999px;

  /* ---- spacing (4px scale) ------------------------------------------ */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 40px;  --s9: 48px; --s10: 64px; --s11: 80px; --s12: 104px;

  /* ---- type --------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --fs-xs: .75rem;   --fs-sm: .84rem;  --fs-base: 1rem;   --fs-md: 1.09rem;
  --fs-lg: 1.3rem;   --fs-xl: 1.62rem; --fs-2xl: 2.05rem; --fs-3xl: 2.6rem;
  --fs-4xl: 3.35rem; --fs-5xl: clamp(2.5rem, 6vw, 4.4rem);

  --lh-tight: 1.06; --lh-snug: 1.26; --lh-body: 1.65;
  --tr-caps: .14em; --tr-wide: .22em;

  /* ---- elevation ---------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(11, 11, 12, .06), 0 1px 3px rgba(11, 11, 12, .05);
  --sh-2: 0 2px 4px rgba(11, 11, 12, .05), 0 10px 22px -8px rgba(11, 11, 12, .16);
  --sh-3: 0 22px 48px -18px rgba(11, 11, 12, .34), 0 4px 12px rgba(11, 11, 12, .07);
  --sh-gold: 0 14px 30px -14px rgba(224, 190, 0, .62);

  /* ---- layout ------------------------------------------------------- */
  --wrap: 1180px; --wrap-narrow: 860px; --header-h: 78px;

  /* ---- motion ------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .28s; --dur-slow: .7s;

  /* ---- z-index ------------------------------------------------------ */
  --z-sticky: 60; --z-drawer: 70; --z-toast: 90;
}


/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -.011em;
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { max-width: 68ch; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* One consistent focus ring everywhere — the accessibility baseline. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
::selection { background: var(--gold); color: var(--ink); }

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — first tab stop on every page. */
.skip-link {
  position: absolute; left: var(--s4); top: -70px; z-index: var(--z-toast);
  background: var(--gold); color: var(--ink); font-weight: 700;
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }


/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--s5);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--s11); }
.section-tight { padding-block: var(--s9); }
.section-alt { background: var(--paper-2); }
.section-dark { background: var(--ink); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--on-dark); }

.center { text-align: center; }
.center p { margin-inline: auto; }

.muted { color: var(--text-soft); }
.section-dark .muted { color: var(--on-dark-soft); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }


/* ==========================================================================
   TYPE HELPERS
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.section-dark .eyebrow, .on-dark .eyebrow { color: var(--gold); }

/* Editorial section heading helper. */
.section-head { max-width: 64ch; margin-bottom: var(--s8); }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: var(--s4); }
.section-head p { margin-top: var(--s4); color: var(--text-soft); font-size: var(--fs-md); }
.section-dark .section-head p { color: var(--on-dark-soft); }

/* The signature three-colour rule — a quiet nod to the barber pole. */
.pole-rule {
  height: 3px; width: 74px; border-radius: var(--r-full);
  background: linear-gradient(90deg,
    var(--red) 0 33.33%, var(--gold) 33.33% 66.66%, var(--blue) 66.66% 100%);
}
.section-head.center .pole-rule { margin-inline: auto; }

.lead { font-size: var(--fs-md); line-height: 1.7; color: var(--text-soft); }
.section-dark .lead { color: var(--on-dark-soft); }


/* ==========================================================================
   BUTTONS — shared by the website and the dashboard
   ========================================================================== */
.btn, .btn-gold, .btn-outline, .btn-ghost, .btn-dark, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 12px 24px; border: 1px solid transparent; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active, .btn-gold:active, .btn-outline:active, .btn-ghost:active,
.btn-dark:active, .btn-danger:active { transform: translateY(1px); }

/* Primary — brand gold on brand black: the highest-contrast pairing available. */
.btn, .btn-gold { background: var(--gold); color: var(--ink); box-shadow: var(--sh-1); }
.btn:hover, .btn-gold:hover { background: var(--gold-deep); box-shadow: var(--sh-gold); color: var(--ink); }

.btn-outline { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }

.btn-ghost { background: transparent; color: var(--on-dark); border-color: var(--line-dark); }
.btn-ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

.btn-dark { background: var(--ink); color: var(--on-dark); }
.btn-dark:hover { background: var(--ink-4); color: var(--gold); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--red-deep); color: #fff; }

.btn-lg { padding: 16px 34px; font-size: var(--fs-base); }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled, .btn-gold:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }


/* ==========================================================================
   BADGES / STATUS PILLS — shared
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
  background: var(--paper-3); color: var(--text-soft); white-space: nowrap;
}
.badge.pending, .badge.draft   { background: var(--warn-bg);   color: var(--warn); }
.badge.confirmed, .badge.completed,
.badge.active, .badge.ok       { background: var(--ok-bg);     color: var(--ok); }
.badge.cancelled, .badge.inactive,
.badge.hidden, .badge.void     { background: var(--paper-3);   color: var(--text-soft); }
.badge.no_show, .badge.low     { background: var(--danger-bg); color: var(--danger); }
.badge.info                    { background: var(--info-bg);   color: var(--info); }


/* ==========================================================================
   TABLES — one primitive so both surfaces feel like one product
   ========================================================================== */
.table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}

table { width: 100%; border-collapse: collapse; }

th {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 2px solid var(--line-2); white-space: nowrap;
}
td { padding: var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--dur) var(--ease); }
tbody tr:hover { background: var(--paper-2); }
tbody tr.row-alert { background: var(--danger-bg); }
tbody tr.row-alert:hover { background: #f7d9d7; }


/* ==========================================================================
   FORM CONTROLS — one primitive so both surfaces feel like one product
   ========================================================================== */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="tel"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235e5b54' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
textarea { min-height: 96px; resize: vertical; }

label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
label > input, label > select, label > textarea { margin-top: 6px; font-weight: 400; }

/* Checkbox chips (service picker on transactions, etc.). */
.check, .check-chip {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
}
.check input[type="checkbox"], .check-chip input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 0;
  accent-color: var(--gold-deep); cursor: pointer;
}
.check-chip {
  padding: 9px 14px; border: 1px solid var(--line-2); border-radius: var(--r-full);
  background: var(--surface); transition: border-color var(--dur) var(--ease),
  background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.check-chip:hover { border-color: var(--gold-deep); background: var(--gold-soft); }
.check-chip:has(input:checked) {
  border-color: var(--gold-deep); background: var(--gold-soft); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}

.block-label { display: block; font-weight: 700; margin-bottom: var(--s3); }
.block-label small { font-weight: 400; }
.span2 { grid-column: span 2; }
.form-grid { display: grid; gap: var(--s5) var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .check { align-self: end; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } .span2 { grid-column: auto; } }


/* ==========================================================================
   SCROLL REVEAL
   Elements opt in with data-reveal; site.js adds .is-visible.
   Fully inert for visitors who ask for reduced motion.
   ========================================================================== */
/* The `.js` class is set by base_public.html on the very first line of <head>,
   so reveals only hide content when scripting is actually available. Without
   JavaScript every page stays fully readable. */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}