/* Student Plan UI Design Tokens
   Source: assets/reference/page-reference.png
   Note: These values are practical approximations for screenshot-driven reconstruction.
*/
:root {
  /* Colors */
  --color-primary: #13BFA8;
  --color-primary-2: #28D0BC;
  --color-primary-dark: #087C73;
  --color-primary-light: #E8FAF7;
  --color-primary-soft: rgba(19, 191, 168, 0.12);

  --color-bg-page: #F3F7F8;
  --color-bg-shell: #FFFFFF;
  --color-bg-card: #FFFFFF;

  --color-text-main: #142033;
  --color-text-secondary: #6B7A90;
  --color-text-muted: #8A98AA;
  --color-border: rgba(16, 185, 169, 0.16);
  --color-border-soft: rgba(20, 50, 70, 0.08);

  --color-purple: #7E70F2;
  --color-purple-light: #F2F0FF;

  --color-warning: #F59E5B;
  --color-warning-light: #FFF5E8;

  --color-success: #13A887;
  --color-success-light: #E9FAF4;

  --color-error: #F05A5A;
  --color-error-light: #FFF0F0;

  --color-muted: #6B7890;
  --color-muted-light: #F4F6F8;

  /* Radius */
  --radius-page: 30px;
  --radius-banner: 28px;
  --radius-card: 22px;
  --radius-inner: 18px;
  --radius-control: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-page: 0 20px 60px rgba(40, 80, 100, 0.12);
  --shadow-card: 0 12px 32px rgba(20, 50, 70, 0.08);
  --shadow-soft: 0 6px 18px rgba(20, 50, 70, 0.06);
  --shadow-nav: 0 10px 30px rgba(20, 50, 70, 0.10);

  /* Typography */
  --font-family-base: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-banner-title: 42px;
  --font-size-section-title: 30px;
  --font-size-card-title: 25px;
  --font-size-body: 18px;
  --font-size-small: 15px;

  /* Layout */
  --page-width: 941px;
  --sidebar-width: 136px;
  --content-width: 730px;
  --content-padding-x: 24px;
  --content-gap: 24px;
  --card-padding: 20px;
  --banner-height: 340px;
  --type-hero-height: 175px;
}