/* =========================================================
 * figma-needed.css
 *
 * Tokens that are not yet in the Figma file but are needed
 * to drive default component styles in the application.
 *
 * Once a token is added to Figma and exported via
 * FigmaDesignSync.ps1, remove it from here — it will be
 * covered by figma-tokens.css.
 * ========================================================= */

:root {
  --text-hover: var(--grey-900);

  /* --- Card --- */
  --card-bg: var(--surface-root-card);
  --card-border-color: var(--border-light);
  --card-border-width: var(--border-card);            /* 1px — from figma-tokens */
  --card-border-radius: var(--radius-rounded);
  --card-hover-bg: var(--surface-200);
  --card-hover-border-color: var(--border-medium);

  --card-primary-hover-bg: var(--primary-lighter);
  --card-primary-hover-border-color: var(--border-primary-dark);
  --card-primary-header-bg: var(--primary-lighter);
  --card-primary-footer-bg: var(--primary-lightest);

  --card-outline-primary-bg: var(--surface-root-card);
  --card-outline-primary-border-color: var(--border-primary);
  --card-outline-primary-hover-bg: var(--primary-lightest);
  --card-outline-primary-hover-border-color: var(--border-primary-dark);
  --card-outline-primary-header-bg: var(--primary-lightest);
  --card-outline-primary-footer-bg: var(--surface-100);

  --card-secondary-bg: var(--secondary-lightest);
  --card-secondary-border-color: var(--border-secondary);
  --card-secondary-hover-bg: var(--secondary-lighter);
  --card-secondary-hover-border-color: var(--secondary-default);
  --card-secondary-header-bg: var(--secondary-lighter);
  --card-secondary-footer-bg: var(--secondary-lightest);

  --card-outline-secondary-bg: var(--surface-root-card);
  --card-outline-secondary-border-color: var(--border-secondary);
  --card-outline-secondary-hover-bg: var(--secondary-lightest);
  --card-outline-secondary-hover-border-color: var(--secondary-default);
  --card-outline-secondary-header-bg: var(--secondary-lightest);
  --card-outline-secondary-footer-bg: var(--surface-100);

  /* Semantic card variants */
  --card-warning-bg: var(--warning-lightest);
  --card-warning-border-color: var(--warning-default);
  --card-warning-hover-bg: var(--warning-lighter);
  --card-warning-hover-border-color: var(--warning-dark);
  --card-warning-header-bg: var(--warning-lighter);
  --card-warning-footer-bg: var(--warning-lightest);

  --card-info-bg: var(--info-lightest);
  --card-info-border-color: var(--info-default);
  --card-info-hover-bg: var(--info-lighter);
  --card-info-hover-border-color: var(--info-dark);
  --card-info-header-bg: var(--info-lighter);
  --card-info-footer-bg: var(--info-lightest);

  --card-success-bg: var(--success-lightest);
  --card-success-border-color: var(--success-default);
  --card-success-hover-bg: var(--success-lighter);
  --card-success-hover-border-color: var(--success-dark);
  --card-success-header-bg: var(--success-lighter);
  --card-success-footer-bg: var(--success-lightest);

  --card-danger-bg: var(--error-lightest);
  --card-danger-border-color: var(--error-default);
  --card-danger-hover-bg: var(--error-lighter);
  --card-danger-hover-border-color: var(--error-dark);
  --card-danger-header-bg: var(--error-lighter);
  --card-danger-footer-bg: var(--error-lightest);

  --card-header-bg: var(--surface-200);
  --card-header-border-color: var(--border-light);
  --card-header-font-weight: var(--font-weight-semibold);
  --card-footer-bg: var(--surface-100);
  --card-footer-border-color: var(--border-light);

  --card-title-color: var(--text-heading-color);
  --card-title-font-size: 1.0rem;
  --card-title-font-weight: var(--font-weight-semibold);

  /* --- Button sizing --- */
  --button-border-radius: var(--radius-rounded);   /* 6px — pending Figma */
  --button-padding-y: 0.5rem;
  --button-padding-x: 1.25rem;
  --button-sm-padding-y: 0.25rem;
  --button-sm-padding-x: 0.75rem;
  --button-font-weight: var(--font-weight-bold);
  --button-letter-spacing: 0.05em;

  /* --- Contrast / white button (for buttons on dark hero surfaces) --- */
  --button-contrast-white-bg: var(--bw-neutral-white);
  --button-contrast-white-bg-hover: var(--grey-100);
  --button-contrast-white-text: var(--text-heading-color);

  /* --- Heading colour --- */
  --heading-color: var(--text-heading-color);
  --heading-color-light: var(--text-color-contrast);

/* --- Bootstrap-convention aliases for outline button variables ---
   figma-tokens.css exports these as --button-{colour}-outline-* but Bootstrap
   convention places the modifier first: --button-outline-{colour}-*.
   These aliases bridge the gap until Figma is updated to export the correct names,
   at which point these can be removed and figma-tokens.css will have the right names. */

  /* Primary outline */
  --button-outline-primary-border: var(--button-primary-outline-border);
  --button-outline-primary-border-rgb: var(--button-primary-outline-border-rgb);
  --button-outline-primary-border-hover: var(--button-primary-outline-border-hover);
  --button-outline-primary-border-hover-rgb: var(--button-primary-outline-border-hover-rgb);
  --button-outline-primary-text: var(--button-primary-outline-text);
  --button-outline-primary-text-rgb: var(--button-primary-outline-text-rgb);
  --button-outline-primary-text-hover: var(--button-primary-outline-text-hover);
  --button-outline-primary-text-hover-rgb: var(--button-primary-outline-text-hover-rgb);
  --button-outline-primary-bg: var(--button-primary-outline-bg);
  --button-outline-primary-bg-hover: var(--button-primary-outline-bg-hover);
  --button-outline-primary-bg-hover-rgb: var(--button-primary-outline-bg-hover-rgb);

  /* Secondary outline */
  --button-outline-secondary-border: var(--button-secondary-outline-border);
  --button-outline-secondary-border-rgb: var(--button-secondary-outline-border-rgb);
  --button-outline-secondary-border-hover: var(--button-secondary-outline-border-hover);
  --button-outline-secondary-border-hover-rgb: var(--button-secondary-outline-border-hover-rgb);
  --button-outline-secondary-text: var(--button-secondary-outline-text);
  --button-outline-secondary-text-rgb: var(--button-secondary-outline-text-rgb);
  --button-outline-secondary-text-hover: var(--button-secondary-outline-text-hover);
  --button-outline-secondary-text-hover-rgb: var(--button-secondary-outline-text-hover-rgb);
  --button-outline-secondary-bg: var(--button-secondary-outline-bg);
  --button-outline-secondary-bg-hover: var(--button-secondary-outline-bg-hover);
  --button-outline-secondary-bg-hover-rgb: var(--button-secondary-outline-bg-hover-rgb);

  /* Tertiary outline */
  --button-outline-tertiary-border: var(--button-tertiary-outline-border);
  --button-outline-tertiary-border-rgb: var(--button-tertiary-outline-border-rgb);
  --button-outline-tertiary-border-hover: var(--button-tertiary-outline-border-hover);
  --button-outline-tertiary-border-hover-rgb: var(--button-tertiary-outline-border-hover-rgb);
  --button-outline-tertiary-text: var(--button-tertiary-outline-text);
  --button-outline-tertiary-text-rgb: var(--button-tertiary-outline-text-rgb);
  --button-outline-tertiary-text-hover: var(--button-tertiary-outline-text-hover);
  --button-outline-tertiary-text-hover-rgb: var(--button-tertiary-outline-text-hover-rgb);
  --button-outline-tertiary-bg: var(--button-tertiary-outline-bg);
  --button-outline-tertiary-bg-hover: var(--button-tertiary-outline-bg-hover);
  --button-outline-tertiary-bg-hover-rgb: var(--button-tertiary-outline-bg-hover-rgb);

  /* --- Button focus rings (per button type, pending Figma) --- */
  --button-primary-focus-ring-inner: var(--primary-light);
  --button-primary-focus-ring-outer: var(--primary-lighter);

  --button-outline-primary-focus-ring-inner: var(--primary-light);
  --button-outline-primary-focus-ring-outer: var(--primary-lighter);

  --button-secondary-focus-ring-inner: var(--secondary-light);
  --button-secondary-focus-ring-outer: var(--secondary-lighter);

  --button-outline-secondary-focus-ring-inner: var(--secondary-light);
  --button-outline-secondary-focus-ring-outer: var(--secondary-lighter);

  /* --- Form focus ring --- */
  --form-focus-ring-inner: var(--primary-light);
  --form-focus-ring-outer: var(--primary-lighter);
  --form-focus-border-color: var(--border-medium);

  /*
   *  This should be in the primitives
   */

  /* --- Border radius --- */
  --radius-md: 8px;   /* between --radius-rounded (6px) and larger */

  /* --- Font weights --- */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Shadows --- */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);

  /* --- Overlay / backdrop colours --- */
  --overlay-backdrop:       rgba(0, 0, 0, 0.5);
  --overlay-backdrop-sm:    rgba(0, 0, 0, 0.4);
  --overlay-backdrop-light: rgba(22, 18, 28, 0.25);
  --hero-overlay:           rgba(0, 0, 0, 0.3);
  --hero-card-overlay:      rgba(2, 12, 30, 0.74);

  /* --- Page layout --- */
  --page-content-offset: 8rem;   /* top bar + breadcrumb height; used in min-height calcs */

  /* --- Form controls --- */
  --form-control-height: 2.375rem;  /* Bootstrap form control height: 1.5rem line-height + 0.75rem padding + 0.125rem borders */

  /* --- Report benchmark palette --- */
  --variety-profile-benchmark-ha-mine-1: var(--brand-grape-500);
  --variety-profile-benchmark-ha-mine-2: var(--brand-grape-300);

  --variety-profile-benchmark-ha-compare-1: var(--brand-light-blue-500);
  --variety-profile-benchmark-ha-compare-2: var(--brand-light-blue-300);  

  --annual-production-ha-mine: var(--tertiary-2-tertiary2-darker);
  --annual-production-ha-compare: var(--tertiary-4-tertiary3-dark);
}