/* UCLA Design System tokens — distilled from UCLA Design Kit */
:root {
  /* Primary brand */
  --ucla-blue: #2774AE;
  --ucla-gold: #FFD100;
  --ucla-white: #FFFFFF;

  /* Secondary brand */
  --ucla-darkest-blue: #003B5C;
  --ucla-darker-blue: #00598C;
  --ucla-lighter-blue: #8BB8E8;
  --ucla-lightest-blue: #DAEBFE;
  --ucla-darkest-gold: #FFB81C;
  --ucla-darker-gold: #FFC72C;

  /* Grayscale */
  --ucla-text: #333333;       /* 80% */
  --ucla-gray-60: #666666;
  --ucla-gray-40: #999999;
  --ucla-gray-20: #CCCCCC;
  --ucla-gray-10: #E5E5E5;
  --ucla-gray-8: #EBEBEB;
  --ucla-gray-5: #F2F2F2;
  --ucla-gray-3: #F7F7F7;
  --ucla-black: #000000;

  /* Interactive (links/buttons on light) */
  --ucla-link: #00598C;
  --ucla-link-hover: #003B5C;
  --ucla-link-focus: #0079BF;
  --ucla-link-visited: #5223B0;
  --ucla-disabled: #757575;

  /* Denotive */
  --ucla-error: #D60000;
  --ucla-warning: #F57F17;
  --ucla-alert-blue: #8BB8E8;
  --ucla-alert-gray: #999999;
  --ucla-success: #007339;

  /* Type */
  --ucla-font: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif;
  --ucla-font-mono: "Courier New", Courier, monospace;

  /* Type scale */
  --ucla-fs-caption: 12.8px;
  --ucla-fs-12: 12px;
  --ucla-fs-14: 14px;
  --ucla-fs-body: 16px;
  --ucla-fs-18: 18px;
  --ucla-fs-20: 20px;
  --ucla-fs-24: 24px;
  --ucla-fs-28: 28px;
  --ucla-fs-36: 36px;
  --ucla-fs-54: 54px;
  --ucla-fs-81: 81px;

  /* Spacing — 4px base */
  --ucla-s-1: 4px;
  --ucla-s-2: 8px;
  --ucla-s-3: 12px;
  --ucla-s-4: 16px;
  --ucla-s-5: 20px;
  --ucla-s-6: 24px;
  --ucla-s-8: 32px;
  --ucla-s-10: 40px;
  --ucla-s-12: 48px;
  --ucla-s-16: 64px;

  /* Radius / strokes */
  --ucla-radius-btn: 4px;
  --ucla-radius-card: 0px;          /* design kit uses square corners */
  --ucla-rule: 1px solid var(--ucla-gray-20);
  --ucla-vrule: 8px solid var(--ucla-blue);
}

/* Base styles for the design canvas surfaces */


/* Chips / tags */
.ucla-chip--white { color: #fff !important; border: 1px solid #fff !important; }
.ucla-chip--gold { background: var(--ucla-gold); color: var(--ucla-text); }
.ucla-chip--blue { background: var(--ucla-blue); color: #fff; }
.ucla-chip--ghost { background: transparent; color: var(--ucla-darker-blue); border: 1px solid var(--ucla-gray-20); }
.ucla-chip--dark { background: var(--ucla-darkest-blue); color: #fff; }

/* Vertical accent rule used across cards/heroes */
.ucla-vrule { border-left: 8px solid var(--ucla-blue); padding-left: 16px; }
.ucla-vrule--gold { border-left-color: var(--ucla-gold); }

/* Generic image placeholder */
.ucla-img {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 8px, rgba(0,0,0,.02) 8px 16px),
    var(--ucla-gray-5);
  display: flex; align-items: flex-end; justify-content: flex-start;
  color: var(--ucla-gray-60);
  font-family: var(--ucla-font-mono); font-size: 12px;
  padding: 8px;
}

/* Calendar primitives */
.ucla-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--ucla-gray-20); background: var(--ucla-gray-20); gap: 1px; }
.ucla-cal-cell { background: #fff; min-height: 120px; padding: 8px 10px; }
.ucla-cal-head { background: var(--ucla-darkest-blue); color: #fff; padding: 12px 10px; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.ucla-cal-num { font-weight: 700; font-size: 14px; color: var(--ucla-text); }
.ucla-cal-num--muted { color: var(--ucla-gray-40); }
.ucla-cal-num--today { background: var(--ucla-blue); color: #fff; padding: 2px 6px; }

/* Event pill in calendar cells */
.ucla-evt-pill {
  display: block; margin-top: 4px;
  font-size: 12px; line-height: 16px; padding: 3px 6px;
  background: var(--ucla-lightest-blue); color: var(--ucla-darkest-blue);
  border-left: 3px solid var(--ucla-blue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ucla-evt-pill--gold { background: #FFF4C2; color: #5A4500; border-left-color: var(--ucla-gold); }
.ucla-evt-pill--dark { background: var(--ucla-darkest-blue); color: #fff; border-left-color: var(--ucla-gold); }
.ucla-evt-pill--ghost { background: var(--ucla-gray-5); color: var(--ucla-text); border-left-color: var(--ucla-gray-40); }