/* clickinPMS — Colors & Type tokens
 * Source: clickinPMS Brand Guide (Gemini_Generated_Image_djo1z6djo1z6djo1.png)
 * Display: Outfit (warm geometric — kiosk heroes, headings, marketing)
 * Body/UI: Plus Jakarta Sans (readable geometric — dashboards, forms, body text)
 */

/* ── Import brand font ─────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ── Brand palette (primary) ───────────────────────────────── */
  --ck-cyan:        #00BCD4;   /* PRIMARY CYAN   — hero, CTAs on dark, brand mark */
  --ck-blue:        #2196F3;   /* PRIMARY BLUE   — primary action, links */
  --ck-orange:      #FF9800;   /* ACCENT ORANGE  — highlight, alerts, featured */

  /* ── Brand palette (neutrals) ──────────────────────────────── */
  --ck-dark:        #333333;   /* NEUTRAL DARK   — body text, dark UI chrome */
  --ck-light:       #F5F5F5;   /* NEUTRAL LIGHT  — surfaces, subtle fills */
  --ck-white:       #FFFFFF;
  --ck-black:       #000000;

  /* ── Extended neutrals (derived) ───────────────────────────── */
  --ck-ink-900:     #1A1A1A;
  --ck-ink-800:     #2B2B2B;
  --ck-ink-700:     #333333;   /* = dark */
  --ck-ink-600:     #4D4D4D;
  --ck-ink-500:     #707070;
  --ck-ink-400:     #9A9A9A;
  --ck-ink-300:     #C8C8C8;
  --ck-ink-200:     #E5E5E5;
  --ck-ink-100:     #F5F5F5;   /* = light */
  --ck-ink-050:     #FAFAFA;

  /* ── Cyan & Blue scales (for gradients + hovers) ───────────── */
  --ck-cyan-50:     #E0F7FA;
  --ck-cyan-100:    #B2EBF2;
  --ck-cyan-300:    #4DD0E1;
  --ck-cyan-500:    #00BCD4;   /* = cyan */
  --ck-cyan-700:    #0097A7;
  --ck-cyan-900:    #006064;

  --ck-blue-50:     #E3F2FD;
  --ck-blue-100:    #BBDEFB;
  --ck-blue-300:    #64B5F6;
  --ck-blue-500:    #2196F3;   /* = blue */
  --ck-blue-700:    #1976D2;
  --ck-blue-900:    #0D47A1;

  --ck-orange-50:   #FFF3E0;
  --ck-orange-300:  #FFB74D;
  --ck-orange-500:  #FF9800;   /* = orange */
  --ck-orange-700:  #F57C00;

  /* ── Semantic (derived — guide didn't spec these) ──────────── */
  --ck-success:     #2DD164;   /* green, used only for checkin success */
  --ck-warning:     #FF9800;   /* = orange */
  --ck-danger:      #E53935;   /* red; avoid the raw #FF1D1D placeholder */
  --ck-info:        #2196F3;   /* = blue */

  /* ── Signature gradient (brand guide "Gradient" swatch) ────── */
  --ck-gradient-brand: linear-gradient(180deg, #4DD0E1 0%, #00BCD4 55%, #2196F3 100%);
  --ck-gradient-brand-hz: linear-gradient(90deg, #00BCD4 0%, #2196F3 100%);
  --ck-gradient-hero:  linear-gradient(135deg, #00BCD4 0%, #2196F3 100%);

  /* ── Semantic surface tokens ──────────────────────────────── */
  --fg-1:           var(--ck-ink-900);   /* primary text */
  --fg-2:           var(--ck-ink-600);   /* secondary text */
  --fg-3:           var(--ck-ink-500);   /* tertiary / meta */
  --fg-inverse:     var(--ck-white);
  --fg-brand:       var(--ck-blue);      /* "clickin" wordmark grey, "PMS" wordmark blue */
  --fg-brand-accent:var(--ck-cyan);

  --bg-1:           var(--ck-white);     /* canvas */
  --bg-2:           var(--ck-ink-050);
  --bg-3:           var(--ck-ink-100);   /* subtle surface */
  --bg-inverse:     var(--ck-ink-900);
  --bg-brand:       var(--ck-cyan);
  --bg-brand-alt:   var(--ck-blue);

  --border-1:       var(--ck-ink-200);
  --border-2:       var(--ck-ink-300);
  --focus-ring:     rgba(33, 150, 243, 0.45);

  /* ── Type scale ────────────────────────────────────────────── */
  --font-sans:      "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:   "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes — tuned to kiosk + web product, with Inter's tight line-height */
  --fs-xs:          12px;
  --fs-sm:          14px;
  --fs-base:        16px;
  --fs-md:          18px;
  --fs-lg:          20px;
  --fs-xl:          24px;
  --fs-2xl:         32px;
  --fs-3xl:         40px;
  --fs-4xl:         56px;
  --fs-5xl:         72px;    /* kiosk headline */
  --fs-6xl:         96px;    /* kiosk hero */
  --fs-7xl:         128px;   /* kiosk "DOBRODOŠLI" */

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  --lh-tight:       1.0;     /* kiosk display uses line-height 100% */
  --lh-snug:        1.15;
  --lh-normal:      1.4;
  --lh-relaxed:     1.6;

  --tracking-tight: -0.02em;
  --tracking-normal:0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;

  /* ── Spacing scale (4-based) ─────────────────────────────── */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;
  --space-20:       80px;
  --space-24:       96px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;     /* kiosk small buttons */
  --radius-xl:      32px;
  --radius-2xl:     50px;     /* kiosk pill CTAs (from Figma: borderRadius: 50) */
  --radius-card:    16px;
  --radius-jumbo:   130px;    /* kiosk-zaprt "No self check-in" slab */
  --radius-pill:    9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:      0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:      0 2px 6px rgba(15, 23, 42, 0.08);
  --shadow-md:      0 6px 18px rgba(15, 23, 42, 0.10);
  --shadow-lg:      0 16px 40px rgba(15, 23, 42, 0.14);
  --shadow-brand:   0 10px 30px rgba(33, 150, 243, 0.35);
  --shadow-overlay: 0 30px 80px rgba(0, 0, 0, 0.45);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.6);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       400ms;
}

/* ── Semantic element defaults ─────────────────────────────── */
html { font-family: var(--font-sans); color: var(--fg-1); -webkit-font-smoothing: antialiased; }
body { font-size: var(--fs-base); line-height: var(--lh-normal); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  margin: 0;
}
.subhead {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ck-blue);
}
.meta {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Kiosk display type — huge, white-on-photo, centered, tight */
.kiosk-hero   { font-size: var(--fs-7xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--ck-white); text-align: center; letter-spacing: var(--tracking-tight); }
.kiosk-prompt { font-size: var(--fs-6xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--ck-white); text-align: center; }
.kiosk-body   { font-size: var(--fs-5xl); font-weight: var(--fw-medium); line-height: 1.1;          color: var(--ck-white); text-align: center; }