/*
  PDP Design System v0.7 — barcha brendlar (data-brand)
  Foydalanish: <html data-brand="academy" data-theme="light"> — brend va rejim atributlari; faqat tokenlar (sahifa CSS’i yo‘q)
  Shriftlar: <link rel="stylesheet" href="https://design.pdp.uz/ds/fonts/fonts.css"> (self-host, SIL OFL; barcha brendlar)
  Build yaratadi (tools/ecosystem-ds/build.js --project pdp) — qo‘lda tahrirlamang.
*/
:root {
  /* Asosiy ranglar */
  --eco-color-white: #FFFFFF;
  --eco-color-black: #141414;
  --eco-color-surface: #F5F5F5;
  --eco-color-brand-tint: #E9FED8;
  --eco-color-surface-active: #F7F7F7;
  --eco-color-surface-hover: #E6E6E6;
  --eco-color-surface-tertiary: #E6E6E6;
  --eco-color-surface-raised: #ECECEC;
  --eco-color-surface-strong: #DCDCDC;

  /* PDP EcoSystem — brend primitivlari */
  --eco-color-malachite: #00C508;
  --eco-color-lime: #BDFF00;
  --eco-color-lime-light: #B5F500;
  --eco-color-malachite-button: #00B533;
  --eco-color-green-done: #00A603;

  /* PDP Academy — brend primitivlari */
  --eco-color-academy-green: #00B533;
  --eco-color-academy-yellow: #FFCC19;

  /* PDP School — brend primitivlari (taklif) */
  --eco-color-school-blue: #0019FF;
  --eco-color-school-cyan: #00E0FF;
  --eco-color-school-pink: #FF0165;
  --eco-color-school-yellow: #FFC701;
  --eco-color-school-navy: #000C7A;

  /* PDP University — brend primitivlari (taklif) */
  --eco-color-university-teal: #26A49D;
  --eco-color-university-teal-dark: #008982;
  --eco-color-university-yellow: #FFCC19;
  --eco-color-university-navy: #202D4C;

  /* PDP Junior — brend primitivlari (taklif) */
  --eco-color-junior-cyan: #00E0EF;
  --eco-color-junior-cyan-deep: #00CDDA;
  --eco-color-junior-deep: #004450;
  --eco-color-junior-ink: #002227;
  --eco-color-junior-sky: #39E1EC;

  /* Yashil · Vivid Malachite — ecosystem */
  --eco-color-green-25: #F6FFF5;
  --eco-color-green-50: #E7FFE4;
  --eco-color-green-100: #C6FFC0;
  --eco-color-green-200: #7EFA77;
  --eco-color-green-300: #63E95D;
  --eco-color-green-400: #40D63C;
  --eco-color-green-500: #00C508;
  --eco-color-green-600: #02A307;
  --eco-color-green-700: #048307;
  --eco-color-green-800: #026503;
  --eco-color-green-900: #014C02;
  --eco-color-green-950: #013A04;

  /* Limon · Bitter Lime — ecosystem */
  --eco-color-lime-25: #FAFFF5;
  --eco-color-lime-50: #F4FFE6;
  --eco-color-lime-100: #E5FFC0;
  --eco-color-lime-200: #CFFF80;
  --eco-color-lime-300: #BDFF00;
  --eco-color-lime-400: #AAE506;
  --eco-color-lime-500: #92C505;
  --eco-color-lime-600: #78A302;
  --eco-color-lime-700: #5F8201;
  --eco-color-lime-800: #476300;
  --eco-color-lime-900: #354B01;
  --eco-color-lime-950: #263701;

  /* Academy yashil · PDP Green — academy */
  --eco-color-academy-green-25: #F5FFF5;
  --eco-color-academy-green-50: #E6FFE6;
  --eco-color-academy-green-100: #C4FFC5;
  --eco-color-academy-green-200: #8AF691;
  --eco-color-academy-green-300: #71E57A;
  --eco-color-academy-green-400: #4ED05C;
  --eco-color-academy-green-500: #00B533;
  --eco-color-academy-green-600: #029429;
  --eco-color-academy-green-700: #02791F;
  --eco-color-academy-green-800: #015E17;
  --eco-color-academy-green-900: #00480F;
  --eco-color-academy-green-950: #013609;

  /* Academy sariq · Quyosh — academy */
  --eco-color-academy-yellow-25: #FFFDF7;
  --eco-color-academy-yellow-50: #FFF9EA;
  --eco-color-academy-yellow-100: #FFF1CC;
  --eco-color-academy-yellow-200: #FFE6A4;
  --eco-color-academy-yellow-300: #FFDA76;
  --eco-color-academy-yellow-400: #FFCC19;
  --eco-color-academy-yellow-500: #D7AB04;
  --eco-color-academy-yellow-600: #B28D09;
  --eco-color-academy-yellow-700: #8E7003;
  --eco-color-academy-yellow-800: #705701;
  --eco-color-academy-yellow-900: #554201;
  --eco-color-academy-yellow-950: #3D2E01;

  /* School ko‘k · Brand — school */
  --eco-color-school-blue-25: #FBFCFE;
  --eco-color-school-blue-50: #E7EFFE;
  --eco-color-school-blue-100: #CFDEFC;
  --eco-color-school-blue-200: #A9C6FE;
  --eco-color-school-blue-300: #84AEFF;
  --eco-color-school-blue-400: #5F94FE;
  --eco-color-school-blue-500: #3777FF;
  --eco-color-school-blue-600: #0055FF;
  --eco-color-school-blue-700: #0019FF;
  --eco-color-school-blue-800: #061DBB;
  --eco-color-school-blue-900: #0A1A7B;
  --eco-color-school-blue-950: #0B1240;

  /* University teal — university */
  --eco-color-university-teal-25: #F2FFFE;
  --eco-color-university-teal-50: #E9F6F5;
  --eco-color-university-teal-100: #D4EDEB;
  --eco-color-university-teal-200: #ACE4DF;
  --eco-color-university-teal-300: #7FDAD3;
  --eco-color-university-teal-400: #61C5BD;
  --eco-color-university-teal-500: #26A49D;
  --eco-color-university-teal-600: #008982;
  --eco-color-university-teal-700: #00746E;
  --eco-color-university-teal-800: #035C58;
  --eco-color-university-teal-900: #034440;
  --eco-color-university-teal-950: #01302D;

  /* Junior moviy — junior */
  --eco-color-junior-cyan-25: #F4FEFF;
  --eco-color-junior-cyan-50: #E4FCFF;
  --eco-color-junior-cyan-100: #BEF9FF;
  --eco-color-junior-cyan-200: #5AF2FF;
  --eco-color-junior-cyan-300: #00E0EF;
  --eco-color-junior-cyan-400: #00CDDA;
  --eco-color-junior-cyan-500: #00B0BD;
  --eco-color-junior-cyan-600: #0093A0;
  --eco-color-junior-cyan-700: #007884;
  --eco-color-junior-cyan-800: #005D6A;
  --eco-color-junior-cyan-900: #004450;
  --eco-color-junior-cyan-950: #00323B;

  /* Neytral · Black — umumiy */
  --eco-color-neutral-25: #FBFBFB;
  --eco-color-neutral-50: #F7F7F7;
  --eco-color-neutral-100: #F0F0F0;
  --eco-color-neutral-200: #E1E1E1;
  --eco-color-neutral-300: #C7C7C7;
  --eco-color-neutral-400: #9E9E9E;
  --eco-color-neutral-500: #767676;
  --eco-color-neutral-600: #5B5B5B;
  --eco-color-neutral-700: #424242;
  --eco-color-neutral-800: #2E2E2E;
  --eco-color-neutral-900: #222222;
  --eco-color-neutral-950: #141414;

  /* Xato · Error — umumiy */
  --eco-color-error-25: #FEF9F8;
  --eco-color-error-50: #FFF2F0;
  --eco-color-error-100: #FEE2E0;
  --eco-color-error-200: #FFC8C3;
  --eco-color-error-300: #FFA09A;
  --eco-color-error-400: #FE726E;
  --eco-color-error-500: #F0484B;
  --eco-color-error-600: #CC3339;
  --eco-color-error-700: #AA1E27;
  --eco-color-error-800: #8A0316;
  --eco-color-error-900: #6A010E;
  --eco-color-error-950: #4B0107;

  /* Ogohlantirish · Warning — umumiy */
  --eco-color-warning-25: #FEFBF7;
  --eco-color-warning-50: #FFF5E9;
  --eco-color-warning-100: #FEEBD3;
  --eco-color-warning-200: #FFDBAA;
  --eco-color-warning-300: #FEC675;
  --eco-color-warning-400: #FFB020;
  --eco-color-warning-500: #DB9404;
  --eco-color-warning-600: #B37902;
  --eco-color-warning-700: #8D5E01;
  --eco-color-warning-800: #6C4701;
  --eco-color-warning-900: #543600;
  --eco-color-warning-950: #392401;

  /* Muvaffaqiyat · Success — umumiy */
  --eco-color-success-25: #F6FEF9;
  --eco-color-success-50: #ECFDF3;
  --eco-color-success-100: #DCFAE6;
  --eco-color-success-200: #ABEFC6;
  --eco-color-success-300: #75E0A7;
  --eco-color-success-400: #47CD89;
  --eco-color-success-500: #17B26A;
  --eco-color-success-600: #079455;
  --eco-color-success-700: #067647;
  --eco-color-success-800: #085D3A;
  --eco-color-success-900: #074D31;
  --eco-color-success-950: #053321;

  /* Matn shkalasi — Untitled UI: font-size, --line-height, --letter-spacing */
  --eco-text-xs: 12px;
  --eco-text-xs--line-height: 18px;
  --eco-text-sm: 14px;
  --eco-text-sm--line-height: 20px;
  --eco-text-md: 16px;
  --eco-text-md--line-height: 24px;
  --eco-text-lg: 18px;
  --eco-text-lg--line-height: 28px;
  --eco-text-xl: 20px;
  --eco-text-xl--line-height: 30px;
  --eco-text-display-xs: 24px;
  --eco-text-display-xs--line-height: 32px;
  --eco-text-display-sm: 30px;
  --eco-text-display-sm--line-height: 38px;
  --eco-text-display-md: 36px;
  --eco-text-display-md--line-height: 44px;
  --eco-text-display-md--letter-spacing: -0.72px;
  --eco-text-display-lg: 48px;
  --eco-text-display-lg--line-height: 60px;
  --eco-text-display-lg--letter-spacing: -0.96px;
  --eco-text-display-xl: 60px;
  --eco-text-display-xl--line-height: 72px;
  --eco-text-display-xl--letter-spacing: -1.2px;
  --eco-text-display-2xl: 72px;
  --eco-text-display-2xl--line-height: 90px;
  --eco-text-display-2xl--letter-spacing: -1.44px;

  /* Oraliqlar — Untitled UI spacing */
  --eco-spacing-none: 0;
  --eco-spacing-xxs: 2px;
  --eco-spacing-xs: 4px;
  --eco-spacing-sm: 6px;
  --eco-spacing-md: 8px;
  --eco-spacing-lg: 12px;
  --eco-spacing-xl: 16px;
  --eco-spacing-2xl: 20px;
  --eco-spacing-3xl: 24px;
  --eco-spacing-4xl: 32px;
  --eco-spacing-5xl: 40px;
  --eco-spacing-6xl: 48px;
  --eco-spacing-7xl: 64px;
  --eco-spacing-8xl: 80px;
  --eco-spacing-9xl: 96px;
  --eco-spacing-10xl: 128px;
  --eco-spacing-11xl: 160px;

  /* Burchaklar — Untitled UI radius */
  --eco-radius-none: 0;
  --eco-radius-xxs: 2px;
  --eco-radius-xs: 4px;
  --eco-radius-sm: 6px;
  --eco-radius-md: 8px;
  --eco-radius-lg: 10px;
  --eco-radius-xl: 12px;
  --eco-radius-2xl: 16px;
  --eco-radius-3xl: 20px;
  --eco-radius-4xl: 24px;
  --eco-radius-full: 9999px;
  --eco-max-width-container: 1280px;

  /* Ikonka va harakat */
  --eco-icon-sm: 16px;
  --eco-icon-md: 20px;
  --eco-icon-lg: 24px;
  --eco-duration-fast: 120ms;
  --eco-duration-base: 200ms;
  --eco-duration-slow: 360ms;
  --eco-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --eco-ease-emphasized: cubic-bezier(.2, .7, .2, 1);
  --eco-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Bosma hujjatlar — A4, pt shkala (brend qismi: --eco-print-font, -title-weight, -rule-fill — brend blokida) */
  --eco-print-page-width: 210mm;
  --eco-print-page-height: 297mm;
  --eco-print-margin-top: 30mm;
  --eco-print-margin-bottom: 17mm;
  --eco-print-margin-x: 17mm;
  --eco-print-header-top: 5.3mm;
  --eco-print-footer-bottom: 5mm;
  --eco-print-body-size: 10pt;
  --eco-print-body-leading: 1.5;
  --eco-print-body-weight: 400;
  --eco-print-strong-weight: 700;
  --eco-print-section-weight: 700;
  --eco-print-caps-weight: 700;
  --eco-print-first-col-weight: 600;
  --eco-print-card-size: 9.5pt;
  --eco-print-card-leading: 1.42;
  --eco-print-table-size: 9pt;
  --eco-print-table-leading: 1.42;
  --eco-print-meta-size: 9pt;
  --eco-print-meta-weight: 500;
  --eco-print-label-size: 7.5pt;
  --eco-print-th-size: 7pt;
  --eco-print-caps-tracking: .12em;
  --eco-print-head-size: 7pt;
  --eco-print-head-mark: 12px;
  --eco-print-notice-size: 6.5pt;
  --eco-print-title-sop: 25pt;
  --eco-print-title-sop-tracking: -.035em;
  --eco-print-title-card: 22pt;
  --eco-print-section-title: 15pt;
  --eco-print-section-tracking: -.03em;
  --eco-print-num-size: 12pt;
  --eco-print-num-tile: 9mm;
  --eco-print-num-radius: 2.2mm;
  --eco-print-rule-height: 4px;
  --eco-print-th-rule: 1.5px;
  --eco-print-row-height: 18pt;
  --eco-print-panel-title: 13pt;
  --eco-print-step-title: 11pt;
  --eco-print-icon-tile: 7.4mm;
  --eco-print-icon: 4.4mm;
  --eco-print-step-rise: 10mm;
  --eco-print-step-base: 52mm;
  --eco-print-sign-row: 13mm;

  /* Semantik — qorong‘i rejim, umumiy qism (brend kalitlari — pastda, [data-brand] bloklarida) */
  --eco-text-primary: var(--eco-color-neutral-50);
  --eco-text-secondary: var(--eco-color-neutral-200);
  --eco-text-secondary_hover: var(--eco-color-neutral-100);
  --eco-text-tertiary: var(--eco-color-neutral-400);
  --eco-text-tertiary_hover: var(--eco-color-neutral-300);
  --eco-text-quaternary: var(--eco-color-neutral-400);
  --eco-text-placeholder: var(--eco-color-neutral-400);
  --eco-text-disabled: var(--eco-color-neutral-600);
  --eco-text-white: var(--eco-color-white);
  --eco-text-error-primary: var(--eco-color-error-400);
  --eco-text-error-primary_hover: var(--eco-color-error-300);
  --eco-text-warning-primary: #FFCC19;

  --eco-border-primary: var(--eco-color-neutral-500);
  --eco-border-secondary: rgba(245, 245, 245, .26);
  --eco-border-tertiary: rgba(245, 245, 245, .14);
  --eco-border-disabled: var(--eco-color-neutral-700);
  --eco-border-error: var(--eco-color-error-400);
  --eco-border-error_subtle: var(--eco-color-error-500);

  --eco-fg-primary: var(--eco-color-neutral-50);
  --eco-fg-secondary: var(--eco-color-neutral-200);
  --eco-fg-tertiary: var(--eco-color-neutral-400);
  --eco-fg-quaternary: var(--eco-color-neutral-500);
  --eco-fg-quaternary_hover: var(--eco-color-neutral-400);
  --eco-fg-white: var(--eco-color-white);
  --eco-fg-disabled: var(--eco-color-neutral-600);
  --eco-fg-error-primary: var(--eco-color-error-400);
  --eco-fg-error-secondary: var(--eco-color-error-500);
  --eco-fg-warning-primary: #FFCC19;
  --eco-fg-info-primary: #5B92FF;

  --eco-bg-primary: var(--eco-color-black);
  --eco-bg-primary_alt: var(--eco-color-neutral-800);
  --eco-bg-primary_hover: var(--eco-color-neutral-900);
  --eco-bg-primary-solid: var(--eco-color-neutral-700);
  --eco-bg-secondary: var(--eco-color-neutral-900);
  --eco-bg-secondary_hover: var(--eco-color-neutral-800);
  --eco-bg-tertiary: var(--eco-color-neutral-800);
  --eco-bg-quaternary: var(--eco-color-neutral-700);
  --eco-bg-active: var(--eco-color-neutral-800);
  --eco-bg-disabled: var(--eco-color-neutral-800);
  --eco-bg-overlay: rgba(0, 0, 0, .64);
  --eco-bg-error-primary: rgba(240, 72, 75, .16);
  --eco-bg-error-secondary: rgba(240, 72, 75, .26);
  --eco-bg-error-solid: var(--eco-color-error-600);
  --eco-bg-error-solid_hover: var(--eco-color-error-700);
  --eco-bg-warning-primary: rgba(255, 176, 32, .16);
  --eco-bg-warning-solid: var(--eco-color-warning-400);

  --eco-focus-ring-error: var(--eco-color-error-400);

  --eco-chart-div-1: var(--eco-color-error-600);
  --eco-chart-div-2: var(--eco-color-error-400);
  --eco-chart-div-3: var(--eco-color-neutral-800);

  --eco-project-academy: var(--eco-color-malachite);
  --eco-project-school: #3777FF;
  --eco-project-junior: #00E0EF;
  --eco-project-university: #26A49D;
  --eco-project-online: #FFCC19;

  --eco-cat-black: var(--eco-text-primary);
  --eco-cat-green: #39AB37;
  --eco-cat-blue: var(--eco-color-green-400);
  --eco-cat-teal: var(--eco-color-neutral-300);
  --eco-cat-red: var(--eco-color-lime);

  --eco-board-1: var(--eco-color-malachite-button);
  --eco-board-2: var(--eco-color-neutral-100);
  --eco-board-3: var(--eco-color-neutral-400);
  --eco-board-4: var(--eco-color-green-300);
  --eco-board-5: var(--eco-color-green-700);
  --eco-board-6: var(--eco-color-lime);
  --eco-board-ink-1: var(--eco-color-white);
  --eco-board-ink-2: var(--eco-color-black);
  --eco-board-ink-3: var(--eco-color-black);
  --eco-board-ink-4: var(--eco-color-black);
  --eco-board-ink-5: var(--eco-color-white);
  --eco-board-ink-6: var(--eco-color-black);

  --eco-aurora-1: #7B07FF;
  --eco-aurora-2: #308AFF;
  --eco-aurora-2-deep: #0617FF;
  --eco-aurora-3: #FFCD07;
  --eco-aurora-4: #FF07EE;
  --eco-aurora-ring: #FF282B;
  --eco-aurora-line: #293054;

  --eco-rainbow-1: #FF4242;
  --eco-rainbow-2: #FF8A3D;
  --eco-rainbow-3: #FFCC19;
  --eco-rainbow-4: #00B533;
  --eco-rainbow-5: #A0FF42;
  --eco-rainbow-c2: #A142FE;
  --eco-rainbow-c3: #40A1FF;
  --eco-rainbow-c4: #43D0FF;

  --eco-glass-fill: color-mix(in srgb, var(--eco-color-black) 20%, transparent);
  --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-black) 32%, transparent);
  --eco-glass-backdrop: blur(3px) brightness(1.25);
  --eco-glass-rim: linear-gradient(135deg, color-mix(in srgb, var(--eco-color-white) 60%, transparent), color-mix(in srgb, var(--eco-color-white) 10%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-white) 8%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 32%, transparent));
  --eco-glass-ink: var(--eco-color-white);
  --eco-glass-solid: var(--eco-color-black);

  --eco-illo-ground: var(--eco-color-neutral-900);
  --eco-illo-base: var(--eco-color-neutral-800);
  --eco-illo-shade: var(--eco-color-neutral-600);
  --eco-illo-ink: var(--eco-color-neutral-100);
  --eco-illo-accent: var(--eco-brand-accent);
  --eco-illo-on-accent: var(--eco-color-white);
  --eco-illo-on-ink: var(--eco-color-neutral-900);
  --eco-illo-spark: var(--eco-brand-button);
  --eco-illo-alert: var(--eco-color-error-400);
  --eco-illo-base-on-grey: var(--eco-color-neutral-700);
  --eco-illo-shade-on-grey: var(--eco-color-neutral-500);
  --eco-illo-ground-on-grey: var(--eco-color-black);

  --eco-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --eco-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --eco-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.24);
  --eco-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.32), 0 4px 6px -2px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.16);
  --eco-shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.32), 0 8px 8px -4px rgba(0, 0, 0, 0.12), 0 3px 3px -1.5px rgba(0, 0, 0, 0.16);
  --eco-shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.72), 0 4px 4px -2px rgba(0, 0, 0, 0.16);
  --eco-shadow-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.56), 0 5px 5px -2.5px rgba(0, 0, 0, 0.16);
  --eco-shadow-xs-skeuomorphic: inset 0 0 0 1px rgba(0, 0, 0, 0.72), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);

  --eco-chart-2: var(--eco-color-neutral-100);
  --eco-chart-3: var(--eco-color-malachite);
  --eco-chart-4: var(--eco-color-neutral-500);
  --eco-chart-5: var(--eco-color-neutral-300);
  --eco-chart-6: var(--eco-color-neutral-700);
}
[data-theme="dark"] {
  --eco-text-primary: var(--eco-color-neutral-50);
  --eco-text-secondary: var(--eco-color-neutral-200);
  --eco-text-secondary_hover: var(--eco-color-neutral-100);
  --eco-text-tertiary: var(--eco-color-neutral-400);
  --eco-text-tertiary_hover: var(--eco-color-neutral-300);
  --eco-text-quaternary: var(--eco-color-neutral-400);
  --eco-text-placeholder: var(--eco-color-neutral-400);
  --eco-text-disabled: var(--eco-color-neutral-600);
  --eco-text-white: var(--eco-color-white);
  --eco-text-error-primary: var(--eco-color-error-400);
  --eco-text-error-primary_hover: var(--eco-color-error-300);
  --eco-text-warning-primary: #FFCC19;

  --eco-border-primary: var(--eco-color-neutral-500);
  --eco-border-secondary: rgba(245, 245, 245, .26);
  --eco-border-tertiary: rgba(245, 245, 245, .14);
  --eco-border-disabled: var(--eco-color-neutral-700);
  --eco-border-error: var(--eco-color-error-400);
  --eco-border-error_subtle: var(--eco-color-error-500);

  --eco-fg-primary: var(--eco-color-neutral-50);
  --eco-fg-secondary: var(--eco-color-neutral-200);
  --eco-fg-tertiary: var(--eco-color-neutral-400);
  --eco-fg-quaternary: var(--eco-color-neutral-500);
  --eco-fg-quaternary_hover: var(--eco-color-neutral-400);
  --eco-fg-white: var(--eco-color-white);
  --eco-fg-disabled: var(--eco-color-neutral-600);
  --eco-fg-error-primary: var(--eco-color-error-400);
  --eco-fg-error-secondary: var(--eco-color-error-500);
  --eco-fg-warning-primary: #FFCC19;
  --eco-fg-info-primary: #5B92FF;

  --eco-bg-primary: var(--eco-color-black);
  --eco-bg-primary_alt: var(--eco-color-neutral-800);
  --eco-bg-primary_hover: var(--eco-color-neutral-900);
  --eco-bg-primary-solid: var(--eco-color-neutral-700);
  --eco-bg-secondary: var(--eco-color-neutral-900);
  --eco-bg-secondary_hover: var(--eco-color-neutral-800);
  --eco-bg-tertiary: var(--eco-color-neutral-800);
  --eco-bg-quaternary: var(--eco-color-neutral-700);
  --eco-bg-active: var(--eco-color-neutral-800);
  --eco-bg-disabled: var(--eco-color-neutral-800);
  --eco-bg-overlay: rgba(0, 0, 0, .64);
  --eco-bg-error-primary: rgba(240, 72, 75, .16);
  --eco-bg-error-secondary: rgba(240, 72, 75, .26);
  --eco-bg-error-solid: var(--eco-color-error-600);
  --eco-bg-error-solid_hover: var(--eco-color-error-700);
  --eco-bg-warning-primary: rgba(255, 176, 32, .16);
  --eco-bg-warning-solid: var(--eco-color-warning-400);

  --eco-focus-ring-error: var(--eco-color-error-400);

  --eco-chart-div-1: var(--eco-color-error-600);
  --eco-chart-div-2: var(--eco-color-error-400);
  --eco-chart-div-3: var(--eco-color-neutral-800);

  --eco-project-academy: var(--eco-color-malachite);
  --eco-project-school: #3777FF;
  --eco-project-junior: #00E0EF;
  --eco-project-university: #26A49D;
  --eco-project-online: #FFCC19;

  --eco-cat-black: var(--eco-text-primary);
  --eco-cat-green: #39AB37;
  --eco-cat-blue: var(--eco-color-green-400);
  --eco-cat-teal: var(--eco-color-neutral-300);
  --eco-cat-red: var(--eco-color-lime);

  --eco-board-1: var(--eco-color-malachite-button);
  --eco-board-2: var(--eco-color-neutral-100);
  --eco-board-3: var(--eco-color-neutral-400);
  --eco-board-4: var(--eco-color-green-300);
  --eco-board-5: var(--eco-color-green-700);
  --eco-board-6: var(--eco-color-lime);
  --eco-board-ink-1: var(--eco-color-white);
  --eco-board-ink-2: var(--eco-color-black);
  --eco-board-ink-3: var(--eco-color-black);
  --eco-board-ink-4: var(--eco-color-black);
  --eco-board-ink-5: var(--eco-color-white);
  --eco-board-ink-6: var(--eco-color-black);

  --eco-aurora-1: #7B07FF;
  --eco-aurora-2: #308AFF;
  --eco-aurora-2-deep: #0617FF;
  --eco-aurora-3: #FFCD07;
  --eco-aurora-4: #FF07EE;
  --eco-aurora-ring: #FF282B;
  --eco-aurora-line: #293054;

  --eco-rainbow-1: #FF4242;
  --eco-rainbow-2: #FF8A3D;
  --eco-rainbow-3: #FFCC19;
  --eco-rainbow-4: #00B533;
  --eco-rainbow-5: #A0FF42;
  --eco-rainbow-c2: #A142FE;
  --eco-rainbow-c3: #40A1FF;
  --eco-rainbow-c4: #43D0FF;

  --eco-glass-fill: color-mix(in srgb, var(--eco-color-black) 20%, transparent);
  --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-black) 32%, transparent);
  --eco-glass-backdrop: blur(3px) brightness(1.25);
  --eco-glass-rim: linear-gradient(135deg, color-mix(in srgb, var(--eco-color-white) 60%, transparent), color-mix(in srgb, var(--eco-color-white) 10%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-white) 8%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 32%, transparent));
  --eco-glass-ink: var(--eco-color-white);
  --eco-glass-solid: var(--eco-color-black);

  --eco-illo-ground: var(--eco-color-neutral-900);
  --eco-illo-base: var(--eco-color-neutral-800);
  --eco-illo-shade: var(--eco-color-neutral-600);
  --eco-illo-ink: var(--eco-color-neutral-100);
  --eco-illo-accent: var(--eco-brand-accent);
  --eco-illo-on-accent: var(--eco-color-white);
  --eco-illo-on-ink: var(--eco-color-neutral-900);
  --eco-illo-spark: var(--eco-brand-button);
  --eco-illo-alert: var(--eco-color-error-400);
  --eco-illo-base-on-grey: var(--eco-color-neutral-700);
  --eco-illo-shade-on-grey: var(--eco-color-neutral-500);
  --eco-illo-ground-on-grey: var(--eco-color-black);

  --eco-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --eco-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --eco-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.24);
  --eco-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.32), 0 4px 6px -2px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.16);
  --eco-shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.32), 0 8px 8px -4px rgba(0, 0, 0, 0.12), 0 3px 3px -1.5px rgba(0, 0, 0, 0.16);
  --eco-shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.72), 0 4px 4px -2px rgba(0, 0, 0, 0.16);
  --eco-shadow-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.56), 0 5px 5px -2.5px rgba(0, 0, 0, 0.16);
  --eco-shadow-xs-skeuomorphic: inset 0 0 0 1px rgba(0, 0, 0, 0.72), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);

  --eco-chart-2: var(--eco-color-neutral-100);
  --eco-chart-3: var(--eco-color-malachite);
  --eco-chart-4: var(--eco-color-neutral-500);
  --eco-chart-5: var(--eco-color-neutral-300);
  --eco-chart-6: var(--eco-color-neutral-700);
}
[data-theme="light"] {
  --eco-text-primary: var(--eco-color-black);
  --eco-text-secondary: var(--eco-color-neutral-700);
  --eco-text-secondary_hover: var(--eco-color-neutral-800);
  --eco-text-tertiary: var(--eco-color-neutral-600);
  --eco-text-tertiary_hover: var(--eco-color-neutral-700);
  --eco-text-quaternary: var(--eco-color-neutral-500);
  --eco-text-placeholder: var(--eco-color-neutral-500);
  --eco-text-disabled: var(--eco-color-neutral-500);
  --eco-text-white: var(--eco-color-white);
  --eco-text-error-primary: var(--eco-color-error-600);
  --eco-text-error-primary_hover: var(--eco-color-error-700);
  --eco-text-warning-primary: #D39F31;

  --eco-border-primary: var(--eco-color-neutral-500);
  --eco-border-secondary: rgba(20, 20, 20, .26);
  --eco-border-tertiary: rgba(20, 20, 20, .14);
  --eco-border-disabled: var(--eco-color-neutral-300);
  --eco-border-error: var(--eco-color-error-600);
  --eco-border-error_subtle: var(--eco-color-error-500);

  --eco-fg-primary: var(--eco-color-black);
  --eco-fg-secondary: var(--eco-color-neutral-700);
  --eco-fg-tertiary: var(--eco-color-neutral-600);
  --eco-fg-quaternary: var(--eco-color-neutral-500);
  --eco-fg-quaternary_hover: var(--eco-color-neutral-600);
  --eco-fg-white: var(--eco-color-white);
  --eco-fg-disabled: var(--eco-color-neutral-400);
  --eco-fg-error-primary: var(--eco-color-error-600);
  --eco-fg-error-secondary: var(--eco-color-error-500);
  --eco-fg-warning-primary: #D39F31;
  --eco-fg-info-primary: #0055FF;

  --eco-bg-primary: var(--eco-color-white);
  --eco-bg-primary_alt: var(--eco-color-white);
  --eco-bg-primary_hover: var(--eco-color-surface-active);
  --eco-bg-primary-solid: var(--eco-color-black);
  --eco-bg-secondary: var(--eco-color-surface);
  --eco-bg-secondary_hover: var(--eco-color-surface-hover);
  --eco-bg-tertiary: var(--eco-color-surface-tertiary);
  --eco-bg-quaternary: var(--eco-color-neutral-300);
  --eco-bg-active: var(--eco-color-surface-active);
  --eco-bg-disabled: var(--eco-color-surface);
  --eco-bg-overlay: rgba(20, 20, 20, .48);
  --eco-bg-error-primary: var(--eco-color-error-50);
  --eco-bg-error-secondary: var(--eco-color-error-100);
  --eco-bg-error-solid: var(--eco-color-error-600);
  --eco-bg-error-solid_hover: var(--eco-color-error-700);
  --eco-bg-warning-primary: var(--eco-color-warning-50);
  --eco-bg-warning-solid: var(--eco-color-warning-400);

  --eco-focus-ring-error: var(--eco-color-error-600);

  --eco-chart-div-1: var(--eco-color-error-700);
  --eco-chart-div-2: var(--eco-color-error-400);
  --eco-chart-div-3: var(--eco-color-surface);

  --eco-project-academy: var(--eco-color-green-600);
  --eco-project-school: #0019FF;
  --eco-project-junior: #00E0EF;
  --eco-project-university: #26A49D;
  --eco-project-online: #FFCC19;

  --eco-cat-black: var(--eco-text-primary);
  --eco-cat-green: #00A603;
  --eco-cat-blue: var(--eco-color-green-950);
  --eco-cat-teal: var(--eco-color-neutral-500);
  --eco-cat-red: var(--eco-color-lime-800);

  --eco-board-1: var(--eco-color-malachite-button);
  --eco-board-2: var(--eco-color-neutral-900);
  --eco-board-3: var(--eco-color-neutral-400);
  --eco-board-4: var(--eco-color-green-300);
  --eco-board-5: var(--eco-color-green-800);
  --eco-board-6: var(--eco-color-lime);
  --eco-board-ink-1: var(--eco-color-white);
  --eco-board-ink-2: var(--eco-color-white);
  --eco-board-ink-3: var(--eco-color-black);
  --eco-board-ink-4: var(--eco-color-black);
  --eco-board-ink-5: var(--eco-color-white);
  --eco-board-ink-6: var(--eco-color-black);

  --eco-aurora-1: #7B07FF;
  --eco-aurora-2: #308AFF;
  --eco-aurora-2-deep: #0617FF;
  --eco-aurora-3: #FFCD07;
  --eco-aurora-4: #FF07EE;
  --eco-aurora-ring: #FF282B;
  --eco-aurora-line: #293054;

  --eco-rainbow-1: #FF4242;
  --eco-rainbow-2: #FF8A3D;
  --eco-rainbow-3: #FFCC19;
  --eco-rainbow-4: #00B533;
  --eco-rainbow-5: #A0FF42;
  --eco-rainbow-c2: #A142FE;
  --eco-rainbow-c3: #40A1FF;
  --eco-rainbow-c4: #43D0FF;

  --eco-glass-fill: color-mix(in srgb, var(--eco-color-white) 40%, transparent);
  --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-white) 58%, transparent);
  --eco-glass-backdrop: blur(3px) brightness(1.06);
  --eco-glass-rim: linear-gradient(135deg, var(--eco-color-white), color-mix(in srgb, var(--eco-color-white) 50%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-black) 5%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 80%, transparent));
  --eco-glass-ink: var(--eco-color-black);
  --eco-glass-solid: color-mix(in srgb, var(--eco-color-white) 86%, transparent);

  --eco-illo-ground: var(--eco-color-neutral-100);
  --eco-illo-base: var(--eco-color-surface-tertiary);
  --eco-illo-shade: var(--eco-color-neutral-300);
  --eco-illo-ink: var(--eco-color-neutral-900);
  --eco-illo-accent: var(--eco-brand-button);
  --eco-illo-on-accent: var(--eco-color-white);
  --eco-illo-on-ink: var(--eco-color-white);
  --eco-illo-spark: var(--eco-brand-button);
  --eco-illo-alert: var(--eco-color-error-600);
  --eco-illo-base-on-grey: var(--eco-color-white);
  --eco-illo-shade-on-grey: var(--eco-color-neutral-300);
  --eco-illo-ground-on-grey: var(--eco-color-surface-tertiary);

  --eco-shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.05);
  --eco-shadow-sm: 0 1px 3px rgba(20, 20, 20, 0.1), 0 1px 2px -1px rgba(20, 20, 20, 0.1);
  --eco-shadow-md: 0 4px 6px -1px rgba(20, 20, 20, 0.1), 0 2px 4px -2px rgba(20, 20, 20, 0.06);
  --eco-shadow-lg: 0 12px 16px -4px rgba(20, 20, 20, 0.08), 0 4px 6px -2px rgba(20, 20, 20, 0.03), 0 2px 2px -1px rgba(20, 20, 20, 0.04);
  --eco-shadow-xl: 0 20px 24px -4px rgba(20, 20, 20, 0.08), 0 8px 8px -4px rgba(20, 20, 20, 0.03), 0 3px 3px -1.5px rgba(20, 20, 20, 0.04);
  --eco-shadow-2xl: 0 24px 48px -12px rgba(20, 20, 20, 0.18), 0 4px 4px -2px rgba(20, 20, 20, 0.04);
  --eco-shadow-3xl: 0 32px 64px -12px rgba(20, 20, 20, 0.14), 0 5px 5px -2.5px rgba(20, 20, 20, 0.04);
  --eco-shadow-xs-skeuomorphic: inset 0 0 0 1px rgba(20, 20, 20, 0.18), inset 0 -2px 0 0 rgba(20, 20, 20, 0.05), 0 1px 2px rgba(20, 20, 20, 0.05);

  --eco-chart-2: var(--eco-color-neutral-900);
  --eco-chart-3: var(--eco-color-lime-light);
  --eco-chart-4: var(--eco-color-neutral-500);
  --eco-chart-5: var(--eco-color-neutral-300);
  --eco-chart-6: var(--eco-color-brand-tint);
}
.eco-glass--dark {
  --eco-glass-fill: color-mix(in srgb, var(--eco-color-black) 20%, transparent);
  --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-black) 32%, transparent);
  --eco-glass-backdrop: blur(3px) brightness(1.25);
  --eco-glass-rim: linear-gradient(135deg, color-mix(in srgb, var(--eco-color-white) 60%, transparent), color-mix(in srgb, var(--eco-color-white) 10%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-white) 8%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 32%, transparent));
  --eco-glass-ink: var(--eco-color-white);
  --eco-glass-solid: var(--eco-color-black);
}
.eco-glass--light {
  --eco-glass-fill: color-mix(in srgb, var(--eco-color-white) 40%, transparent);
  --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-white) 58%, transparent);
  --eco-glass-backdrop: blur(3px) brightness(1.06);
  --eco-glass-rim: linear-gradient(135deg, var(--eco-color-white), color-mix(in srgb, var(--eco-color-white) 50%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-black) 5%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 80%, transparent));
  --eco-glass-ink: var(--eco-color-black);
  --eco-glass-solid: color-mix(in srgb, var(--eco-color-white) 86%, transparent);
}

/* ===== PDP EcoSystem ===== */
:root[data-brand="ecosystem"] {
  --eco-gradient-stop-1: #F2FFC7;
  --eco-gradient-stop-2: var(--eco-color-lime);
  --eco-gradient-stop-3: var(--eco-color-malachite);
  --eco-gradient-stop-4: var(--eco-color-green-950);
  --eco-gradient: linear-gradient(90deg, var(--eco-gradient-stop-1) 0%, var(--eco-gradient-stop-2) 22%, var(--eco-gradient-stop-3) 58%, var(--eco-gradient-stop-4) 100%);
  --eco-color-surface: #F5F5F5;
  --eco-color-brand-tint: #E9FED8;
  --eco-color-surface-active: #F7F7F7;
  --eco-color-surface-hover: #E6E6E6;
  --eco-color-surface-tertiary: #E6E6E6;
  --eco-color-surface-raised: #ECECEC;
  --eco-color-surface-strong: #DCDCDC;
  --eco-font-display: "PDP Display", "PDP Display Fallback", system-ui, sans-serif;
  --eco-font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --eco-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --eco-font-display--letter-spacing: -0.04em;
  --eco-text-display-xs--letter-spacing: -0.96px;
  --eco-text-display-sm--letter-spacing: -1.2px;
  --eco-text-display-md--letter-spacing: -1.44px;
  --eco-text-display-lg--letter-spacing: -1.92px;
  --eco-text-display-xl--letter-spacing: -2.4px;
  --eco-text-display-2xl--letter-spacing: -2.88px;
  --eco-logo-mark-size: 40px;
  --eco-logo-x: calc(var(--eco-logo-mark-size) / 9);
  --eco-logo-clearspace: var(--eco-logo-x);
  --eco-logo-min-full: 120px;
  --eco-logo-min-mark: 16px;
  --eco-logo-min-badge: 64px;
  --eco-print-font: "Inter", "DejaVu Sans", sans-serif;
  --eco-print-title-weight: 700;
  --eco-print-rule-fill: var(--eco-color-malachite-button);
}
:root[data-brand="ecosystem"], :root[data-brand="ecosystem"] [data-theme="dark"] {
  --eco-brand-primary: var(--eco-color-lime);
  --eco-brand-on-primary: var(--eco-color-black);
  --eco-brand-accent: var(--eco-color-malachite-button);
  --eco-brand-on-accent: var(--eco-color-white);
  --eco-brand-button: var(--eco-color-lime);
  --eco-brand-on-button: var(--eco-color-black);
  --eco-brand-button-accent: var(--eco-color-malachite-button);
  --eco-brand-on-button-accent: var(--eco-color-white);
  --eco-brand-button-ink: var(--eco-color-neutral-50);
  --eco-brand-on-button-ink: var(--eco-color-black);
  --eco-brand-button-secondary-fg: var(--eco-color-green-400);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-green-300);

  --eco-badge-solid-bg: var(--eco-bg-brand-solid);
  --eco-badge-solid-fg: var(--eco-text-primary_on-brand);
  --eco-btn-accent-hover-to: var(--eco-color-black);
  --eco-tab-label: rgba(255, 255, 255, .7);
  --eco-tab-label-strong: var(--eco-color-white);
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-malachite-button);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-lime);
  --eco-tab-accent-fg: #000000;
  --eco-slider-fill: var(--eco-color-malachite-button);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-lime);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-malachite) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-lime);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #39AB37;
  --eco-avatar-ink-blue: #5B92FF;
  --eco-avatar-ink-teal: #61C5BD;
  --eco-avatar-ink-red: #FF604F;
  --eco-avatar-accent-bg: color-mix(in srgb, var(--eco-color-lime) 50%, var(--eco-color-white));
  --eco-avatar-accent-ink: var(--eco-color-malachite-button);
  --eco-avatar-inverse-bg: #1F1F1F;
  --eco-avatar-inverse-ink: var(--eco-color-lime);
  --eco-avatar-solid-bg: var(--eco-color-malachite);
  --eco-avatar-solid-ink: #1D63AE;
  --eco-btn-hover-to: initial;

  --eco-text-primary_on-brand: var(--eco-color-black);
  --eco-text-brand-primary: var(--eco-color-lime);
  --eco-text-brand-secondary: var(--eco-color-lime);
  --eco-text-brand-secondary_hover: var(--eco-color-lime-200);
  --eco-text-brand-tertiary: var(--eco-color-malachite);
  --eco-text-success-primary: var(--eco-color-green-300);

  --eco-border-brand: var(--eco-color-lime);

  --eco-fg-brand-primary: var(--eco-color-lime);
  --eco-fg-brand-primary_alt: var(--eco-color-lime);
  --eco-fg-brand-secondary: var(--eco-color-malachite);
  --eco-fg-success-primary: var(--eco-color-malachite);
  --eco-fg-success-secondary: var(--eco-color-green-400);

  --eco-bg-brand-primary: rgba(189, 255, 0, .10);
  --eco-bg-brand-secondary: rgba(189, 255, 0, .18);
  --eco-bg-brand-solid: var(--eco-color-lime);
  --eco-bg-brand-solid_hover: var(--eco-color-lime-200);
  --eco-bg-success-primary: rgba(0, 197, 8, .16);
  --eco-bg-success-solid: var(--eco-color-malachite-button);

  --eco-focus-ring: var(--eco-color-lime);

  --eco-chart-1: var(--eco-color-lime);
  --eco-chart-seq-1: var(--eco-color-green-900);
  --eco-chart-seq-2: var(--eco-color-green-700);
  --eco-chart-seq-3: var(--eco-color-malachite);
  --eco-chart-seq-4: var(--eco-color-green-300);
  --eco-chart-seq-5: var(--eco-color-lime);
  --eco-chart-div-4: var(--eco-color-green-400);
  --eco-chart-div-5: var(--eco-color-green-700);
}
:root[data-brand="ecosystem"][data-theme="light"], :root[data-brand="ecosystem"] [data-theme="light"] {
  --eco-brand-primary: var(--eco-color-malachite-button);
  --eco-brand-on-primary: var(--eco-color-white);
  --eco-brand-accent: var(--eco-color-lime-light);
  --eco-brand-on-accent: var(--eco-color-black);
  --eco-brand-button: var(--eco-color-malachite-button);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-lime-light);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-black);
  --eco-brand-on-button-ink: var(--eco-color-white);
  --eco-brand-button-secondary-fg: var(--eco-color-green-800);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-green-900);

  --eco-badge-solid-bg: var(--eco-bg-brand-solid);
  --eco-badge-solid-fg: var(--eco-text-primary_on-brand);
  --eco-btn-hover-to: var(--eco-color-black);
  --eco-tab-label: rgba(0, 0, 0, .7);
  --eco-tab-label-strong: #000000;
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-malachite-button);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-lime);
  --eco-tab-accent-fg: #000000;
  --eco-slider-fill: var(--eco-color-malachite-button);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-malachite-button);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-malachite) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-malachite-button);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #00A603;
  --eco-avatar-ink-blue: #0055FF;
  --eco-avatar-ink-teal: #26A49D;
  --eco-avatar-ink-red: #C80000;
  --eco-avatar-accent-bg: color-mix(in srgb, var(--eco-color-lime) 50%, var(--eco-color-white));
  --eco-avatar-accent-ink: var(--eco-color-malachite-button);
  --eco-avatar-inverse-bg: #1F1F1F;
  --eco-avatar-inverse-ink: var(--eco-color-lime);
  --eco-avatar-solid-bg: var(--eco-color-malachite);
  --eco-avatar-solid-ink: #1D63AE;
  --eco-btn-accent-hover-to: initial;

  --eco-text-primary_on-brand: var(--eco-color-white);
  --eco-text-brand-primary: var(--eco-color-green-done);
  --eco-text-brand-secondary: var(--eco-color-green-done);
  --eco-text-brand-secondary_hover: var(--eco-color-green-900);
  --eco-text-brand-tertiary: var(--eco-color-green-done);
  --eco-text-success-primary: var(--eco-color-green-800);

  --eco-border-brand: var(--eco-color-green-700);

  --eco-fg-brand-primary: var(--eco-color-green-700);
  --eco-fg-brand-primary_alt: var(--eco-color-malachite);
  --eco-fg-brand-secondary: var(--eco-color-malachite);
  --eco-fg-success-primary: var(--eco-color-green-700);
  --eco-fg-success-secondary: var(--eco-color-malachite);

  --eco-bg-brand-primary: var(--eco-color-brand-tint);
  --eco-bg-brand-secondary: var(--eco-color-green-100);
  --eco-bg-brand-solid: var(--eco-color-malachite-button);
  --eco-bg-brand-solid_hover: var(--eco-color-green-600);
  --eco-bg-success-primary: var(--eco-color-green-50);
  --eco-bg-success-solid: var(--eco-color-malachite-button);

  --eco-focus-ring: var(--eco-color-green-700);

  --eco-chart-1: var(--eco-color-malachite-button);
  --eco-chart-seq-1: var(--eco-color-lime-100);
  --eco-chart-seq-2: var(--eco-color-lime);
  --eco-chart-seq-3: var(--eco-color-malachite-button);
  --eco-chart-seq-4: var(--eco-color-green-800);
  --eco-chart-seq-5: var(--eco-color-green-950);
  --eco-chart-div-4: var(--eco-color-green-400);
  --eco-chart-div-5: var(--eco-color-green-700);
}

/* ===== PDP Academy ===== */
:root[data-brand="academy"] {
  --eco-gradient-stop-1: #FFF6D6;
  --eco-gradient-stop-2: var(--eco-color-academy-yellow);
  --eco-gradient-stop-3: var(--eco-color-academy-green);
  --eco-gradient-stop-4: #013A12;
  --eco-gradient: linear-gradient(90deg, var(--eco-gradient-stop-1) 0%, var(--eco-gradient-stop-2) 22%, var(--eco-gradient-stop-3) 58%, var(--eco-gradient-stop-4) 100%);
  --eco-color-surface: #F5F5F5;
  --eco-color-brand-tint: #E9FED8;
  --eco-color-surface-active: #F7F7F7;
  --eco-color-surface-hover: #E6E6E6;
  --eco-color-surface-tertiary: #E6E6E6;
  --eco-color-surface-raised: #ECECEC;
  --eco-color-surface-strong: #DCDCDC;
  --eco-font-display: "PDP Display", "PDP Display Fallback", system-ui, sans-serif;
  --eco-font-body: "Google Sans Flex", "Inter", "Inter Fallback", system-ui, sans-serif;
  --eco-font-mono: "Google Sans Code", "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --eco-font-display--letter-spacing: -0.04em;
  --eco-text-display-xs--letter-spacing: -0.96px;
  --eco-text-display-sm--letter-spacing: -1.2px;
  --eco-text-display-md--letter-spacing: -1.44px;
  --eco-text-display-lg--letter-spacing: -1.92px;
  --eco-text-display-xl--letter-spacing: -2.4px;
  --eco-text-display-2xl--letter-spacing: -2.88px;
  --eco-logo-mark-size: 48px;
  --eco-logo-x: calc(var(--eco-logo-mark-size) / 3);
  --eco-logo-clearspace: var(--eco-logo-x);
  --eco-logo-min-full: 96px;
  --eco-logo-min-mark: 16px;
  --eco-logo-min-compact: 64px;
  --eco-logo-min-emblem: 96px;
  --eco-print-font: "Google Sans Flex", "DejaVu Sans", sans-serif;
  --eco-print-title-weight: 700;
  --eco-print-rule-fill: var(--eco-color-academy-green);
}
:root[data-brand="academy"], :root[data-brand="academy"] [data-theme="dark"] {
  --eco-brand-primary: var(--eco-color-academy-yellow);
  --eco-brand-on-primary: var(--eco-color-black);
  --eco-brand-accent: var(--eco-color-academy-green);
  --eco-brand-on-accent: var(--eco-color-white);
  --eco-brand-button: var(--eco-color-academy-green);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-academy-yellow);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-neutral-50);
  --eco-brand-on-button-ink: var(--eco-color-black);
  --eco-brand-button-secondary-fg: var(--eco-color-academy-green-400);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-academy-green-300);

  --eco-badge-solid-bg: var(--eco-color-academy-green);
  --eco-badge-solid-fg: var(--eco-color-white);
  --eco-btn-hover-to: var(--eco-color-black);
  --eco-tab-label: rgba(255, 255, 255, .7);
  --eco-tab-label-strong: var(--eco-color-white);
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-academy-green);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-academy-yellow);
  --eco-tab-accent-fg: #000000;
  --eco-slider-fill: var(--eco-color-academy-green);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-malachite);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-malachite) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-malachite);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #39AB37;
  --eco-avatar-ink-blue: #5B92FF;
  --eco-avatar-ink-teal: #61C5BD;
  --eco-avatar-ink-red: #FF604F;

  --eco-text-primary_on-brand: var(--eco-color-black);
  --eco-text-brand-primary: var(--eco-color-academy-yellow);
  --eco-text-brand-secondary: var(--eco-color-academy-yellow);
  --eco-text-brand-secondary_hover: var(--eco-color-academy-yellow-200);
  --eco-text-brand-tertiary: var(--eco-color-academy-green);
  --eco-text-success-primary: var(--eco-color-academy-green-300);

  --eco-border-brand: var(--eco-color-academy-yellow);

  --eco-fg-brand-primary: var(--eco-color-academy-yellow);
  --eco-fg-brand-primary_alt: var(--eco-color-academy-yellow);
  --eco-fg-brand-secondary: var(--eco-color-academy-green);
  --eco-fg-success-primary: var(--eco-color-academy-green);
  --eco-fg-success-secondary: var(--eco-color-academy-green-400);

  --eco-bg-brand-primary: rgba(255, 204, 25, .10);
  --eco-bg-brand-secondary: rgba(255, 204, 25, .18);
  --eco-bg-brand-solid: var(--eco-color-academy-yellow);
  --eco-bg-brand-solid_hover: var(--eco-color-academy-yellow-200);
  --eco-bg-success-primary: rgba(0, 181, 51, .16);
  --eco-bg-success-solid: var(--eco-color-academy-green);

  --eco-focus-ring: var(--eco-color-academy-yellow);

  --eco-chart-1: var(--eco-color-academy-yellow);
  --eco-chart-seq-1: var(--eco-color-academy-green-900);
  --eco-chart-seq-2: var(--eco-color-academy-green-700);
  --eco-chart-seq-3: var(--eco-color-academy-green);
  --eco-chart-seq-4: var(--eco-color-academy-green-300);
  --eco-chart-seq-5: var(--eco-color-academy-yellow);
  --eco-chart-div-4: var(--eco-color-academy-green-400);
  --eco-chart-div-5: var(--eco-color-academy-green-700);
  --eco-chart-3: var(--eco-color-academy-green);
  --eco-chart-6: var(--eco-color-academy-yellow-700);

  --eco-project-academy: var(--eco-color-academy-green);

  --eco-cat-blue: #5B92FF;
  --eco-cat-teal: #61C5BD;
  --eco-cat-red: #FF604F;

  --eco-board-1: #00B533;
  --eco-board-2: #3777FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
  --eco-board-ink-2: var(--eco-color-white);
}
:root[data-brand="academy"][data-theme="light"], :root[data-brand="academy"] [data-theme="light"] {
  --eco-brand-primary: var(--eco-color-academy-green);
  --eco-brand-on-primary: var(--eco-color-white);
  --eco-brand-accent: var(--eco-color-academy-yellow);
  --eco-brand-on-accent: var(--eco-color-black);
  --eco-brand-button: var(--eco-color-academy-green);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-academy-yellow);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-black);
  --eco-brand-on-button-ink: var(--eco-color-white);
  --eco-brand-button-secondary-fg: var(--eco-color-academy-green-700);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-academy-green-800);

  --eco-badge-solid-bg: var(--eco-color-academy-green);
  --eco-badge-solid-fg: var(--eco-color-white);
  --eco-btn-hover-to: var(--eco-color-black);
  --eco-tab-label: rgba(0, 0, 0, .7);
  --eco-tab-label-strong: #000000;
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-academy-green);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-academy-yellow);
  --eco-tab-accent-fg: #000000;
  --eco-slider-fill: var(--eco-color-academy-green);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-academy-green);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-malachite) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-academy-green);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #00A603;
  --eco-avatar-ink-blue: #0055FF;
  --eco-avatar-ink-teal: #26A49D;
  --eco-avatar-ink-red: #C80000;

  --eco-text-primary_on-brand: var(--eco-color-white);
  --eco-text-brand-primary: var(--eco-color-green-done);
  --eco-text-brand-secondary: var(--eco-color-green-done);
  --eco-text-brand-secondary_hover: var(--eco-color-academy-green-800);
  --eco-text-brand-tertiary: var(--eco-color-green-done);
  --eco-text-success-primary: var(--eco-color-academy-green-800);

  --eco-border-brand: var(--eco-color-academy-green-700);

  --eco-fg-brand-primary: var(--eco-color-academy-green-700);
  --eco-fg-brand-primary_alt: var(--eco-color-academy-green);
  --eco-fg-brand-secondary: var(--eco-color-academy-green);
  --eco-fg-success-primary: var(--eco-color-academy-green-700);
  --eco-fg-success-secondary: var(--eco-color-academy-green);

  --eco-bg-brand-primary: var(--eco-color-brand-tint);
  --eco-bg-brand-secondary: var(--eco-color-academy-green-100);
  --eco-bg-brand-solid: var(--eco-color-academy-green);
  --eco-bg-brand-solid_hover: var(--eco-color-academy-green-600);
  --eco-bg-success-primary: var(--eco-color-academy-green-50);
  --eco-bg-success-solid: var(--eco-color-academy-green);

  --eco-focus-ring: var(--eco-color-academy-green-700);

  --eco-chart-1: var(--eco-color-academy-green);
  --eco-chart-seq-1: var(--eco-color-academy-yellow-100);
  --eco-chart-seq-2: var(--eco-color-academy-yellow);
  --eco-chart-seq-3: var(--eco-color-academy-green);
  --eco-chart-seq-4: var(--eco-color-academy-green-800);
  --eco-chart-seq-5: var(--eco-color-academy-green-950);
  --eco-chart-div-4: var(--eco-color-academy-green-400);
  --eco-chart-div-5: var(--eco-color-academy-green-700);
  --eco-chart-3: var(--eco-color-academy-yellow);
  --eco-chart-6: var(--eco-color-academy-green-200);

  --eco-project-academy: var(--eco-color-academy-green-600);

  --eco-cat-blue: #0055FF;
  --eco-cat-teal: #26A49D;
  --eco-cat-red: #C80000;

  --eco-board-1: #00B533;
  --eco-board-2: #0019FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
}

/* ===== PDP School — taklif ===== */
:root[data-brand="school"] {
  --eco-gradient-stop-1: #1B56DB;
  --eco-gradient-stop-2: #1445C4;
  --eco-gradient-stop-3: #2748B6;
  --eco-gradient: linear-gradient(90deg, var(--eco-gradient-stop-1) 0%, var(--eco-gradient-stop-2) 50%, var(--eco-gradient-stop-3) 100%);
  --eco-color-surface: #F5F5F5;
  --eco-color-brand-tint: #E7EFFE;
  --eco-color-surface-active: #F7F7F7;
  --eco-color-surface-hover: #E6E6E6;
  --eco-color-surface-tertiary: #E6E6E6;
  --eco-color-surface-raised: #ECECEC;
  --eco-color-surface-strong: #DCDCDC;
  --eco-font-display: "Onest", "Onest Fallback", system-ui, sans-serif;
  --eco-font-body: "Onest", "Onest Fallback", system-ui, sans-serif;
  --eco-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --eco-logo-mark-size: 40px;
  --eco-logo-x: calc(var(--eco-logo-mark-size) / 3);
  --eco-logo-clearspace: var(--eco-logo-x);
  --eco-logo-min-full: 96px;
  --eco-logo-min-mark: 24px;
  --eco-logo-min-favicon: 16px;
  --eco-print-font: "Onest", "DejaVu Sans", sans-serif;
  --eco-print-title-weight: 800;
  --eco-print-rule-fill: linear-gradient(90deg, var(--eco-color-school-yellow) 0 31%, var(--eco-color-school-pink) 31% 67%, var(--eco-color-school-blue) 67% 100%);
}
:root[data-brand="school"], :root[data-brand="school"] [data-theme="dark"] {
  --eco-brand-primary: var(--eco-color-school-blue-600);
  --eco-brand-on-primary: var(--eco-color-white);
  --eco-brand-accent: var(--eco-color-school-cyan);
  --eco-brand-on-accent: var(--eco-color-black);
  --eco-brand-button: var(--eco-color-school-blue-600);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-school-cyan);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-neutral-50);
  --eco-brand-on-button-ink: var(--eco-color-black);
  --eco-brand-button-secondary-fg: var(--eco-color-school-cyan);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-school-cyan);

  --eco-badge-solid-bg: var(--eco-bg-brand-solid);
  --eco-badge-solid-fg: var(--eco-text-primary_on-brand);
  --eco-tab-label: rgba(255, 255, 255, .7);
  --eco-tab-label-strong: var(--eco-color-white);
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-school-blue);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-school-blue);
  --eco-tab-accent-fg: var(--eco-color-white);
  --eco-slider-fill: var(--eco-color-school-blue-600);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-school-blue-300);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-school-blue-600) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-school-blue-300);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #39AB37;
  --eco-avatar-ink-blue: #5B92FF;
  --eco-avatar-ink-teal: #61C5BD;
  --eco-avatar-ink-red: #FF604F;

  --eco-text-primary_on-brand: var(--eco-color-white);
  --eco-text-brand-primary: var(--eco-color-school-blue-300);
  --eco-text-brand-secondary: var(--eco-color-school-blue-300);
  --eco-text-brand-secondary_hover: var(--eco-color-school-blue-100);
  --eco-text-brand-tertiary: var(--eco-color-school-blue-300);
  --eco-text-success-primary: var(--eco-color-success-300);

  --eco-border-brand: var(--eco-color-school-blue-300);

  --eco-fg-brand-primary: var(--eco-color-school-blue-300);
  --eco-fg-brand-primary_alt: var(--eco-color-school-blue-300);
  --eco-fg-brand-secondary: var(--eco-color-school-blue-300);
  --eco-fg-success-primary: var(--eco-color-success-500);
  --eco-fg-success-secondary: var(--eco-color-success-400);

  --eco-bg-brand-primary: rgba(0, 85, 255, .1);
  --eco-bg-brand-secondary: rgba(0, 85, 255, .18);
  --eco-bg-brand-solid: var(--eco-color-school-blue-600);
  --eco-bg-brand-solid_hover: var(--eco-color-school-blue);
  --eco-bg-success-primary: rgba(23, 178, 106, .16);
  --eco-bg-success-solid: var(--eco-color-success-500);

  --eco-focus-ring: var(--eco-color-school-blue-300);

  --eco-chart-1: var(--eco-color-school-blue-500);
  --eco-chart-seq-1: var(--eco-color-school-blue-900);
  --eco-chart-seq-2: var(--eco-color-school-blue);
  --eco-chart-seq-3: var(--eco-color-school-blue-500);
  --eco-chart-seq-4: var(--eco-color-school-blue-300);
  --eco-chart-seq-5: var(--eco-color-school-blue-100);
  --eco-chart-div-4: var(--eco-color-school-blue-400);
  --eco-chart-div-5: var(--eco-color-school-blue);
  --eco-chart-3: var(--eco-color-school-pink);
  --eco-chart-4: var(--eco-color-school-yellow);
  --eco-chart-5: var(--eco-color-school-cyan);
  --eco-chart-6: var(--eco-color-neutral-500);

  --eco-cat-blue: #5B92FF;
  --eco-cat-teal: #61C5BD;
  --eco-cat-red: #FF604F;

  --eco-board-1: #00B533;
  --eco-board-2: #3777FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
  --eco-board-ink-2: var(--eco-color-white);
}
:root[data-brand="school"][data-theme="light"], :root[data-brand="school"] [data-theme="light"] {
  --eco-brand-primary: var(--eco-color-school-blue);
  --eco-brand-on-primary: var(--eco-color-white);
  --eco-brand-accent: var(--eco-color-school-cyan);
  --eco-brand-on-accent: var(--eco-color-black);
  --eco-brand-button: var(--eco-color-school-blue);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-school-cyan);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-black);
  --eco-brand-on-button-ink: var(--eco-color-white);
  --eco-brand-button-secondary-fg: var(--eco-color-school-blue);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-school-blue-800);

  --eco-badge-solid-bg: var(--eco-bg-brand-solid);
  --eco-badge-solid-fg: var(--eco-text-primary_on-brand);
  --eco-tab-label: rgba(0, 0, 0, .7);
  --eco-tab-label-strong: #000000;
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-school-blue);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-school-blue);
  --eco-tab-accent-fg: var(--eco-color-white);
  --eco-slider-fill: var(--eco-color-school-blue-600);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-school-blue-600);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-school-blue-600) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-school-blue-600);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #00A603;
  --eco-avatar-ink-blue: #0055FF;
  --eco-avatar-ink-teal: #26A49D;
  --eco-avatar-ink-red: #C80000;

  --eco-text-primary_on-brand: var(--eco-color-white);
  --eco-text-brand-primary: var(--eco-color-school-blue-900);
  --eco-text-brand-secondary: var(--eco-color-school-blue);
  --eco-text-brand-secondary_hover: var(--eco-color-school-blue-800);
  --eco-text-brand-tertiary: var(--eco-color-school-blue-800);
  --eco-text-success-primary: var(--eco-color-success-800);

  --eco-border-brand: var(--eco-color-school-blue);

  --eco-fg-brand-primary: var(--eco-color-school-blue);
  --eco-fg-brand-primary_alt: var(--eco-color-school-blue-600);
  --eco-fg-brand-secondary: var(--eco-color-school-blue-600);
  --eco-fg-success-primary: var(--eco-color-success-700);
  --eco-fg-success-secondary: var(--eco-color-success-500);

  --eco-bg-brand-primary: var(--eco-color-brand-tint);
  --eco-bg-brand-secondary: var(--eco-color-school-blue-100);
  --eco-bg-brand-solid: var(--eco-color-school-blue);
  --eco-bg-brand-solid_hover: var(--eco-color-school-blue-800);
  --eco-bg-success-primary: var(--eco-color-success-50);
  --eco-bg-success-solid: var(--eco-color-success-500);

  --eco-focus-ring: var(--eco-color-school-blue);

  --eco-chart-1: var(--eco-color-school-blue);
  --eco-chart-seq-1: var(--eco-color-school-blue-100);
  --eco-chart-seq-2: var(--eco-color-school-blue-300);
  --eco-chart-seq-3: var(--eco-color-school-blue-500);
  --eco-chart-seq-4: var(--eco-color-school-blue);
  --eco-chart-seq-5: var(--eco-color-school-blue-900);
  --eco-chart-div-4: var(--eco-color-school-blue-400);
  --eco-chart-div-5: var(--eco-color-school-blue);
  --eco-chart-3: var(--eco-color-school-pink);
  --eco-chart-4: var(--eco-color-school-yellow);
  --eco-chart-5: var(--eco-color-school-cyan);
  --eco-chart-6: var(--eco-color-neutral-400);

  --eco-cat-blue: #0055FF;
  --eco-cat-teal: #26A49D;
  --eco-cat-red: #C80000;

  --eco-board-1: #00B533;
  --eco-board-2: #0019FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
}

/* ===== PDP University — taklif ===== */
:root[data-brand="university"] {
  --eco-gradient-stop-1: var(--eco-color-university-teal-50);
  --eco-gradient-stop-2: var(--eco-color-university-yellow);
  --eco-gradient-stop-3: var(--eco-color-university-teal);
  --eco-gradient-stop-4: var(--eco-color-university-teal-900);
  --eco-gradient: linear-gradient(90deg, var(--eco-gradient-stop-1) 0%, var(--eco-gradient-stop-2) 22%, var(--eco-gradient-stop-3) 58%, var(--eco-gradient-stop-4) 100%);
  --eco-color-surface: #F5F5F5;
  --eco-color-brand-tint: #E9F6F5;
  --eco-color-surface-active: #F7F7F7;
  --eco-color-surface-hover: #E6E6E6;
  --eco-color-surface-tertiary: #E6E6E6;
  --eco-color-surface-raised: #ECECEC;
  --eco-color-surface-strong: #DCDCDC;
  --eco-font-display: "PDP Display", "PDP Display Fallback", system-ui, sans-serif;
  --eco-font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --eco-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --eco-font-display--letter-spacing: -0.04em;
  --eco-text-display-xs--letter-spacing: -0.96px;
  --eco-text-display-sm--letter-spacing: -1.2px;
  --eco-text-display-md--letter-spacing: -1.44px;
  --eco-text-display-lg--letter-spacing: -1.92px;
  --eco-text-display-xl--letter-spacing: -2.4px;
  --eco-text-display-2xl--letter-spacing: -2.88px;
  --eco-logo-mark-size: 40px;
  --eco-logo-x: calc(var(--eco-logo-mark-size) / 3);
  --eco-logo-clearspace: var(--eco-logo-x);
  --eco-logo-min-full: 92px;
  --eco-logo-min-mark: 16px;
  --eco-print-font: "Inter", "DejaVu Sans", sans-serif;
  --eco-print-title-weight: 700;
  --eco-print-rule-fill: var(--eco-color-university-teal);
}
:root[data-brand="university"], :root[data-brand="university"] [data-theme="dark"] {
  --eco-brand-primary: var(--eco-color-university-teal);
  --eco-brand-on-primary: var(--eco-color-white);
  --eco-brand-accent: var(--eco-color-university-yellow);
  --eco-brand-on-accent: var(--eco-color-black);
  --eco-brand-button: var(--eco-color-university-teal);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-university-yellow);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-neutral-50);
  --eco-brand-on-button-ink: var(--eco-color-black);
  --eco-brand-button-secondary-fg: var(--eco-text-brand-secondary);
  --eco-brand-button-secondary-fg_hover: var(--eco-text-brand-secondary_hover);

  --eco-badge-solid-bg: var(--eco-bg-brand-solid);
  --eco-badge-solid-fg: var(--eco-text-primary_on-brand);
  --eco-btn-hover-to: var(--eco-color-black);
  --eco-tab-label: rgba(255, 255, 255, .7);
  --eco-tab-label-strong: var(--eco-color-white);
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-university-teal);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-university-teal);
  --eco-tab-accent-fg: var(--eco-color-white);
  --eco-slider-fill: var(--eco-color-university-teal);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-university-teal);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-university-teal) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-university-teal);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #39AB37;
  --eco-avatar-ink-blue: #5B92FF;
  --eco-avatar-ink-teal: #61C5BD;
  --eco-avatar-ink-red: #FF604F;

  --eco-text-primary_on-brand: var(--eco-color-white);
  --eco-text-brand-primary: var(--eco-color-university-teal-300);
  --eco-text-brand-secondary: var(--eco-color-university-teal-300);
  --eco-text-brand-secondary_hover: var(--eco-color-university-teal-200);
  --eco-text-brand-tertiary: var(--eco-color-university-teal-400);
  --eco-text-success-primary: var(--eco-color-success-300);

  --eco-border-brand: var(--eco-color-university-teal-300);

  --eco-fg-brand-primary: var(--eco-color-university-teal-300);
  --eco-fg-brand-primary_alt: var(--eco-color-university-teal-300);
  --eco-fg-brand-secondary: var(--eco-color-university-teal-400);
  --eco-fg-success-primary: var(--eco-color-success-500);
  --eco-fg-success-secondary: var(--eco-color-success-400);

  --eco-bg-brand-primary: rgba(38, 164, 157, .1);
  --eco-bg-brand-secondary: rgba(38, 164, 157, .18);
  --eco-bg-brand-solid: var(--eco-color-university-teal);
  --eco-bg-brand-solid_hover: var(--eco-color-university-teal-600);
  --eco-bg-success-primary: rgba(23, 178, 106, .16);
  --eco-bg-success-solid: var(--eco-color-success-500);

  --eco-focus-ring: var(--eco-color-university-teal-400);

  --eco-chart-1: var(--eco-color-university-teal);
  --eco-chart-seq-1: var(--eco-color-university-teal-900);
  --eco-chart-seq-2: var(--eco-color-university-teal-700);
  --eco-chart-seq-3: var(--eco-color-university-teal);
  --eco-chart-seq-4: var(--eco-color-university-teal-300);
  --eco-chart-seq-5: var(--eco-color-university-teal-100);
  --eco-chart-div-4: var(--eco-color-university-teal-400);
  --eco-chart-div-5: var(--eco-color-university-teal-700);
  --eco-chart-3: var(--eco-color-university-yellow);
  --eco-chart-6: var(--eco-color-university-teal-700);

  --eco-cat-blue: #5B92FF;
  --eco-cat-teal: #61C5BD;
  --eco-cat-red: #FF604F;

  --eco-board-1: #00B533;
  --eco-board-2: #3777FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
  --eco-board-ink-2: var(--eco-color-white);
}
:root[data-brand="university"][data-theme="light"], :root[data-brand="university"] [data-theme="light"] {
  --eco-brand-primary: var(--eco-color-university-teal);
  --eco-brand-on-primary: var(--eco-color-white);
  --eco-brand-accent: var(--eco-color-university-yellow);
  --eco-brand-on-accent: var(--eco-color-black);
  --eco-brand-button: var(--eco-color-university-teal);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-university-yellow);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-black);
  --eco-brand-on-button-ink: var(--eco-color-white);
  --eco-brand-button-secondary-fg: var(--eco-text-brand-secondary);
  --eco-brand-button-secondary-fg_hover: var(--eco-text-brand-secondary_hover);

  --eco-badge-solid-bg: var(--eco-bg-brand-solid);
  --eco-badge-solid-fg: var(--eco-text-primary_on-brand);
  --eco-btn-hover-to: var(--eco-color-black);
  --eco-tab-label: rgba(0, 0, 0, .7);
  --eco-tab-label-strong: #000000;
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-university-teal);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-university-teal);
  --eco-tab-accent-fg: var(--eco-color-white);
  --eco-slider-fill: var(--eco-color-university-teal);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-university-teal);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-university-teal) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-university-teal);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #00A603;
  --eco-avatar-ink-blue: #0055FF;
  --eco-avatar-ink-teal: #26A49D;
  --eco-avatar-ink-red: #C80000;

  --eco-text-primary_on-brand: var(--eco-color-white);
  --eco-text-brand-primary: var(--eco-color-university-teal-900);
  --eco-text-brand-secondary: var(--eco-color-university-teal-700);
  --eco-text-brand-secondary_hover: var(--eco-color-university-teal-800);
  --eco-text-brand-tertiary: var(--eco-color-university-teal-800);
  --eco-text-success-primary: var(--eco-color-success-800);

  --eco-border-brand: var(--eco-color-university-teal-700);

  --eco-fg-brand-primary: var(--eco-color-university-teal-700);
  --eco-fg-brand-primary_alt: var(--eco-color-university-teal);
  --eco-fg-brand-secondary: var(--eco-color-university-teal);
  --eco-fg-success-primary: var(--eco-color-success-700);
  --eco-fg-success-secondary: var(--eco-color-success-500);

  --eco-bg-brand-primary: var(--eco-color-brand-tint);
  --eco-bg-brand-secondary: var(--eco-color-university-teal-100);
  --eco-bg-brand-solid: var(--eco-color-university-teal);
  --eco-bg-brand-solid_hover: var(--eco-color-university-teal-600);
  --eco-bg-success-primary: var(--eco-color-success-50);
  --eco-bg-success-solid: var(--eco-color-success-500);

  --eco-focus-ring: var(--eco-color-university-teal-700);

  --eco-chart-1: var(--eco-color-university-teal-700);
  --eco-chart-seq-1: var(--eco-color-university-teal-100);
  --eco-chart-seq-2: var(--eco-color-university-teal-300);
  --eco-chart-seq-3: var(--eco-color-university-teal);
  --eco-chart-seq-4: var(--eco-color-university-teal-700);
  --eco-chart-seq-5: var(--eco-color-university-teal-900);
  --eco-chart-div-4: var(--eco-color-university-teal-400);
  --eco-chart-div-5: var(--eco-color-university-teal-700);
  --eco-chart-3: var(--eco-color-university-yellow);
  --eco-chart-6: var(--eco-color-university-teal-100);

  --eco-cat-blue: #0055FF;
  --eco-cat-teal: #26A49D;
  --eco-cat-red: #C80000;

  --eco-board-1: #00B533;
  --eco-board-2: #0019FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
}

/* ===== PDP Online — taklif ===== */
:root[data-brand="online"] {
  --eco-gradient-stop-1: #FFF6D6;
  --eco-gradient-stop-2: var(--eco-color-academy-yellow);
  --eco-gradient-stop-3: var(--eco-color-academy-green);
  --eco-gradient-stop-4: #013A12;
  --eco-gradient: linear-gradient(90deg, var(--eco-gradient-stop-1) 0%, var(--eco-gradient-stop-2) 22%, var(--eco-gradient-stop-3) 58%, var(--eco-gradient-stop-4) 100%);
  --eco-color-surface: #F5F5F5;
  --eco-color-brand-tint: #E9FED8;
  --eco-color-surface-active: #F7F7F7;
  --eco-color-surface-hover: #E6E6E6;
  --eco-color-surface-tertiary: #E6E6E6;
  --eco-color-surface-raised: #ECECEC;
  --eco-color-surface-strong: #DCDCDC;
  --eco-font-display: "PDP Display", "PDP Display Fallback", system-ui, sans-serif;
  --eco-font-body: "Google Sans Flex", "Inter", "Inter Fallback", system-ui, sans-serif;
  --eco-font-mono: "Google Sans Code", "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --eco-font-display--letter-spacing: -0.04em;
  --eco-text-display-xs--letter-spacing: -0.96px;
  --eco-text-display-sm--letter-spacing: -1.2px;
  --eco-text-display-md--letter-spacing: -1.44px;
  --eco-text-display-lg--letter-spacing: -1.92px;
  --eco-text-display-xl--letter-spacing: -2.4px;
  --eco-text-display-2xl--letter-spacing: -2.88px;
  --eco-logo-mark-size: 40px;
  --eco-logo-x: calc(var(--eco-logo-mark-size) / 3);
  --eco-logo-clearspace: var(--eco-logo-x);
  --eco-logo-min-full: 64px;
  --eco-logo-min-mark: 24px;
  --eco-print-font: "Google Sans Flex", "DejaVu Sans", sans-serif;
  --eco-print-title-weight: 700;
  --eco-print-rule-fill: var(--eco-color-academy-green);
}
:root[data-brand="online"], :root[data-brand="online"] [data-theme="dark"] {
  --eco-brand-primary: var(--eco-color-academy-yellow);
  --eco-brand-on-primary: var(--eco-color-black);
  --eco-brand-accent: var(--eco-color-academy-green);
  --eco-brand-on-accent: var(--eco-color-white);
  --eco-brand-button: var(--eco-color-academy-green);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-academy-yellow);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-neutral-50);
  --eco-brand-on-button-ink: var(--eco-color-black);
  --eco-brand-button-secondary-fg: var(--eco-color-academy-green-400);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-academy-green-300);

  --eco-badge-solid-bg: var(--eco-color-academy-green);
  --eco-badge-solid-fg: var(--eco-color-white);
  --eco-btn-hover-to: var(--eco-color-black);
  --eco-tab-label: rgba(255, 255, 255, .7);
  --eco-tab-label-strong: var(--eco-color-white);
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-academy-green);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-academy-yellow);
  --eco-tab-accent-fg: #000000;
  --eco-slider-fill: var(--eco-color-academy-green);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-malachite);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-malachite) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-malachite);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #39AB37;
  --eco-avatar-ink-blue: #5B92FF;
  --eco-avatar-ink-teal: #61C5BD;
  --eco-avatar-ink-red: #FF604F;

  --eco-text-primary_on-brand: var(--eco-color-black);
  --eco-text-brand-primary: var(--eco-color-academy-yellow);
  --eco-text-brand-secondary: var(--eco-color-academy-yellow);
  --eco-text-brand-secondary_hover: var(--eco-color-academy-yellow-200);
  --eco-text-brand-tertiary: var(--eco-color-academy-green);
  --eco-text-success-primary: var(--eco-color-academy-green-300);

  --eco-border-brand: var(--eco-color-academy-yellow);

  --eco-fg-brand-primary: var(--eco-color-academy-yellow);
  --eco-fg-brand-primary_alt: var(--eco-color-academy-yellow);
  --eco-fg-brand-secondary: var(--eco-color-academy-green);
  --eco-fg-success-primary: var(--eco-color-academy-green);
  --eco-fg-success-secondary: var(--eco-color-academy-green-400);

  --eco-bg-brand-primary: rgba(255, 204, 25, .10);
  --eco-bg-brand-secondary: rgba(255, 204, 25, .18);
  --eco-bg-brand-solid: var(--eco-color-academy-yellow);
  --eco-bg-brand-solid_hover: var(--eco-color-academy-yellow-200);
  --eco-bg-success-primary: rgba(0, 181, 51, .16);
  --eco-bg-success-solid: var(--eco-color-academy-green);

  --eco-focus-ring: var(--eco-color-academy-yellow);

  --eco-chart-1: var(--eco-color-academy-yellow);
  --eco-chart-seq-1: var(--eco-color-academy-green-900);
  --eco-chart-seq-2: var(--eco-color-academy-green-700);
  --eco-chart-seq-3: var(--eco-color-academy-green);
  --eco-chart-seq-4: var(--eco-color-academy-green-300);
  --eco-chart-seq-5: var(--eco-color-academy-yellow);
  --eco-chart-div-4: var(--eco-color-academy-green-400);
  --eco-chart-div-5: var(--eco-color-academy-green-700);
  --eco-chart-3: var(--eco-color-academy-green);
  --eco-chart-6: var(--eco-color-academy-yellow-700);

  --eco-project-academy: var(--eco-color-academy-green);

  --eco-cat-blue: #5B92FF;
  --eco-cat-teal: #61C5BD;
  --eco-cat-red: #FF604F;

  --eco-board-1: #00B533;
  --eco-board-2: #3777FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
  --eco-board-ink-2: var(--eco-color-white);
}
:root[data-brand="online"][data-theme="light"], :root[data-brand="online"] [data-theme="light"] {
  --eco-brand-primary: var(--eco-color-academy-green);
  --eco-brand-on-primary: var(--eco-color-white);
  --eco-brand-accent: var(--eco-color-academy-yellow);
  --eco-brand-on-accent: var(--eco-color-black);
  --eco-brand-button: var(--eco-color-academy-green);
  --eco-brand-on-button: var(--eco-color-white);
  --eco-brand-button-accent: var(--eco-color-academy-yellow);
  --eco-brand-on-button-accent: var(--eco-color-black);
  --eco-brand-button-ink: var(--eco-color-black);
  --eco-brand-on-button-ink: var(--eco-color-white);
  --eco-brand-button-secondary-fg: var(--eco-color-academy-green-700);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-academy-green-800);

  --eco-badge-solid-bg: var(--eco-color-academy-green);
  --eco-badge-solid-fg: var(--eco-color-white);
  --eco-btn-hover-to: var(--eco-color-black);
  --eco-tab-label: rgba(0, 0, 0, .7);
  --eco-tab-label-strong: #000000;
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-academy-green);
  --eco-tab-brand-fg: var(--eco-color-white);
  --eco-tab-accent-bg: var(--eco-color-academy-yellow);
  --eco-tab-accent-fg: #000000;
  --eco-slider-fill: var(--eco-color-academy-green);
  --eco-slider-mark: var(--eco-color-white);
  --eco-avatar-ink: var(--eco-color-academy-green);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-malachite) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-academy-green);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #00A603;
  --eco-avatar-ink-blue: #0055FF;
  --eco-avatar-ink-teal: #26A49D;
  --eco-avatar-ink-red: #C80000;

  --eco-text-primary_on-brand: var(--eco-color-white);
  --eco-text-brand-primary: var(--eco-color-green-done);
  --eco-text-brand-secondary: var(--eco-color-green-done);
  --eco-text-brand-secondary_hover: var(--eco-color-academy-green-800);
  --eco-text-brand-tertiary: var(--eco-color-green-done);
  --eco-text-success-primary: var(--eco-color-academy-green-800);

  --eco-border-brand: var(--eco-color-academy-green-700);

  --eco-fg-brand-primary: var(--eco-color-academy-green-700);
  --eco-fg-brand-primary_alt: var(--eco-color-academy-green);
  --eco-fg-brand-secondary: var(--eco-color-academy-green);
  --eco-fg-success-primary: var(--eco-color-academy-green-700);
  --eco-fg-success-secondary: var(--eco-color-academy-green);

  --eco-bg-brand-primary: var(--eco-color-brand-tint);
  --eco-bg-brand-secondary: var(--eco-color-academy-green-100);
  --eco-bg-brand-solid: var(--eco-color-academy-green);
  --eco-bg-brand-solid_hover: var(--eco-color-academy-green-600);
  --eco-bg-success-primary: var(--eco-color-academy-green-50);
  --eco-bg-success-solid: var(--eco-color-academy-green);

  --eco-focus-ring: var(--eco-color-academy-green-700);

  --eco-chart-1: var(--eco-color-academy-green);
  --eco-chart-seq-1: var(--eco-color-academy-yellow-100);
  --eco-chart-seq-2: var(--eco-color-academy-yellow);
  --eco-chart-seq-3: var(--eco-color-academy-green);
  --eco-chart-seq-4: var(--eco-color-academy-green-800);
  --eco-chart-seq-5: var(--eco-color-academy-green-950);
  --eco-chart-div-4: var(--eco-color-academy-green-400);
  --eco-chart-div-5: var(--eco-color-academy-green-700);
  --eco-chart-3: var(--eco-color-academy-yellow);
  --eco-chart-6: var(--eco-color-academy-green-200);

  --eco-project-academy: var(--eco-color-academy-green-600);

  --eco-cat-blue: #0055FF;
  --eco-cat-teal: #26A49D;
  --eco-cat-red: #C80000;

  --eco-board-1: #00B533;
  --eco-board-2: #0019FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
}

/* ===== PDP Junior — taklif ===== */
:root[data-brand="junior"] {
  --eco-gradient-stop-1: var(--eco-color-junior-cyan-50);
  --eco-gradient-stop-2: var(--eco-color-junior-cyan);
  --eco-gradient-stop-3: var(--eco-color-junior-cyan-700);
  --eco-gradient-stop-4: var(--eco-color-junior-ink);
  --eco-gradient: linear-gradient(90deg, var(--eco-gradient-stop-1) 0%, var(--eco-gradient-stop-2) 40%, var(--eco-gradient-stop-3) 75%, var(--eco-gradient-stop-4) 100%);
  --eco-color-surface: #F5F5F5;
  --eco-color-brand-tint: #E4FCFF;
  --eco-color-surface-active: #F7F7F7;
  --eco-color-surface-hover: #E6E6E6;
  --eco-color-surface-tertiary: #E6E6E6;
  --eco-color-surface-raised: #ECECEC;
  --eco-color-surface-strong: #DCDCDC;
  --eco-font-display: "Onest", "Onest Fallback", system-ui, sans-serif;
  --eco-font-body: "Onest", "Onest Fallback", system-ui, sans-serif;
  --eco-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --eco-logo-mark-size: 40px;
  --eco-logo-x: calc(var(--eco-logo-mark-size) / 3);
  --eco-logo-clearspace: var(--eco-logo-x);
  --eco-logo-min-full: 76px;
  --eco-logo-min-mark: 20px;
  --eco-print-font: "Onest", "DejaVu Sans", sans-serif;
  --eco-print-title-weight: 700;
  --eco-print-rule-fill: var(--eco-color-junior-cyan-deep);
}
:root[data-brand="junior"], :root[data-brand="junior"] [data-theme="dark"] {
  --eco-brand-primary: var(--eco-color-junior-cyan-deep);
  --eco-brand-on-primary: var(--eco-color-junior-deep);
  --eco-brand-accent: var(--eco-color-junior-cyan-100);
  --eco-brand-on-accent: var(--eco-color-junior-deep);
  --eco-brand-button: var(--eco-color-junior-cyan-deep);
  --eco-brand-on-button: var(--eco-color-junior-deep);
  --eco-brand-button-accent: var(--eco-color-junior-cyan);
  --eco-brand-on-button-accent: var(--eco-color-junior-deep);
  --eco-brand-button-ink: var(--eco-color-neutral-50);
  --eco-brand-on-button-ink: var(--eco-color-black);
  --eco-brand-button-secondary-fg: var(--eco-color-junior-cyan-deep);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-junior-cyan);

  --eco-badge-solid-bg: var(--eco-bg-brand-solid);
  --eco-badge-solid-fg: var(--eco-text-primary_on-brand);
  --eco-tab-label: rgba(255, 255, 255, .7);
  --eco-tab-label-strong: var(--eco-color-white);
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-junior-cyan);
  --eco-tab-brand-fg: #000000;
  --eco-tab-accent-bg: var(--eco-color-junior-cyan);
  --eco-tab-accent-fg: #000000;
  --eco-slider-fill: var(--eco-color-junior-cyan-deep);
  --eco-slider-mark: #000000;
  --eco-avatar-ink: var(--eco-color-junior-cyan-deep);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-junior-cyan) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-junior-cyan-deep);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #39AB37;
  --eco-avatar-ink-blue: #5B92FF;
  --eco-avatar-ink-teal: var(--eco-color-junior-cyan-deep);
  --eco-avatar-ink-red: #FF604F;

  --eco-text-primary_on-brand: var(--eco-color-junior-deep);
  --eco-text-brand-primary: var(--eco-color-junior-cyan);
  --eco-text-brand-secondary: var(--eco-color-junior-cyan);
  --eco-text-brand-secondary_hover: var(--eco-color-junior-cyan-200);
  --eco-text-brand-tertiary: var(--eco-color-junior-cyan-200);
  --eco-text-success-primary: var(--eco-color-success-300);

  --eco-border-brand: var(--eco-color-junior-cyan);

  --eco-fg-brand-primary: var(--eco-color-junior-cyan);
  --eco-fg-brand-primary_alt: var(--eco-color-junior-cyan);
  --eco-fg-brand-secondary: var(--eco-color-junior-cyan-200);
  --eco-fg-success-primary: var(--eco-color-success-500);
  --eco-fg-success-secondary: var(--eco-color-success-400);

  --eco-bg-brand-primary: rgba(0, 224, 239, .1);
  --eco-bg-brand-secondary: rgba(0, 224, 239, .18);
  --eco-bg-brand-solid: var(--eco-color-junior-cyan-deep);
  --eco-bg-brand-solid_hover: var(--eco-color-junior-cyan);
  --eco-bg-success-primary: rgba(23, 178, 106, .16);
  --eco-bg-success-solid: var(--eco-color-success-500);

  --eco-focus-ring: var(--eco-color-junior-cyan);

  --eco-chart-1: var(--eco-color-junior-cyan);
  --eco-chart-seq-1: var(--eco-color-junior-cyan-900);
  --eco-chart-seq-2: var(--eco-color-junior-cyan-700);
  --eco-chart-seq-3: var(--eco-color-junior-cyan-500);
  --eco-chart-seq-4: var(--eco-color-junior-cyan);
  --eco-chart-seq-5: var(--eco-color-junior-cyan-100);
  --eco-chart-div-4: var(--eco-color-junior-cyan-400);
  --eco-chart-div-5: var(--eco-color-junior-cyan-700);
  --eco-chart-3: var(--eco-color-junior-cyan-800);
  --eco-chart-6: var(--eco-color-neutral-800);

  --eco-cat-blue: #5B92FF;
  --eco-cat-teal: #61C5BD;
  --eco-cat-red: #FF604F;

  --eco-board-1: #00B533;
  --eco-board-2: #3777FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
  --eco-board-ink-2: var(--eco-color-white);
}
:root[data-brand="junior"][data-theme="light"], :root[data-brand="junior"] [data-theme="light"] {
  --eco-brand-primary: var(--eco-color-junior-cyan);
  --eco-brand-on-primary: var(--eco-color-junior-deep);
  --eco-brand-accent: var(--eco-color-junior-deep);
  --eco-brand-on-accent: var(--eco-color-white);
  --eco-brand-button: var(--eco-color-junior-cyan);
  --eco-brand-on-button: var(--eco-color-junior-deep);
  --eco-brand-button-accent: var(--eco-color-junior-cyan-deep);
  --eco-brand-on-button-accent: var(--eco-color-junior-deep);
  --eco-brand-button-ink: var(--eco-color-junior-deep);
  --eco-brand-on-button-ink: var(--eco-color-white);
  --eco-brand-button-secondary-fg: var(--eco-color-junior-deep);
  --eco-brand-button-secondary-fg_hover: var(--eco-color-junior-cyan-950);

  --eco-badge-solid-bg: var(--eco-bg-brand-solid);
  --eco-badge-solid-fg: var(--eco-text-primary_on-brand);
  --eco-tab-label: rgba(0, 0, 0, .7);
  --eco-tab-label-strong: #000000;
  --eco-tab-pill-bg: var(--eco-color-white);
  --eco-tab-pill-fg: #000000;
  --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --eco-tab-inverse-bg: #000000;
  --eco-tab-inverse-fg: var(--eco-color-white);
  --eco-tab-brand-bg: var(--eco-color-junior-cyan);
  --eco-tab-brand-fg: #000000;
  --eco-tab-accent-bg: var(--eco-color-junior-cyan);
  --eco-tab-accent-fg: #000000;
  --eco-slider-fill: var(--eco-color-junior-cyan-deep);
  --eco-slider-mark: #000000;
  --eco-avatar-ink: var(--eco-color-junior-cyan-deep);
  --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-junior-cyan-deep) 15%, var(--eco-bg-primary));
  --eco-avatar-tint-ink: var(--eco-color-junior-cyan-deep);
  --eco-avatar-ink-black: var(--eco-text-primary);
  --eco-avatar-ink-green: #00A603;
  --eco-avatar-ink-blue: #0055FF;
  --eco-avatar-ink-teal: var(--eco-color-junior-cyan-deep);
  --eco-avatar-ink-red: #C80000;

  --eco-text-primary_on-brand: var(--eco-color-junior-deep);
  --eco-text-brand-primary: var(--eco-color-junior-deep);
  --eco-text-brand-secondary: var(--eco-color-junior-cyan-800);
  --eco-text-brand-secondary_hover: var(--eco-color-junior-deep);
  --eco-text-brand-tertiary: var(--eco-color-junior-deep);
  --eco-text-success-primary: var(--eco-color-success-800);

  --eco-border-brand: var(--eco-color-junior-cyan-800);

  --eco-fg-brand-primary: var(--eco-color-junior-cyan-800);
  --eco-fg-brand-primary_alt: var(--eco-color-junior-cyan-600);
  --eco-fg-brand-secondary: var(--eco-color-junior-cyan-600);
  --eco-fg-success-primary: var(--eco-color-success-700);
  --eco-fg-success-secondary: var(--eco-color-success-500);

  --eco-bg-brand-primary: var(--eco-color-brand-tint);
  --eco-bg-brand-secondary: var(--eco-color-junior-cyan-100);
  --eco-bg-brand-solid: var(--eco-color-junior-cyan-deep);
  --eco-bg-brand-solid_hover: var(--eco-color-junior-cyan);
  --eco-bg-success-primary: var(--eco-color-success-50);
  --eco-bg-success-solid: var(--eco-color-success-500);

  --eco-focus-ring: var(--eco-color-junior-cyan-700);

  --eco-chart-1: var(--eco-color-junior-cyan-700);
  --eco-chart-seq-1: var(--eco-color-junior-cyan-100);
  --eco-chart-seq-2: var(--eco-color-junior-cyan);
  --eco-chart-seq-3: var(--eco-color-junior-cyan-500);
  --eco-chart-seq-4: var(--eco-color-junior-cyan-700);
  --eco-chart-seq-5: var(--eco-color-junior-cyan-900);
  --eco-chart-div-4: var(--eco-color-junior-cyan-400);
  --eco-chart-div-5: var(--eco-color-junior-cyan-700);
  --eco-chart-3: var(--eco-color-junior-sky);
  --eco-chart-4: var(--eco-color-neutral-400);
  --eco-chart-5: var(--eco-color-junior-deep);
  --eco-chart-6: var(--eco-color-neutral-200);

  --eco-cat-blue: #0055FF;
  --eco-cat-teal: #26A49D;
  --eco-cat-red: #C80000;

  --eco-board-1: #00B533;
  --eco-board-2: #0019FF;
  --eco-board-3: #00E0EF;
  --eco-board-4: #FFCC19;
  --eco-board-5: #26A49D;
  --eco-board-6: #BDFF00;
}