/* source: design-system/tokens/colors.css */

/* Conecta Frontend Shell — canonical public color tokens. */
:root {
  /* Approved preset values. Existing appearance options remain a temporary
   * compatibility input until the administrative preset migration. */
  --cc-preset-color-page: #F5F6F2;
  --cc-preset-color-surface: #FFFFFF;
  --cc-preset-color-surface-soft: #F8FAF6;
  --cc-preset-color-text-primary: rgb(51, 64, 52);
  --cc-preset-color-text-secondary: #667064;
  --cc-preset-color-primary: #4E6E32;
  --cc-preset-color-interaction: #EEF4E9;
  --cc-preset-color-interaction-hover: #E3EDDC;
  --cc-preset-color-border: #DDE5D8;

  /* Runtime semantic layer. Legacy appearance variables are read only as a
   * compatibility adapter; domain modules must consume the cc-color tokens. */
  --cc-color-page: var(--conecta-bg, var(--cc-preset-color-page));
  --cc-color-surface: var(--conecta-card-bg, var(--cc-preset-color-surface));
  --cc-color-surface-soft: var(--cc-preset-color-surface-soft);
  --cc-color-text-primary: var(--conecta-text, var(--cc-preset-color-text-primary));
  --cc-color-heading: var(--conecta-title-color, var(--cc-color-text-primary));
  --cc-color-text-secondary: var(--conecta-muted, var(--cc-preset-color-text-secondary));
  --cc-color-primary: var(--conecta-primary, var(--cc-preset-color-primary));
  --cc-color-interaction: var(--cc-preset-color-interaction);
  --cc-color-interaction-hover: var(--cc-preset-color-interaction-hover);
  --cc-color-border: var(--conecta-border-soft, var(--cc-preset-color-border));
  --cc-color-border-interactive: rgba(78, 110, 50, .24);
  --cc-color-border-interactive-hover: rgba(78, 110, 50, .30);
  --cc-color-focus-ring: rgba(78, 110, 50, .18);
  --cc-color-on-primary: #FFFFFF;
  --cc-color-placeholder: #7A8578;
  --cc-color-disabled-surface: #F1F3EE;
  --cc-color-disabled-text: #8A9387;
  --cc-color-success: #35631F;
  --cc-color-success-soft: #EDF7E8;
  --cc-color-success-border: #BCD7AD;
  --cc-color-warning: #7A5A12;
  --cc-color-warning-soft: #FFF8E6;
  --cc-color-warning-border: #E3CF93;
  --cc-color-info: #365B6D;
  --cc-color-info-soft: #EEF6F8;
  --cc-color-info-border: #B8D2DB;
  --cc-color-danger: #9B3A3A;
  --cc-color-danger-soft: #FFF3F1;
  --cc-color-danger-border: #D7A7A2;
  --cc-color-backdrop: rgba(22, 36, 22, .46);
}

/* source: design-system/tokens/typography.css */

/* Conecta Frontend Shell — canonical public typography tokens. */
:root {
  --cc-font-family-title: "Montserrat", Arial, sans-serif;
  --cc-font-family-interface: Arial, Helvetica, sans-serif;
  --cc-font-family-editorial: Arial, Helvetica, sans-serif;
  --cc-font-family-social: var(--cc-font-family-interface), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --cc-font-weight-regular: 400;
  --cc-font-weight-medium: 500;
  --cc-font-weight-number: 600;

  --cc-font-size-hero: 32px;
  --cc-font-size-page-title: 28px;
  --cc-font-size-section-title: 22px;
  --cc-font-size-card-title: 16px;
  --cc-font-size-interface: 14px;
  --cc-font-size-control: 13px;
  --cc-font-size-secondary: 12px;
  --cc-font-size-meta: 11px;
  --cc-font-size-editorial: 14px;

  --cc-font-size-copy: 14px;
  --cc-line-height-copy: 1.5714285714;
  --cc-line-height-title: 1.25;
  --cc-line-height-interface: 1.5714285714;
  --cc-line-height-editorial: 1.7142857143;
  --cc-letter-spacing-eyebrow: .08em;

  /* Temporary aliases for components migrating from the legacy appearance
   * contract. They do not mutate the existing --conecta-* variables. */
  --cc-font-title: var(--cc-font-family-title);
  --cc-font-interface: var(--cc-font-family-interface);
  --cc-font-editorial: var(--cc-font-family-editorial);
}

@media (max-width: 767px) {
  :root {
    --cc-font-size-hero: 27px;
    --cc-font-size-page-title: 24px;
    --cc-font-size-section-title: 20px;
    --cc-font-size-card-title: 16px;
    --cc-font-size-editorial: 14px;
  }
}

/* source: design-system/tokens/spacing.css */

/* Conecta Frontend Shell — canonical public spacing tokens. */
:root {
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-5: 20px;
  --cc-space-6: 24px;
  --cc-space-8: 32px;
  --cc-space-10: 40px;
  --cc-space-12: 48px;

  --cc-layout-section-gap: var(--cc-space-8);
  --cc-layout-section-gap-compact: var(--cc-space-6);
  --cc-layout-grid-gap: var(--cc-space-6);
  --cc-layout-grid-gap-compact: var(--cc-space-4);
  --cc-layout-card-padding: var(--cc-space-6);
  --cc-text-paragraph-gap: var(--cc-space-3);
  --cc-text-title-gap: var(--cc-space-3);
}

@media (max-width: 1023px) {
  :root { --cc-layout-card-padding: var(--cc-space-5); }
}

@media (max-width: 767px) {
  :root { --cc-layout-card-padding: var(--cc-space-4); }
}

/* source: design-system/tokens/geometry.css */

/* Conecta Frontend Shell — canonical geometry and compatibility tokens. */
:root {
  --cc-layout-content-max: 1180px;
  --cc-layout-reader-max: 820px;
  --cc-layout-gutter: 32px;
  --cc-layout-panel-width: 280px;
  --cc-layout-card-min-compact: 240px;
  --cc-layout-card-min-medium: 300px;
  --cc-layout-card-min-large: 420px;
  --cc-layout-touch-target: 44px;
  --cc-layout-radius-card: 16px;
  --cc-card-border-width: 1px;
  --cc-card-media-ratio: 16 / 9;
  --cc-divider-thickness: 1px;
  --cc-badge-height: 24px;
  --cc-badge-radius: 999px;
  --cc-badge-icon-size: 14px;
  --cc-status-dot-size: 8px;
  --cc-status-dot-size-large: 10px;
  --cc-control-height: 40px;
  --cc-control-height-compact: 36px;
  --cc-control-height-touch: 44px;
  --cc-control-radius: 10px;
  --cc-control-border-width: 1px;
  --cc-control-icon-size: 16px;
  --cc-icon-size-16: 16px;
  --cc-icon-size-20: 20px;
  --cc-icon-size-24: 24px;
  --cc-icon-button-size: 40px;
  --cc-icon-button-size-touch: 44px;
  --cc-textarea-min-height: 104px;
  --cc-control-group-min: 220px;
  --cc-feedback-radius: 12px;
  --cc-feedback-icon-size: 20px;
  --cc-empty-state-content-max: 640px;
  --cc-empty-state-icon-size: 24px;
  --cc-timeline-marker-size: 16px;
  --cc-timeline-marker-center: 8px;
  --cc-timeline-marker-icon-size: 10px;
  --cc-timeline-line-width: 2px;
  --cc-timeline-connector-offset: 7px;
  --cc-timeline-current-ring-width: 4px;
  --cc-timeline-card-min: 280px;
  --cc-modal-width-small: 420px;
  --cc-modal-width-medium: 640px;
  --cc-modal-width-large: 860px;
  --cc-modal-max-height: 88dvh;
  --cc-modal-radius: 16px;
  --cc-popover-width: 320px;
  --cc-popover-width-wide: 420px;
  --cc-popover-max-height: 520px;
  --cc-popover-radius: 12px;
  --cc-popover-z-index: 30;
  --cc-focus-ring-width: 2px;
  --cc-focus-ring-offset: 2px;

  /* Existing shell contracts remain stable until each consumer migrates. */
  --cc-shell-page-max: 1180px;
  --cc-shell-page-gutter: 32px;
  --cc-shell-section-gap: 48px;
  --cc-shell-content-footer-gap: 84px;
  --cc-shell-content-entry-gap: 24px;
  --cc-shell-touch-target: 44px;
  --cc-shell-radius: 18px;
  --cc-shell-overlay: rgba(22, 36, 22, .46);
  --cc-shell-surface: var(--cc-color-surface, rgba(255, 255, 255, .92));
  --cc-shell-border: var(--cc-color-border, rgba(78, 110, 50, .16));
  --cc-shell-primary: var(--cc-color-primary, #4E6E32);
  --cc-shell-text: var(--cc-color-text-primary, rgb(51, 64, 52));
}

@media (max-width: 1279px) {
  :root {
    --cc-layout-gutter: 24px;
    --cc-layout-panel-width: 240px;
  }
}

@media (max-width: 1199px) {
  :root { --cc-shell-page-gutter: 24px; }
}

@media (max-width: 860px) {
  :root { --cc-shell-content-entry-gap: 20px; }
}

@media (max-width: 767px) {
  :root {
    --cc-layout-gutter: 16px;
    --cc-shell-page-gutter: 16px;
    --cc-shell-section-gap: 32px;
    --cc-shell-content-footer-gap: 52px;
    --cc-shell-mobile-surface-padding: 16px;
    --cc-shell-mobile-surface-gap: 12px;
    --cc-shell-mobile-control-height: 44px;
    --cc-shell-mobile-control-height-compact: 40px;
    --cc-shell-mobile-title-size: 26px;
    --cc-shell-mobile-section-title-size: 20px;
    --cc-shell-mobile-body-size: 15px;
    --cc-shell-mobile-meta-size: 12px;
    --cc-shell-mobile-sheet-radius: 20px;
    --cc-shell-mobile-sheet-max-height: 76dvh;
    --cc-shell-mobile-safe-top: env(safe-area-inset-top, 0px);
    --cc-shell-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* source: design-system/tokens/elevation.css */


/* Conecta Frontend Shell — canonical public elevation tokens. */
:root {
  --cc-elevation-none: none;
  --cc-elevation-1: 0 8px 24px rgba(40, 56, 38, .06);
  --cc-elevation-2: 0 12px 30px rgba(40, 56, 38, .09);
  --cc-elevation-shell-compat: 0 14px 36px rgba(40, 56, 38, .08);
  --cc-focus-ring-shadow: 0 0 0 var(--cc-focus-ring-width) var(--cc-color-focus-ring);
}

/* source: design-system/tokens/motion.css */

/* Conecta Frontend Shell — canonical public motion tokens. */
:root {
  --cc-motion-fast: 160ms;
  --cc-motion-standard: 220ms;
  --cc-motion-easing: ease;
}

/* source: design-system/tokens/portal-frame.css */

/* Conecta Frontend Shell — canonical public Portal frame contract. */
:root {
  /* Exact values preserve the approved public canvas while making the Shell
   * the single authority for Header-to-content rhythm and outer containers. */
  --cc-portal-frame-content-max: 1180px;
  --cc-portal-frame-gutter: 32px;
  --cc-portal-frame-padding: 24px;
  --cc-portal-frame-entry-gap: 24px;
  --cc-portal-frame-footer-gap: 84px;
  --cc-portal-frame-document-search-gap: 24px;
  --cc-portal-frame-document-search-gap-mobile: 18px;

  /* One external ruler for the canonical Header and every primary Portal surface. */
  --cc-portal-surface-width: min(
    var(--cc-portal-frame-content-max),
    calc(100% - (var(--cc-portal-frame-gutter) * 2))
  );
  --cc-portal-surface-max: var(--cc-portal-frame-content-max);

  /* Compatibility aliases keep existing domain consumers stable until their
   * own controlled migration. No option or legacy variable is written. */
  --cc-shell-page-max: var(--cc-portal-frame-content-max);
  --cc-shell-page-gutter: var(--cc-portal-frame-gutter);
  --cc-shell-content-entry-gap: var(--cc-portal-frame-entry-gap);
  --cc-shell-content-footer-gap: var(--cc-portal-frame-footer-gap);
}

@media (max-width: 1199px) {
  :root { --cc-portal-frame-gutter: 24px; }
}

@media (max-width: 1023px) {
  :root {
    --cc-portal-surface-width: 100%;
    --cc-portal-surface-max: none;
  }
}

@media (max-width: 860px) {
  :root { --cc-portal-frame-entry-gap: 20px; }
}

@media (max-width: 767px) {
  :root {
    --cc-portal-frame-gutter: 16px;
    --cc-portal-frame-padding: 16px;
    --cc-portal-frame-footer-gap: 52px;
  }
}

/* source: design-system/tokens/portal-header.css */

/* Conecta Frontend Shell — canonical Portal Header token contract. */
:root {
  /* Geometry mirrors the approved Header exactly. These tokens are a governed
   * bridge from the legacy Shell aliases to the canonical Design System. */
  --cc-portal-header-content-max: var(--cc-portal-frame-content-max, 1180px);
  --cc-portal-header-page-gutter: var(--cc-portal-frame-gutter, 32px);
  --cc-portal-header-min-height: 68px;
  --cc-portal-header-entry-gap: var(--cc-portal-frame-entry-gap, 24px);
  --cc-portal-header-padding: 12px 18px;
  --cc-portal-header-grid-gap: 18px;
  --cc-portal-header-z-index: var(--cc-shell-portal-header-z, 320);
  --cc-portal-header-radius: var(--cc-shell-radius, 18px);

  /* Surfaces and text continue to honor the approved appearance adapter. */
  --cc-portal-header-surface: var(--cc-shell-surface, rgba(255, 255, 255, .92));
  --cc-portal-header-border-color: var(--cc-shell-border, rgba(78, 110, 50, .16));
  --cc-portal-header-shadow: var(--conecta-shadow-soft, var(--cc-elevation-shell-compat, 0 14px 36px rgba(40, 56, 38, .08)));
  --cc-portal-header-primary: var(--cc-shell-primary, #4E6E32);
  --cc-portal-header-text: var(--cc-shell-text, #525751);

  /* Header-specific typography preserves the homologated values. */
  --cc-portal-header-title-font: Montserrat, var(--conecta-title-font, sans-serif);
  --cc-portal-header-heading-size: 16px;
  --cc-portal-header-emphasis-weight: 600;
  --cc-portal-header-nav-size: var(--conecta-nav-font-size, 13px);
  --cc-portal-header-interface-size: 13px;

  /* Primary navigation and utility controls. */
  --cc-portal-header-item-height: var(--cc-control-height, 40px);
  --cc-portal-header-nav-padding-inline: 13px;
  --cc-portal-header-pill-radius: 999px;
  --cc-portal-header-control-height: 42px;
  --cc-portal-header-control-padding-inline: 16px;
  --cc-portal-header-control-border: rgba(78, 110, 50, .18);
  --cc-portal-header-control-surface: rgba(255, 255, 255, .58);
  --cc-portal-header-interaction-surface: rgba(78, 110, 50, .075);
  --cc-portal-header-interaction-surface-strong: rgba(78, 110, 50, .08);
  --cc-portal-header-interaction-border: rgba(78, 110, 50, .03);
  --cc-portal-header-interaction-border-strong: rgba(78, 110, 50, .30);
  --cc-portal-header-transition-colors: background-color .18s ease, color .18s ease, border-color .18s ease;
  --cc-portal-header-transition-surface: background-color .18s ease, border-color .18s ease;

  /* Mobile Header geometry keeps the approved breakpoint and proportions. */
  --cc-portal-header-mobile-min-height: 64px;
  --cc-portal-header-mobile-padding: 10px 12px;
  --cc-portal-header-mobile-grid-gap: 8px;
  --cc-portal-header-mobile-radius: 16px;
}

/* source: design-system/tokens/portal-footer.css */

/* Conecta Frontend Shell — canonical Portal Footer token contract. */
:root {
  /* Vertical rhythm and outer surface preserve the approved Footer exactly. */
  --cc-portal-footer-content-gap: var(--cc-portal-frame-footer-gap, var(--conecta-global-footer-gap, 84px));
  --cc-portal-footer-content-gap-mobile: var(--cc-portal-frame-footer-gap, var(--conecta-global-footer-gap-mobile, 52px));
  --cc-portal-footer-surface: #3C5937;
  --cc-portal-footer-text: #FFFFFF;
  --cc-portal-footer-accent: #D6A900;
  --cc-portal-footer-border-subtle: rgba(255, 255, 255, .18);
  --cc-portal-footer-mobile-heading-border: rgba(214, 235, 198, .42);
  --cc-portal-footer-mobile-heading-padding-bottom: 8px;

  /* Container and primary grid. */
  --cc-portal-footer-content-max: var(--cc-portal-frame-content-max, 1180px);
  --cc-portal-footer-page-gutter: var(--cc-portal-frame-gutter, 32px);
  --cc-portal-footer-inner-padding: 46px 0 26px;
  --cc-portal-footer-inner-columns: minmax(310px, 1.18fr) minmax(0, 2.45fr);
  --cc-portal-footer-inner-gap: 56px;
  --cc-portal-footer-brand-gap: 14px;
  --cc-portal-footer-columns: repeat(4, minmax(0, 1fr));
  --cc-portal-footer-columns-gap: 38px;

  /* Brand and logo. The administrator-controlled width remains authoritative. */
  --cc-portal-footer-logo-width: var(--conecta-global-footer-logo-width, 180px);
  --cc-portal-footer-logo-max-width: 320px;
  --cc-portal-footer-logo-max-height: 84px;
  --cc-portal-footer-logo-margin: 0 0 10px;
  --cc-portal-footer-placeholder-min-width: 122px;
  --cc-portal-footer-placeholder-min-height: 50px;
  --cc-portal-footer-placeholder-padding: 0 22px;
  --cc-portal-footer-placeholder-radius: 16px;
  --cc-portal-footer-placeholder-surface: rgba(255, 255, 255, .11);

  /* Typography preserves the homologated Footer while becoming governed. */
  --cc-portal-footer-title-font: Montserrat, var(--conecta-title-font, sans-serif);
  --cc-portal-footer-text-font: "Segoe UI", Arial, sans-serif;
  --cc-portal-footer-title-size: 16px;
  --cc-portal-footer-title-margin: 0 0 16px;
  --cc-portal-footer-title-line-height: 1.35;
  --cc-portal-footer-body-size: 13px;
  --cc-portal-footer-legal-size: 12px;
  --cc-portal-footer-body-line-height: 1.55;
  --cc-portal-footer-link-line-height: 1.5;
  --cc-portal-footer-body-max-width: 360px;
  --cc-portal-footer-text-soft: rgba(255, 255, 255, .90);
  --cc-portal-footer-text-muted: rgba(255, 255, 255, .78);
  --cc-portal-footer-text-link: rgba(255, 255, 255, .88);
  --cc-portal-footer-text-bottom: rgba(255, 255, 255, .82);

  /* Social links, navigation and legal links. */
  --cc-portal-footer-social-gap: 12px;
  --cc-portal-footer-social-margin-top: 10px;
  --cc-portal-footer-social-control-size: 30px;
  --cc-portal-footer-social-icon-size: 19px;
  --cc-portal-footer-list-gap: 9px;
  --cc-portal-footer-link-underline-offset: -4px;
  --cc-portal-footer-link-underline-height: 1px;
  --cc-portal-footer-link-shift: 3px;
  --cc-portal-footer-pill-radius: 999px;
  --cc-portal-footer-transition-social: color .18s ease, transform .18s ease, opacity .18s ease;
  --cc-portal-footer-transition-link: color .18s ease, transform .18s ease;
  --cc-portal-footer-transition-underline: width .18s ease;

  /* Bottom row and responsive fallbacks. */
  --cc-portal-footer-bottom-gap: 20px;
  --cc-portal-footer-bottom-margin-top: 26px;
  --cc-portal-footer-bottom-padding-top: 20px;
  --cc-portal-footer-legal-gap: 12px;
  --cc-portal-footer-tablet-inner-gap: 32px;
  --cc-portal-footer-tablet-columns: repeat(2, minmax(0, 1fr));
  --cc-portal-footer-mobile-inner-padding: 34px 0 calc(24px + var(--cc-shell-mobile-safe-bottom, env(safe-area-inset-bottom, 0px)));
  --cc-portal-footer-mobile-inner-gap: 24px;
  --cc-portal-footer-mobile-columns-gap: 24px;
  --cc-portal-footer-mobile-bottom-gap: 10px;
  --cc-portal-footer-mobile-bottom-margin-top: 18px;
  --cc-portal-footer-mobile-bottom-padding-top: 18px;
}

@media (max-width: 430px) {
  :root {
    --cc-portal-footer-tablet-columns: 1fr;
  }
}