/* CilexPRO Planner — Vacation Calendar mockups
   Brand: Yellow #F5CD19 + Graphite #111110
   Type:  Manrope + JetBrains Mono
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --y:    #F5CD19;          /* primary yellow */
  --y-2:  #FFE25C;          /* light yellow */
  --y-3:  #C9A610;          /* dark yellow */
  --y-w:  #FFF6BF;          /* yellow wash */
  --y-d:  #2A2503;          /* yellow on dark (tint mixed) */

  --g:    #111110;          /* graphite (canvas) */
  --g-2:  #1A1A18;          /* surface 1 */
  --g-3:  #232220;          /* surface 2 */
  --g-4:  #2E2D2A;          /* surface 3 / border */
  --g-5:  #3B3A37;          /* divider */
  --g-6:  #56544F;          /* muted */
  --g-7:  #8B887F;          /* secondary text */
  --g-8:  #B8B5AA;          /* tertiary text */

  --w:    #FAFAF7;          /* off-white */
  --w-2:  #F1EFE7;          /* paper */
  --w-3:  #E5E2D6;          /* edge */

  /* Sick-leave accent — desaturated coral, sits with yellow */
  --r:    #E85C3C;
  --r-2:  #F08266;
  --r-d:  #3A1A12;

  /* Misc */
  --rad:  14px;
  --rad-s: 8px;
  --rad-l: 22px;
}

.mock,
.mock * {
  box-sizing: border-box;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

.mock .mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; }

/* Hide scrollbars inside frames so artboards look clean */
.mock ::-webkit-scrollbar { display: none; }
.mock * { scrollbar-width: none; }