/* ISCE 2026 — Colors & Type Tokens
   Single source of truth for colors, gradients, typography, radii, shadows, spacing.
   Derived from: Logo sampling (uploads/Logo.PNG) + Project Proposal brand foundation
   (Purple / Magenta / Yellow, 紫 → 洋红 → 黄 gradient, Energetic / Structured / Modern / Confident / Event-led). */

/* ————— Webfonts (Google Fonts) ————— */
/* Proposal specifies Inter for English + Noto Sans SC for Chinese.
   Logo wordmark suggests a heavier display face; we pair Inter with
   an italic/heavy display for section headlines. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
  /* ————— Core Brand Colors (sampled from logo) ————— */
  --isce-purple-900: #2B0A5E;  /* deepest, for backgrounds + contrast */
  --isce-purple-800: #3C137A;
  --isce-purple-700: #5A1E96;  /* PRIMARY PURPLE — "INTERNATIONAL STUDENT" wordmark */
  --isce-purple-600: #7A2CB8;
  --isce-purple-500: #9447D4;
  --isce-purple-200: #D9C5F0;
  --isce-purple-100: #EEE4F9;
  --isce-purple-050: #F7F1FD;

  --isce-magenta-900: #7A1040;
  --isce-magenta-800: #A11855;
  --isce-magenta-700: #C51E6E;  /* secondary magenta */
  --isce-magenta-600: #D21E5A;  /* PRIMARY MAGENTA — "CAREER EXPO" wordmark */
  --isce-magenta-500: #E63789;
  --isce-magenta-200: #F8C8DE;
  --isce-magenta-100: #FDE4EE;

  --isce-gold-700:    #C99500;
  --isce-gold-600:    #E8AE00;
  --isce-gold-500:    #F0B400;  /* ACCENT GOLD — play triangle in logo */
  --isce-gold-300:    #FFD969;
  --isce-gold-100:    #FFF4C2;

  /* ————— Neutrals ————— */
  --isce-ink-900: #0E0A1C;     /* near-black with purple undertone */
  --isce-ink-800: #1C1631;
  --isce-ink-700: #2E2749;
  --isce-ink-600: #4A4264;
  --isce-ink-500: #6B6482;
  --isce-ink-400: #948EA6;
  --isce-ink-300: #C4BFD1;
  --isce-ink-200: #E4E1EC;
  --isce-ink-100: #F2F0F6;
  --isce-ink-050: #F9F8FC;
  --isce-white:   #FFFFFF;

  /* ————— Semantic Roles ————— */
  --isce-bg:         var(--isce-white);
  --isce-bg-subtle:  var(--isce-ink-050);
  --isce-bg-panel:   var(--isce-ink-100);
  --isce-bg-invert:  var(--isce-ink-900);

  --isce-fg:         var(--isce-ink-900);
  --isce-fg-muted:   var(--isce-ink-600);
  --isce-fg-subtle:  var(--isce-ink-500);
  --isce-fg-invert:  var(--isce-white);

  --isce-brand-primary:    var(--isce-purple-700);
  --isce-brand-secondary:  var(--isce-magenta-600);
  --isce-brand-accent:     var(--isce-gold-500);

  --isce-border:           var(--isce-ink-200);
  --isce-border-strong:    var(--isce-ink-300);
  --isce-focus-ring:       var(--isce-magenta-500);

  --isce-success: #1E8F5A;
  --isce-warning: #D08700;
  --isce-danger:  #C4264B;
  --isce-info:    var(--isce-purple-600);

  /* ————— Signature Gradient (紫 → 洋红 → 黄) ————— */
  --isce-gradient-momentum:
    linear-gradient(90deg, #5A1E96 0%, #8E1E94 32%, #D21E5A 66%, #F0B400 100%);
  --isce-gradient-momentum-diag:
    linear-gradient(135deg, #5A1E96 0%, #8E1E94 30%, #D21E5A 65%, #F0B400 100%);
  --isce-gradient-momentum-radial:
    radial-gradient(circle at 15% 20%, #5A1E96 0%, #8E1E94 30%, #D21E5A 65%, #F0B400 100%);
  --isce-gradient-purple-magenta:
    linear-gradient(135deg, #5A1E96 0%, #D21E5A 100%);
  --isce-gradient-magenta-gold:
    linear-gradient(135deg, #D21E5A 0%, #F0B400 100%);
  --isce-gradient-dark:
    linear-gradient(180deg, #1C1631 0%, #2B0A5E 100%);

  /* ————— Typography ————— */
  --isce-font-sans:    'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --isce-font-display: 'Inter', 'Noto Sans SC', sans-serif;  /* used heavy-weight for display */
  --isce-font-cn:      'Noto Sans SC', 'Inter', sans-serif;
  --isce-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (desktop) */
  --isce-text-xs:   12px;
  --isce-text-sm:   14px;
  --isce-text-base: 16px;
  --isce-text-md:   18px;
  --isce-text-lg:   20px;
  --isce-text-xl:   24px;
  --isce-text-2xl:  30px;
  --isce-text-3xl:  38px;
  --isce-text-4xl:  48px;
  --isce-text-5xl:  64px;
  --isce-text-6xl:  84px;   /* hero display */
  --isce-text-7xl:  112px;  /* XL hero */

  --isce-leading-tight:  1.05;
  --isce-leading-snug:   1.18;
  --isce-leading-normal: 1.45;
  --isce-leading-body:   1.55;

  --isce-tracking-tight: -0.02em;
  --isce-tracking-flat:  0;
  --isce-tracking-wide:  0.02em;
  --isce-tracking-caps:  0.08em;

  /* ————— Radii ————— */
  --isce-radius-sm:   6px;
  --isce-radius:      10px;
  --isce-radius-md:   14px;
  --isce-radius-lg:   20px;
  --isce-radius-xl:   28px;
  --isce-radius-pill: 999px;

  /* ————— Shadows / Elevation ————— */
  --isce-shadow-xs: 0 1px 2px rgba(14, 10, 28, 0.06);
  --isce-shadow-sm: 0 2px 6px rgba(14, 10, 28, 0.08);
  --isce-shadow-md: 0 8px 20px rgba(14, 10, 28, 0.10);
  --isce-shadow-lg: 0 18px 40px rgba(14, 10, 28, 0.14);
  --isce-shadow-xl: 0 30px 60px rgba(14, 10, 28, 0.18);
  --isce-shadow-brand: 0 12px 28px rgba(90, 30, 150, 0.28);
  --isce-shadow-accent: 0 12px 28px rgba(210, 30, 90, 0.28);

  /* ————— Spacing Scale (4-pt baseline) ————— */
  --isce-space-1:  4px;
  --isce-space-2:  8px;
  --isce-space-3:  12px;
  --isce-space-4:  16px;
  --isce-space-5:  24px;
  --isce-space-6:  32px;
  --isce-space-7:  48px;
  --isce-space-8:  64px;
  --isce-space-9:  96px;
  --isce-space-10: 128px;

  /* ————— Motion ————— */
  --isce-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --isce-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --isce-dur-fast:    120ms;
  --isce-dur:         200ms;
  --isce-dur-slow:    360ms;

  /* ————— Layout ————— */
  --isce-container:   1240px;
  --isce-container-narrow: 880px;
  --isce-gutter:      clamp(20px, 4vw, 48px);
}

/* ————— Semantic Type Styles (class-friendly) ————— */
.isce-eyebrow {
  font-family: var(--isce-font-sans);
  font-size: var(--isce-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--isce-tracking-caps);
  color: var(--isce-magenta-600);
}

.isce-h1, h1.isce {
  font-family: var(--isce-font-display);
  font-size: var(--isce-text-6xl);
  font-weight: 900;
  line-height: var(--isce-leading-tight);
  letter-spacing: var(--isce-tracking-tight);
  color: var(--isce-fg);
}
.isce-h2, h2.isce {
  font-family: var(--isce-font-display);
  font-size: var(--isce-text-4xl);
  font-weight: 900;
  line-height: var(--isce-leading-snug);
  letter-spacing: var(--isce-tracking-tight);
}
.isce-h3, h3.isce {
  font-family: var(--isce-font-display);
  font-size: var(--isce-text-2xl);
  font-weight: 800;
  line-height: var(--isce-leading-snug);
  letter-spacing: var(--isce-tracking-tight);
}
.isce-h4, h4.isce {
  font-family: var(--isce-font-sans);
  font-size: var(--isce-text-xl);
  font-weight: 700;
  line-height: var(--isce-leading-snug);
}
.isce-lede {
  font-family: var(--isce-font-sans);
  font-size: var(--isce-text-lg);
  font-weight: 400;
  line-height: var(--isce-leading-body);
  color: var(--isce-fg-muted);
}
.isce-body, p.isce {
  font-family: var(--isce-font-sans);
  font-size: var(--isce-text-base);
  font-weight: 400;
  line-height: var(--isce-leading-body);
  color: var(--isce-fg);
}
.isce-small {
  font-size: var(--isce-text-sm);
  color: var(--isce-fg-muted);
}
.isce-micro {
  font-size: var(--isce-text-xs);
  letter-spacing: var(--isce-tracking-wide);
  color: var(--isce-fg-subtle);
}

/* Signature gradient text (use sparingly on display headlines) */
.isce-gradient-text {
  background: var(--isce-gradient-momentum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}