/* =========================================================
   Kutlo theme
   One place for every colour, font and radius in the app.
   Change a value here and the whole app follows.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Figtree:wght@400;500;600;700&display=swap");

:root {
  /* ---- Brand ---- */
  --kt-green-900: #10261F;   /* Bottle green: headers, primary buttons */
  --kt-green-800: #1B3A30;   /* Raised surface on green */
  --kt-green-700: #2F5446;   /* Borders on green */
  --kt-green-600: #35574A;   /* Outline buttons on green */
  --kt-green-500: #3D6B58;   /* Secondary brand green */
  --kt-brass:     #B8873A;   /* Brass: accent, highlights, selected slot */
  --kt-brass-dark:#7A561B;   /* Brass text on light brass */
  --kt-brass-soft:#F1E4CB;   /* Light brass fills, "new" flags */
  --kt-brass-wash:#FFFCF6;   /* Faint brass background */

  /* ---- Neutrals (green-tinted) ---- */
  --kt-paper:     #F3F5F2;   /* App background */
  --kt-card:      #FFFFFF;   /* Cards and inputs */
  --kt-line:      #DCE3DE;   /* Borders and dividers */
  --kt-fill:      #E4E9E5;   /* Segmented control track */
  --kt-fill-2:    #E7ECE8;   /* Neutral chip */
  --kt-toggle-off:#C9D3CD;   /* Switch off */
  --kt-grab:      #C6CFCA;   /* Bottom-sheet handle */
  --kt-text:      #132620;   /* Main text */
  --kt-muted:     #5F6F67;   /* Secondary text */
  --kt-faint:     #8A9891;   /* Inactive tab icons */
  --kt-disabled:  #AEBAB3;   /* Taken time slots */
  --kt-on-green:  #FFFFFF;   /* Text on bottle green */
  --kt-on-green-muted: #B9CBC2;
  --kt-on-green-soft:  #DCE7E1;

  /* ---- Status ---- */
  --kt-ok:        #2E7A4E;   --kt-ok-soft:   #E0F0E5;
  --kt-warn:      #A8661C;   --kt-warn-soft: #F7E9D3;
  --kt-bad:       #B03A2A;   --kt-bad-soft:  #F6DFDA;

  /* ---- Calendar blocks ---- */
  --kt-cal-booked: #DCE9E1;
  --kt-cal-done:   #E9EDEA;  --kt-cal-done-edge: #9AA8A0;

  /* ---- Demo stage (the dark page around the phone) ---- */
  --kt-stage:       #0B1C17;
  --kt-stage-text:  #E9EFEB;
  --kt-stage-muted: #9DB0A6;
  --kt-stage-line:  #2A473C;
  --kt-phone-bezel: #050C0A;

  /* ---- Shadows and overlays ---- */
  --kt-shadow-sm:  0 1px 3px rgba(16, 38, 31, .12);
  --kt-shadow-lg:  0 8px 24px rgba(0, 0, 0, .25);
  --kt-shadow-phone: 0 40px 80px rgba(0, 0, 0, .5);
  --kt-scrim:      rgba(8, 20, 16, .45);

  /* ---- Barber-pole stripe (brand motif) ---- */
  --kt-pole: repeating-linear-gradient(135deg,
      var(--kt-brass) 0 10px, var(--kt-stage-text) 10px 20px, var(--kt-green-800) 20px 30px);

  /* ---- Type ---- */
  --kt-font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --kt-font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Shape ---- */
  --kt-radius-sm: 10px;
  --kt-radius:    14px;
  --kt-radius-lg: 18px;
  --kt-radius-pill: 999px;
}