/*
 * Cỏ Dại Course design tokens.
 * Keep shared visual decisions here; component files should consume these
 * tokens through semantic aliases instead of repeating brand hex values.
 */
:root {
  --cfcdc-color-brand: #315d33;
  --cfcdc-color-brand-strong: #254b28;
  --cfcdc-color-accent: #aacf4e;
  --cfcdc-color-surface: #fffdf5;
  --cfcdc-color-surface-soft: #fff1c9;
  --cfcdc-color-background: #dee5c5;
  --cfcdc-color-text: #263b2a;
  --cfcdc-color-text-strong: #1f1f1f;
  --cfcdc-color-muted: #65705d;
  --cfcdc-color-border: #d9dfc9;
  --cfcdc-color-sale: #ebb122;
  --cfcdc-color-success: #2f7c44;
  --cfcdc-color-success-bg: #edf8ed;
  --cfcdc-color-success-border: #8dbb88;
  --cfcdc-color-warning: #d58b16;
  --cfcdc-color-warning-bg: #fff4d8;
  --cfcdc-color-warning-border: #e5a52d;
  --cfcdc-color-danger: #c94e37;
  --cfcdc-color-danger-bg: #fff0ed;
  --cfcdc-color-danger-border: #dc766c;
  --cfcdc-color-info: #285c85;
  --cfcdc-color-info-bg: #eef7ff;
  --cfcdc-color-info-border: #78a9cf;

  --cfcdc-radius-sm: 8px;
  --cfcdc-radius-md: 14px;
  --cfcdc-radius-lg: 20px;
  --cfcdc-radius-pill: 999px;
  --cfcdc-shadow-card: 0 12px 36px rgba(20, 55, 34, .16);
  --cfcdc-font-body: 'Nunito', sans-serif;
  --cfcdc-font-display: 'Itim';
  --cfcdc-font-ui: 'Dosis';
  --cfcdc-breakpoint-mobile: 850px;
}

/* Tutor owns the dark canvas. Only opt into this palette when its theme
 * attribute is present, so ordinary WooCommerce pages remain light. */
html[data-tutor-theme='dark'] {
  --cfcdc-color-background: #151b26;
  --cfcdc-color-surface: #1e2731;
  --cfcdc-color-surface-soft: #252d20;
  --cfcdc-color-text: #edf3e9;
  --cfcdc-color-text-strong: #f5f8f3;
  --cfcdc-color-muted: #c3d0c0;
  --cfcdc-color-border: #3a4a50;
  --cfcdc-color-brand: #5f8a50;
  --cfcdc-color-brand-strong: #739d5f;
  --cfcdc-color-success: #d1edcb;
  --cfcdc-color-success-bg: #233c2a;
  --cfcdc-color-success-border: #719c72;
  --cfcdc-color-warning: #f5d27b;
  --cfcdc-color-warning-bg: #40361e;
  --cfcdc-color-warning-border: #a9863b;
  --cfcdc-color-danger: #ffc2b7;
  --cfcdc-color-danger-bg: #482827;
  --cfcdc-color-danger-border: #bc716a;
  --cfcdc-color-info: #b9ddf8;
  --cfcdc-color-info-bg: #203b4b;
  --cfcdc-color-info-border: #5b91af;
}

/* Course card and course-detail variations. Keep all labels, CTA and state
 * colours here so an editor can retheme the course system from one file. */
:root {
  --cfcdc-course-bg: var(--cfcdc-color-background);
  --cfcdc-course-accent: var(--cfcdc-color-accent);
  --cfcdc-course-text: var(--cfcdc-color-brand);
  --cfcdc-course-white: #fff;
  --cfcdc-course-teacher-border: var(--cfcdc-color-sale);
  --cfcdc-wishlist-border: var(--cfcdc-color-sale);
  --cfcdc-wishlist-bg: #f1ce76;
  --cfcdc-wishlist-icon: var(--cfcdc-color-brand);
  --cfcdc-course-card-gap: 24px;
  --cfcdc-course-card-radius: 16px;
  --cfcdc-course-card-media-aspect: 4/3;
  --cfcdc-course-card-corner-size: 16px;
  --cfcdc-course-card-level-height: 50px;
  --cfcdc-course-font-primary: var(--cfcdc-font-display);
  --cfcdc-course-font-secondary: var(--cfcdc-font-ui);
  --cfcdc-course-font-body: var(--cfcdc-font-body);
  --cfcdc-course-title-size: clamp(1.15rem, 3vw, 1.5rem);
  --cfcdc-course-subtitle-size: 14px;

  --cfcdc-course-badge-free-bg: #eef9e8;
  --cfcdc-course-badge-free-color: var(--cfcdc-color-brand);
  --cfcdc-course-badge-free-border: var(--cfcdc-color-accent);
  --cfcdc-course-badge-paid-bg: #fff7dc;
  --cfcdc-course-badge-paid-color: #6a4a00;
  --cfcdc-course-badge-paid-border: var(--cfcdc-color-sale);
  --cfcdc-course-badge-coming-bg: #eef2ff;
  --cfcdc-course-badge-coming-color: #34406b;
  --cfcdc-course-badge-coming-border: #8da2ff;

  --cfcdc-course-badge-not-started-bg: #eef9e8;
  --cfcdc-course-badge-not-started-color: var(--cfcdc-color-brand);
  --cfcdc-course-badge-not-started-border: var(--cfcdc-color-accent);
  --cfcdc-course-badge-in-progress-bg: var(--cfcdc-color-brand);
  --cfcdc-course-badge-in-progress-color: #fff;
  --cfcdc-course-badge-in-progress-border: var(--cfcdc-color-brand);
  --cfcdc-course-badge-completed-bg: #1f6b5c;
  --cfcdc-course-badge-completed-color: #fff;
  --cfcdc-course-badge-completed-border: #1f6b5c;
  --cfcdc-course-badge-payment-pending-bg: #fff3d6;
  --cfcdc-course-badge-payment-pending-color: #7a4300;
  --cfcdc-course-badge-payment-pending-border: #c98200;
  --cfcdc-course-badge-payment-processing-bg: #eaf4ff;
  --cfcdc-course-badge-payment-processing-color: #174b73;
  --cfcdc-course-badge-payment-processing-border: #3175a8;
  --cfcdc-course-badge-payment-failed-bg: var(--cfcdc-color-danger-bg);
  --cfcdc-course-badge-payment-failed-color: #942d24;
  --cfcdc-course-badge-payment-failed-border: #d86d63;
  --cfcdc-course-badge-payment-exception-bg: #f8edf4;
  --cfcdc-course-badge-payment-exception-color: #7c2e5a;
  --cfcdc-course-badge-payment-exception-border: #c579a5;

  --cfcdc-course-cta-details-bg: rgba(255, 255, 255, .72);
  --cfcdc-course-cta-details-color: var(--cfcdc-color-brand);
  --cfcdc-course-cta-details-border: var(--cfcdc-color-accent);
  --cfcdc-course-cta-coming-bg: #eef2ff;
  --cfcdc-course-cta-coming-color: #34406b;
  --cfcdc-course-cta-coming-border: #8da2ff;
  --cfcdc-course-cta-not-started-bg: var(--cfcdc-color-brand);
  --cfcdc-course-cta-not-started-color: #fff;
  --cfcdc-course-cta-not-started-border: var(--cfcdc-color-brand);
  --cfcdc-course-cta-in-progress-bg: #244d2c;
  --cfcdc-course-cta-in-progress-color: #fff;
  --cfcdc-course-cta-in-progress-border: #244d2c;
  --cfcdc-course-cta-completed-bg: #e8f5f1;
  --cfcdc-course-cta-completed-color: #1f6b5c;
  --cfcdc-course-cta-completed-border: #5ea99a;
  --cfcdc-course-cta-payment-pending-bg: #fff3d6;
  --cfcdc-course-cta-payment-pending-color: #7a4300;
  --cfcdc-course-cta-payment-pending-border: #c98200;
  --cfcdc-course-cta-payment-processing-bg: #eaf4ff;
  --cfcdc-course-cta-payment-processing-color: #174b73;
  --cfcdc-course-cta-payment-processing-border: #3175a8;
  --cfcdc-course-cta-payment-failed-bg: var(--cfcdc-color-danger-bg);
  --cfcdc-course-cta-payment-failed-color: #942d24;
  --cfcdc-course-cta-payment-failed-border: #d86d63;
  --cfcdc-course-cta-payment-exception-bg: #f8edf4;
  --cfcdc-course-cta-payment-exception-color: #7c2e5a;
  --cfcdc-course-cta-payment-exception-border: #c579a5;
  --cfcdc-course-cta-learning-bg: var(--cfcdc-course-cta-in-progress-bg);
  --cfcdc-course-cta-learning-color: var(--cfcdc-course-cta-in-progress-color);
  --cfcdc-course-cta-learning-border: var(--cfcdc-course-cta-in-progress-border);
  --cfcdc-course-cta-disabled-bg: #eee;
  --cfcdc-course-cta-disabled-color: #888;
  --cfcdc-course-cta-disabled-border: #ddd;
}