/* ==========================================================================
   GLOBAL COLOR SCHEMES
   Usage: add class="jomi-schemeX" to a <section> or container
   ========================================================================== */

/* === SCHEME 1: Default Light === */
.jomi-scheme1 {
  background: var(--jomi-surface-page);
  color: var(--jomi-text-body);
}
.jomi-scheme1 h1,
.jomi-scheme1 h2,
.jomi-scheme1 h3,
.jomi-scheme1 h4,
.jomi-scheme1 h5,
.jomi-scheme1 h6 {
  color: var(--jomi-text-heading);
}
.jomi-scheme1 a {
  color: var(--jomi-color-link);
  text-decoration: underline;
}
.jomi-scheme1 a:hover {
  color: var(--jomi-color-link-hover);
}

/* Forms (light) */
.jomi-scheme1 {
  --jomi-form-field-bg: #fff;
  --jomi-form-field-text: var(--jomi-text-body);
  --jomi-form-border-color: var(--jomi-color-border);
  --jomi-form-placeholder: color-mix(in srgb, var(--jomi-text-body) 45%, white);
  --jomi-form-accent: var(--jomi-color-primary);
  --jomi-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jomi-form-accent) 25%, transparent);
  --jomi-form-button-bg: #fff;
  --jomi-form-button-fg: var(--jomi-form-accent);
  --jomi-form-button-border-color: var(--jomi-form-accent);
  --jomi-form-error-color: var(--jomi-color-accent);
}

/* Alerts (light) */
.jomi-scheme1 {
  --jomi-alert-bg: var(--jomi-surface-card);                /* #e4ecf0 */
  --jomi-alert-border: var(--jomi-color-border);
  --jomi-alert-text: var(--jomi-text-body);
  --jomi-alert-accent: var(--jomi-color-primary);
}

/* === SCHEME 2: Primary Navy Background (dark) === */
.jomi-scheme2 {
  background: var(--jomi-color-primary);          /* #1f5071 */
  color: var(--jomi-text-on-dark);
}
.jomi-scheme2 h1,
.jomi-scheme2 h2,
.jomi-scheme2 h3,
.jomi-scheme2 h4,
.jomi-scheme2 h5,
.jomi-scheme2 h6 {
  color: var(--jomi-text-on-dark);
}
.jomi-scheme2 a {
  color: var(--jomi-link-on-dark);
  text-decoration: underline;
}
.jomi-scheme2 a:hover {
  color: var(--jomi-link-on-dark-hover);
}

/* Forms on dark navy */
.jomi-scheme2 {
  --jomi-form-field-bg: #fff;
  --jomi-form-field-text: var(--jomi-text-body);
  --jomi-form-border-color: color-mix(in srgb, #fff 65%, var(--jomi-color-primary));
  --jomi-form-placeholder: color-mix(in srgb, var(--jomi-text-body) 45%, white);
  --jomi-form-accent: var(--jomi-color-accent);   /* orange pops on navy */
  --jomi-form-focus-ring: 0 0 0 3px color-mix(in srgb, #ffffff 50%, transparent);
  --jomi-form-button-bg: transparent;
  --jomi-form-button-fg: var(--jomi-form-accent);
  --jomi-form-button-border-color: var(--jomi-form-accent);
  --jomi-form-error-color: var(--jomi-color-accent);
}

/* Alerts on dark navy */
.jomi-scheme2 {
  --jomi-alert-bg: color-mix(in srgb, #ffffff 12%, var(--jomi-color-primary));
  --jomi-alert-border: color-mix(in srgb, #ffffff 55%, var(--jomi-color-primary));
  --jomi-alert-text: #fff;
  --jomi-alert-accent: var(--jomi-color-accent);  /* keep orange for emphasis */
}

/* === SCHEME 3: Secondary Grey-Blue Background (dark-ish) === */
.jomi-scheme3 {
  background: var(--jomi-color-secondary);        /* #5e8297 */
  color: var(--jomi-text-on-secondary);
}
.jomi-scheme3 h1,
.jomi-scheme3 h2,
.jomi-scheme3 h3,
.jomi-scheme3 h4,
.jomi-scheme3 h5,
.jomi-scheme3 h6 {
  color: var(--jomi-text-on-secondary);
}
.jomi-scheme3 a {
  color: var(--jomi-link-on-secondary);           /* better contrast than accent */
  text-decoration: underline;
}
.jomi-scheme3 a:hover {
  color: var(--jomi-link-on-secondary-hover);
}

/* Forms on grey-blue */
.jomi-scheme3 {
  --jomi-form-field-bg: #fff;
  --jomi-form-field-text: var(--jomi-text-body);
  --jomi-form-border-color: color-mix(in srgb, #fff 60%, var(--jomi-color-secondary));
  --jomi-form-placeholder: color-mix(in srgb, var(--jomi-text-body) 45%, white);
  --jomi-form-accent: var(--jomi-color-primary);  /* navy works better here */
  --jomi-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jomi-color-primary) 40%, transparent);
  --jomi-form-button-bg: transparent;
  --jomi-form-button-fg: var(--jomi-form-accent);
  --jomi-form-button-border-color: var(--jomi-form-accent);
  --jomi-form-error-color: color-mix(in srgb, var(--jomi-color-accent) 70%, white); /* lightened orange */
}

/* Alerts on grey-blue */
.jomi-scheme3 {
  --jomi-alert-bg: color-mix(in srgb, #ffffff 14%, var(--jomi-color-secondary));
  --jomi-alert-border: color-mix(in srgb, #ffffff 55%, var(--jomi-color-secondary));
  --jomi-alert-text: #fff;
  --jomi-alert-accent: var(--jomi-color-primary); /* navy inside alert */
}

/* === SCHEME 4: Accent (Orange-Red) Background === */
.jomi-scheme4 {
  background: var(--jomi-color-accent);           /* #ec5845 */
  color: var(--jomi-selection-text);              /* #111318 (from globals) */
}
.jomi-scheme4 h1,
.jomi-scheme4 h2,
.jomi-scheme4 h3,
.jomi-scheme4 h4,
.jomi-scheme4 h5,
.jomi-scheme4 h6 {
  color: var(--jomi-selection-text);
}
.jomi-scheme4 a {
  color: var(--jomi-selection-text);
  text-decoration: underline;
}
.jomi-scheme4 a:hover {
  color: #fff;                                    /* high-contrast hover on accent */
}

/* Forms on accent background */
.jomi-scheme4 {
  --jomi-form-field-bg: #fff;
  --jomi-form-field-text: var(--jomi-text-body);
  --jomi-form-border-color: color-mix(in srgb, var(--jomi-color-accent) 35%, #ffffff);
  --jomi-form-placeholder: color-mix(in srgb, var(--jomi-text-body) 45%, white);
  --jomi-form-accent: var(--jomi-color-primary);  /* navy contrasts orange */
  --jomi-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jomi-color-primary) 35%, transparent);
  --jomi-form-button-bg: transparent;
  --jomi-form-button-fg: var(--jomi-color-primary);
  --jomi-form-button-border-color: var(--jomi-color-primary);
  --jomi-form-error-color: #4a0c00;               /* darker red-brown reads on orange */
}

/* Alerts on accent background */
.jomi-scheme4 {
  --jomi-alert-bg: color-mix(in srgb, #ffffff 16%, var(--jomi-color-accent));
  --jomi-alert-border: color-mix(in srgb, #ffffff 55%, var(--jomi-color-accent));
  --jomi-alert-text: var(--jomi-selection-text);  /* dark text in alert */
  --jomi-alert-accent: var(--jomi-color-primary); /* navy accents inside alert */
}

/* === SCHEME 5: Muted Navy Mix (dark) === */
.jomi-scheme5 {
  background: color-mix(in srgb, var(--jomi-color-primary) 80%, black);
  color: var(--jomi-text-on-dark);
}
.jomi-scheme5 h1,
.jomi-scheme5 h2,
.jomi-scheme5 h3,
.jomi-scheme5 h4,
.jomi-scheme5 h5,
.jomi-scheme5 h6 {
  color: var(--jomi-text-on-dark);
}
.jomi-scheme5 a {
  color: var(--jomi-link-on-dark);
  text-decoration: underline;
}
.jomi-scheme5 a:hover {
  color: var(--jomi-link-on-dark-hover);
}

/* Forms on muted navy (dark) */
.jomi-scheme5 {
  --jomi-form-field-bg: #fff;
  --jomi-form-field-text: var(--jomi-text-body);
  --jomi-form-border-color: color-mix(in srgb, #fff 65%, var(--jomi-color-primary));
  --jomi-form-placeholder: color-mix(in srgb, var(--jomi-text-body) 45%, white);
  --jomi-form-accent: var(--jomi-color-accent);
  --jomi-form-focus-ring: 0 0 0 3px color-mix(in srgb, #ffffff 50%, transparent);
  --jomi-form-button-bg: transparent;
  --jomi-form-button-fg: var(--jomi-form-accent);
  --jomi-form-button-border-color: var(--jomi-form-accent);
  --jomi-form-error-color: var(--jomi-color-accent);
}

/* Alerts on muted navy */
.jomi-scheme5 {
  --jomi-alert-bg: color-mix(in srgb, #ffffff 10%, var(--jomi-color-primary));
  --jomi-alert-border: color-mix(in srgb, #ffffff 55%, var(--jomi-color-primary));
  --jomi-alert-text: #fff;
  --jomi-alert-accent: var(--jomi-color-accent);  /* orange accents pop */
}

/* === SCHEME 6: Accent Headings on Light Surface === */
.jomi-scheme6 {
  background: var(--jomi-surface-card);      /* #e4ecf0 */
  color: var(--jomi-text-body);
}
.jomi-scheme6 h1,
.jomi-scheme6 h2,
.jomi-scheme6 h3,
.jomi-scheme6 h4,
.jomi-scheme6 h5,
.jomi-scheme6 h6 {
  color: var(--jomi-color-accent);           /* orange-red headings */
}
.jomi-scheme6 a {
  color: var(--jomi-color-link);             /* navy link */
  text-decoration: underline;
}
.jomi-scheme6 a:hover {
  color: var(--jomi-color-link-hover);       /* darker navy hover */
}

/* Forms on light card */
.jomi-scheme6 {
  --jomi-form-field-bg: #fff;
  --jomi-form-field-text: var(--jomi-text-body);
  --jomi-form-border-color: color-mix(in srgb, var(--jomi-color-border) 85%, #000);
  --jomi-form-placeholder: color-mix(in srgb, var(--jomi-text-body) 45%, white);
  --jomi-form-accent: var(--jomi-color-primary);
  --jomi-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jomi-form-accent) 25%, transparent);
  --jomi-form-button-bg: #fff;
  --jomi-form-button-fg: var(--jomi-form-accent);
  --jomi-form-button-border-color: var(--jomi-form-accent);
  --jomi-form-error-color: var(--jomi-color-accent);
}

/* Alerts on light card */
.jomi-scheme6 {
  --jomi-alert-bg: #fff;
  --jomi-alert-border: color-mix(in srgb, var(--jomi-color-border) 85%, #000);
  --jomi-alert-text: var(--jomi-text-body);
  --jomi-alert-accent: var(--jomi-color-primary);
}

/* === SCHEME 7: Inverted Accent Background with Navy Headings === */
.jomi-scheme7 {
  background: var(--jomi-color-accent);      /* orange-red */
  color: #fff;
}
.jomi-scheme7 h1,
.jomi-scheme7 h2,
.jomi-scheme7 h3,
.jomi-scheme7 h4,
.jomi-scheme7 h5,
.jomi-scheme7 h6 {
  color: var(--jomi-color-primary);          /* navy headings for structure */
}
.jomi-scheme7 a {
  color: var(--jomi-color-secondary);        /* grey-blue links for contrast */
  text-decoration: underline;
}
.jomi-scheme7 a:hover {
  color: #fff;
}

/* Forms on inverted accent */
.jomi-scheme7 {
  --jomi-form-field-bg: #fff;
  --jomi-form-field-text: var(--jomi-text-body);
  --jomi-form-border-color: color-mix(in srgb, var(--jomi-color-accent) 35%, #ffffff);
  --jomi-form-placeholder: color-mix(in srgb, var(--jomi-text-body) 45%, white);
  --jomi-form-accent: var(--jomi-color-primary);  /* navy for contrast */
  --jomi-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jomi-color-primary) 35%, transparent);
  --jomi-form-button-bg: transparent;
  --jomi-form-button-fg: var(--jomi-color-primary);
  --jomi-form-button-border-color: var(--jomi-color-primary);
  --jomi-form-error-color: #4a0c00;
}

/* Alerts on inverted accent */
.jomi-scheme7 {
  --jomi-alert-bg: color-mix(in srgb, #ffffff 18%, var(--jomi-color-accent));
  --jomi-alert-border: color-mix(in srgb, #ffffff 55%, var(--jomi-color-accent));
  --jomi-alert-text: var(--jomi-selection-text);  /* dark text */
  --jomi-alert-accent: var(--jomi-color-primary); /* navy accents */
}