/* ============================================================
   Servicebook.ph — Colors & Type
   v1.0 draft, July 2026 — sibling of Orderbook.ph (Lechon Labs)
   Same structure as Orderbook's colors_and_type.css; primary
   hue rotated navy → forest green. Mustard accent, cream
   neutrals, type stack, spacing, radii, shadows are shared
   family tokens and stay identical.
   ============================================================ */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/PlusJakartaSans-regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-style: italic;
  src: url("fonts/PlusJakartaSans-italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 700 800;
  font-style: normal;
  src: url("fonts/PlusJakartaSans-bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 700 800;
  font-style: italic;
  src: url("fonts/PlusJakartaSans-boldItalic.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/DMSans-regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-style: italic;
  src: url("fonts/DMSans-italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-weight: 600 700;
  font-style: normal;
  src: url("fonts/DMSans-bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-weight: 600 700;
  font-style: italic;
  src: url("fonts/DMSans-boldItalic.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Fira Mono";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/FiraMono-regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  font-weight: 600 700;
  font-style: normal;
  src: url("fonts/FiraMono-bold.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --sb-green:           #1A5C3A;  /* Primary. App icon bg, headers, primary text on light */
  --sb-green-dark:      #0D4026;  /* Status bar, pressed states */
  --sb-green-deep:      #07281A;  /* Hero background, deep sections (marketing only) */
  --sb-green-dim:       #3A7658;  /* Dim logo dots, secondary marks on green */

  --sb-mustard:         #C9920A;  /* CTAs, highlights, ".ph" wordmark, active states (family accent) */
  --sb-mustard-light:   #F5C842;  /* Logo dot, hover, light accent */
  --sb-mustard-bg:      #FFF8E1;  /* Banner, alert bg, subtle highlights */

  --sb-teal:            #0F6E56;  /* Success, paid badges, positive analytics */
  --sb-teal-light:      #E8F5E9;  /* Success banner bg */

  --sb-warn-bg:         #FEF9E7;  /* Offline banner (yellow) */
  --sb-warn-fg:         #8A6D00;
  --sb-danger:          #C0392B;  /* Unpaid/overdue, destructive */
  --sb-danger-bg:       #FBE9E7;

  /* ---------- NEUTRALS (shared family tokens) ---------- */
  --sb-cream:           #FDF8EF;
  --sb-cream-2:         #F6EFE0;
  --sb-white:           #FFFFFF;
  --sb-dark:            #1C1C1C;
  --sb-mid:             #555555;
  --sb-muted:           #8A8A8A;
  --sb-border:          #E0E0E0;
  --sb-border-soft:     #EEE7D6;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --fg-1:               var(--sb-dark);
  --fg-2:               var(--sb-mid);
  --fg-3:               var(--sb-muted);
  --fg-on-green:        #FFFFFF;
  --fg-accent:          var(--sb-mustard);
  --fg-brand:           var(--sb-green);

  --bg-screen:          var(--sb-cream);
  --bg-card:            var(--sb-white);
  --bg-surface-alt:     var(--sb-cream-2);
  --bg-inverse:         var(--sb-green);

  /* ---------- STATUS (booking pipeline + payments) ---------- */
  --status-request:      #1A5C3A;   /* bagong request */
  --status-request-bg:   #E7F3EC;
  --status-awaiting:     #8A6D00;   /* naghihintay ng kumpirmasyon */
  --status-awaiting-bg:  #FFF8E1;
  --status-scheduled:    #1A3A5C;   /* naka-iskedyul (family navy) */
  --status-scheduled-bg: #E7EEF5;
  --status-inprogress:   #B5651D;   /* ginagawa */
  --status-inprogress-bg:#FCE8D2;
  --status-done:         #0F6E56;   /* tapos na */
  --status-done-bg:      #E8F5E9;
  --status-cancelled:    #8A8A8A;
  --status-cancelled-bg: #F3F3F3;

  --pay-paid:           var(--sb-teal);
  --pay-paid-bg:        var(--sb-teal-light);
  --pay-unpaid:         var(--sb-danger);
  --pay-unpaid-bg:      var(--sb-danger-bg);

  /* ---------- TYPE FAMILIES (shared family stack) ---------- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  28px;
  --fs-4xl:  34px;
  --fs-5xl:  44px;

  --lh-tight: 1.15;
  --lh-snug:  1.30;
  --lh-body:  1.50;

  /* ---------- SPACING (4pt base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- RADII ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---------- SHADOWS (green-tinted instead of navy-tinted) ---------- */
  --shadow-1: 0 1px 2px rgba(13, 64, 38, 0.06);
  --shadow-2: 0 2px 6px rgba(13, 64, 38, 0.08);
  --shadow-3: 0 6px 18px rgba(13, 64, 38, 0.10);
  --shadow-fab: 0 6px 16px rgba(201, 146, 10, 0.35);

  /* ---------- BORDERS ---------- */
  --bw: 1px;
  --border-card: 1px solid var(--sb-border);
  --border-card-soft: 1px solid var(--sb-border-soft);

  /* ---------- MOTION ---------- */
  --ease-std: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 380ms;

  /* ---------- LAYOUT ---------- */
  --tap-target: 44px;
  --screen-max: 420px;
  --screen-web: 1200px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply .sb to a root element.
   ============================================================ */

.sb, .sb * { box-sizing: border-box; }

.sb {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-screen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sb h1, .sb .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-brand);
  margin: 0 0 var(--sp-3);
}
.sb h2, .sb .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-brand);
  margin: 0 0 var(--sp-3);
}
.sb h3, .sb .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}
.sb h4, .sb .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}

.sb p { margin: 0 0 var(--sp-3); color: var(--fg-1); }

.sb small, .sb .muted {
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.sb .eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-mustard);
}

.sb .label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  letter-spacing: 0.01em;
}

.sb code, .sb .mono, .sb kbd {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--bg-surface-alt);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--sb-green-dark);
}

.sb .amount, .sb .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sb .peso::before { content: "₱"; margin-right: 1px; }

.sb a { color: var(--sb-mustard); text-decoration: none; font-weight: 600; }
.sb a:hover { color: var(--sb-green); text-decoration: underline; text-underline-offset: 3px; }