/* Apple / iOS-inspired theme overrides for Pico.css
   Reference: https://picocss.com/docs (variables API)
   These override Pico variables without modifying Pico sources. */

/* Light (Default) */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    /* Surfaces & text */
    --background-color: #ffffff;              /* iOS systemBackground (light) */
    --color: #1d1d1f;                         /* iOS label color (dark text) */
    --h1-color: #000000;
    --h2-color: #1d1d1f;
    --h3-color: #1d1d1f;
    --h4-color: #3a3a3c;
    --h5-color: #3a3a3c;
    --h6-color: #6e6e73;
    --muted-color: #6e6e73;                   /* systemGray */
    --muted-border-color: #e5e5ea;            /* separator */

    /* Accent (systemOrange) */
    --primary: #ff9500;                       /* iOS systemOrange (light) */
    --primary-hover: #ff9f0a;                 /* iOS systemOrange (variant) */
    --primary-focus: rgba(255, 149, 0, 0.15);
    --primary-inverse: #ffffff;

    /* Secondary / Contrast */
    --secondary: #8e8e93;                     /* systemGray */
    --secondary-hover: #6e6e73;
    --secondary-focus: rgba(142, 142, 147, 0.15);
    --secondary-inverse: #ffffff;
    --contrast: #000000;
    --contrast-hover: #000000;
    --contrast-focus: rgba(0, 0, 0, 0.12);
    --contrast-inverse: #ffffff;

    /* Content */
    --mark-background-color: #fff2b2;
    --mark-color: #1d1d1f;
    --blockquote-border-color: #e5e5ea;
    --blockquote-footer-color: #6e6e73;
    --code-background-color: #f2f2f7;         /* systemGroupedBackground */
    --code-color: #6e6e73;

    /* Spacing overrides (reduce large vertical gaps) */
    --block-spacing-vertical: 1.25rem;
    --block-spacing-horizontal: 1rem;
    --typography-spacing-vertical: 1rem;

    /* Forms */
    --form-element-background-color: transparent;
    --form-element-border-color: #c7c7cc;     /* separator subtle */
    --form-element-color: var(--color);
    --form-element-placeholder-color: #8e8e93;
    --form-element-active-background-color: transparent;
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --form-element-disabled-background-color: #f2f2f7;
    --form-element-disabled-border-color: #c7c7cc;
    --switch-background-color: #e5e5ea;

    /* Ranges, tables, progress */
    --range-border-color: #f2f2f7;
    --range-active-border-color: #e5e5ea;
    --table-border-color: #e5e5ea;
    --table-row-stripped-background-color: #f7f7f9;
    --progress-background-color: #e5e5ea;
    --progress-color: var(--primary);

    /* Cards / Dropdowns / Modals */
    --card-background-color: #ffffff;
    --card-border-color: #e5e5ea;
    --dropdown-background-color: #ffffff;
    --dropdown-border-color: #e5e5ea;
    --dropdown-color: var(--color);
    --dropdown-hover-background-color: #f2f2f7;
    --modal-overlay-background-color: rgba(0, 0, 0, 0.4);
}

/* Dark (Auto) */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces & text */
    --background-color: #000000;              /* iOS systemBackground (dark) */
    --color: #f2f2f7;                         /* iOS label (light text) */
    --h1-color: #ffffff;
    --h2-color: #f2f2f7;
    --h3-color: #e5e5ea;
    --h4-color: #d1d1d6;
    --h5-color: #c7c7cc;
    --h6-color: #aeaeb2;
    --muted-color: #8e8e93;                   /* systemGray */
    --muted-border-color: #2c2c2e;            /* separator */

    /* Accent (systemOrange) */
    --primary: #ff9f0a;                       /* iOS systemOrange (dark) */
    --primary-hover: #ffb340;
    --primary-focus: rgba(255, 159, 10, 0.35);
    --primary-inverse: #ffffff;

    /* Secondary / Contrast */
    --secondary: #8e8e93;
    --secondary-hover: #aeaeb2;
    --secondary-focus: rgba(142, 142, 147, 0.25);
    --secondary-inverse: #000000;
    --contrast: #ffffff;
    --contrast-hover: #ffffff;
    --contrast-focus: rgba(142, 142, 147, 0.25);
    --contrast-inverse: #000000;

    /* Content */
    --mark-background-color: #3a3a3c;
    --mark-color: #ffffff;
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);
    --code-background-color: #1c1c1e;         /* iOS secondarySystemBackground */
    --code-color: #8e8e93;

    /* Spacing overrides (reduce large vertical gaps) */
    --block-spacing-vertical: 1.25rem;
    --block-spacing-horizontal: 1rem;
    --typography-spacing-vertical: 1rem;

    /* Forms */
    --form-element-background-color: #1c1c1e;
    --form-element-border-color: #3a3a3c;
    --form-element-color: var(--color);
    --form-element-placeholder-color: #8e8e93;
    --form-element-active-background-color: #1c1c1e;
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --form-element-disabled-background-color: #2c2c2e;
    --form-element-disabled-border-color: #3a3a3c;
    --switch-background-color: #3a3a3c;

    /* Ranges, tables, progress */
    --range-border-color: #2c2c2e;
    --range-active-border-color: #3a3a3c;
    --table-border-color: var(--muted-border-color);
    --table-row-stripped-background-color: #1c1c1e;
    --progress-background-color: #2c2c2e;
    --progress-color: var(--primary);

    /* Cards / Dropdowns / Modals */
    --card-background-color: #1c1c1e;
    --card-border-color: #2c2c2e;
    --dropdown-background-color: #1c1c1e;
    --dropdown-border-color: #2c2c2e;
    --dropdown-color: var(--color);
    --dropdown-hover-background-color: #2c2c2e;
    --modal-overlay-background-color: rgba(0, 0, 0, 0.6);
  }
}

/* Dark (Forced) */
[data-theme="dark"] {
    --background-color: #000000;
    --color: #f2f2f7;
    --h1-color: #ffffff;
    --h2-color: #f2f2f7;
    --h3-color: #e5e5ea;
    --h4-color: #d1d1d6;
    --h5-color: #c7c7cc;
    --h6-color: #aeaeb2;
    --muted-color: #8e8e93;
    --muted-border-color: #2c2c2e;
    --primary: #ff9f0a;
    --primary-hover: #ffb340;
    --primary-focus: rgba(255, 159, 10, 0.35);
    --primary-inverse: #ffffff;
    --secondary: #8e8e93;
    --secondary-hover: #aeaeb2;
    --secondary-focus: rgba(142, 142, 147, 0.25);
    --secondary-inverse: #000000;
    --contrast: #ffffff;
    --contrast-hover: #ffffff;
    --contrast-focus: rgba(142, 142, 147, 0.25);
    --contrast-inverse: #000000;
    --mark-background-color: #3a3a3c;
    --mark-color: #ffffff;
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);
    --code-background-color: #1c1c1e;
    --code-color: #8e8e93;
    /* Spacing overrides (reduce large vertical gaps) */
    --block-spacing-vertical: 1.25rem;
    --block-spacing-horizontal: 1rem;
    --typography-spacing-vertical: 1rem;
    --form-element-background-color: #1c1c1e;
    --form-element-border-color: #3a3a3c;
    --form-element-color: var(--color);
    --form-element-placeholder-color: #8e8e93;
    --form-element-active-background-color: #1c1c1e;
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --form-element-disabled-background-color: #2c2c2e;
    --form-element-disabled-border-color: #3a3a3c;
    --switch-background-color: #3a3a3c;
    --range-border-color: #2c2c2e;
    --range-active-border-color: #3a3a3c;
    --table-border-color: var(--muted-border-color);
    --table-row-stripped-background-color: #1c1c1e;
    --progress-background-color: #2c2c2e;
    --progress-color: var(--primary);
    --card-background-color: #1c1c1e;
    --card-border-color: #2c2c2e;
    --dropdown-background-color: #1c1c1e;
    --dropdown-border-color: #2c2c2e;
    --dropdown-color: var(--color);
    --dropdown-hover-background-color: #2c2c2e;
    --modal-overlay-background-color: rgba(0, 0, 0, 0.6);
}

/* Layout fine-tuning */
header.container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

header.container h1 {
    margin: 0;
}

main.container {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

footer.container {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}