/* ===========================
   CLiKIN Apple-style Theme
   Single source of truth for colors + base typography
=========================== */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;

  --bg:#ffffff;
  --surface:#ffffff;
  /* Sky-tinted neutral surfaces (Apple-like) */
  --sky-0:#F7FAFF;
  --sky-1:#F5F9FF;
  --sky-2:#EEF5FF;

  --surface2:var(--sky-1);
  --ink:#1d1d1f;
  --muted:#6e6e73;
  /* Slightly blue-tinted line for a cleaner, more vibrant feel */
  --line:rgba(10,132,255,.16);


  /* Derived tokens used across pages */
  --accent: var(--blue);
  --accent2: var(--blue2);
  --tint: rgba(10,132,255,.06);
  --tint2: rgba(10,132,255,.12);

  /* Apple-like accent */
  --blue:#0A84FF;
  --blue2:#0071e3;

  /* Status */
  --good:#34C759;
  --warn:#FF9F0A;
  --bad:#FF3B30;

  /* Soft depth with a hint of blue */
  --shadow:0 12px 34px rgba(0,113,227,.10);
  --shadow-sm:0 8px 24px rgba(0,113,227,.08);

  /* Radii */
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;
}

html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }
::selection{ background:rgba(10,132,255,.20); }

/* Subtle section background helper */
.cl-bg-soft{
  background:linear-gradient(180deg, var(--sky-0) 0%, var(--sky-2) 100%);
}

/* Small badge */
.cl-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(10,132,255,.10);
  color:var(--blue2);
  border:1px solid rgba(10,132,255,.18);
}


/* ===========================
   Buttons / Links
=========================== */
.cl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  color:var(--ink);
  font-weight:650;
  letter-spacing:.01em;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.cl-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,113,227,.18); border-color:rgba(10,132,255,.25); }
.cl-btn:active{ transform:translateY(0px); box-shadow:var(--shadow-sm); }

.cl-btn-primary{
  background:linear-gradient(180deg, rgba(10,132,255,1), rgba(0,113,227,1));
  color:#fff;
  border-color:rgba(10,132,255,.35);
}
.cl-btn-primary:hover{ box-shadow:0 14px 34px rgba(0,113,227,.25); }

.cl-link{
  color:var(--accent2);
  font-weight:650;
}
.cl-link:hover{ text-decoration:underline; }

/* ===========================
   Card polish
=========================== */
.cl-card{
  background:var(--surface);
  border:1px solid rgba(10,132,255,.14);
  border-radius:var(--r-lg);
  box-shadow:0 10px 28px rgba(0,113,227,.07);
}
.cl-card:hover{ border-color:rgba(10,132,255,.22); box-shadow:0 18px 42px rgba(0,113,227,.14); }

/* Responsive helper */
@media (max-width:720px){
  .clikin-topnav .clWrap{ padding-left:var(--padXsm); padding-right:var(--padXsm); }
}


/* Sun (Apple yellow) */
:root{
  --cl-yellow: #FFD60A;
  --cl-yellow-ink: #5a4b00;
  --cl-yellow-bg: rgba(255, 214, 10, 0.18);
  --cl-yellow-br: rgba(255, 214, 10, 0.32);
}
.pill.sun{
  background: var(--cl-yellow-bg);
  border: 1px solid var(--cl-yellow-br);
  color: var(--cl-yellow-ink);
}