/*
 * ~offFeed brand, appearance, typography and accessibility tokens.
 *
 * Application code should consume the semantic aliases at the bottom of this
 * file. The numbered palette values remain the stable brand palette.
 *
 * An effective theme scope must set both attributes, for example:
 *   <main data-theme="warm" data-appearance="dark">
 */

:root,
[data-theme="calm"] {
  --offfeed-1: #2F5F87;
  --offfeed-2: #5F88B2;
  --offfeed-3: #9BB7D1;
  --offfeed-4: #DCE6EF;

  --offfeed-light-page: #FFFFFF;
  --offfeed-light-surface: #FFFFFF;
  --offfeed-light-surface-subtle: #DCE6EF;
  --offfeed-light-text-primary: #182631;
  --offfeed-light-text-secondary: #4F5D68;
  --offfeed-light-accent: #2F5F87;
  --offfeed-light-on-accent: #FFFFFF;
  --offfeed-light-border-subtle: #9BB7D1;
  --offfeed-light-mark-top: #5F88B2;
  --offfeed-light-mark-bottom: #2F5F87;

  --offfeed-dark-page: #0F161D;
  --offfeed-dark-surface: #16222C;
  --offfeed-dark-surface-subtle: #1D2D3A;
  --offfeed-dark-text-primary: #EAF0F5;
  --offfeed-dark-text-secondary: #A7B6C3;
  --offfeed-dark-accent: #AFC8DE;
  --offfeed-dark-on-accent: #0F161D;
  --offfeed-dark-border-subtle: #334758;
  --offfeed-dark-mark-top: #9BB7D1;
  --offfeed-dark-mark-bottom: #5F88B2;
}

[data-theme="nature"] {
  --offfeed-1: #355846;
  --offfeed-2: #6F8774;
  --offfeed-3: #A8B6A8;
  --offfeed-4: #E1E5DE;

  --offfeed-light-page: #FFFFFF;
  --offfeed-light-surface: #FFFFFF;
  --offfeed-light-surface-subtle: #E1E5DE;
  --offfeed-light-text-primary: #1E2A23;
  --offfeed-light-text-secondary: #506057;
  --offfeed-light-accent: #355846;
  --offfeed-light-on-accent: #FFFFFF;
  --offfeed-light-border-subtle: #A8B6A8;
  --offfeed-light-mark-top: #6F8774;
  --offfeed-light-mark-bottom: #355846;

  --offfeed-dark-page: #101713;
  --offfeed-dark-surface: #17221B;
  --offfeed-dark-surface-subtle: #213027;
  --offfeed-dark-text-primary: #EDF1ED;
  --offfeed-dark-text-secondary: #ACB8AF;
  --offfeed-dark-accent: #B9C6B8;
  --offfeed-dark-on-accent: #101713;
  --offfeed-dark-border-subtle: #3A4B3F;
  --offfeed-dark-mark-top: #A8B6A8;
  --offfeed-dark-mark-bottom: #6F8774;
}

[data-theme="warm"] {
  --offfeed-1: #A94F35;
  --offfeed-2: #D17652;
  --offfeed-3: #E5A98F;
  --offfeed-4: #F3DDD2;

  --offfeed-light-page: #FFFFFF;
  --offfeed-light-surface: #FFFFFF;
  --offfeed-light-surface-subtle: #F3DDD2;
  --offfeed-light-text-primary: #2A211F;
  --offfeed-light-text-secondary: #665751;
  --offfeed-light-accent: #8D3F2B;
  --offfeed-light-on-accent: #FFFFFF;
  --offfeed-light-border-subtle: #E5A98F;
  --offfeed-light-mark-top: #D17652;
  --offfeed-light-mark-bottom: #A94F35;

  --offfeed-dark-page: #1A1210;
  --offfeed-dark-surface: #261A16;
  --offfeed-dark-surface-subtle: #34231D;
  --offfeed-dark-text-primary: #F6EEEA;
  --offfeed-dark-text-secondary: #C8AEA3;
  --offfeed-dark-accent: #F0B9A2;
  --offfeed-dark-on-accent: #1A1210;
  --offfeed-dark-border-subtle: #5A382D;
  --offfeed-dark-mark-top: #E5A98F;
  --offfeed-dark-mark-bottom: #D17652;
}

[data-theme="neutral"] {
  --offfeed-1: #272B2E;
  --offfeed-2: #60676D;
  --offfeed-3: #9DA3A8;
  --offfeed-4: #E2E5E7;

  --offfeed-light-page: #FFFFFF;
  --offfeed-light-surface: #FFFFFF;
  --offfeed-light-surface-subtle: #E2E5E7;
  --offfeed-light-text-primary: #111315;
  --offfeed-light-text-secondary: #596067;
  --offfeed-light-accent: #272B2E;
  --offfeed-light-on-accent: #FFFFFF;
  --offfeed-light-border-subtle: #9DA3A8;
  --offfeed-light-mark-top: #60676D;
  --offfeed-light-mark-bottom: #272B2E;

  --offfeed-dark-page: #111315;
  --offfeed-dark-surface: #1A1D20;
  --offfeed-dark-surface-subtle: #24282B;
  --offfeed-dark-text-primary: #F1F3F4;
  --offfeed-dark-text-secondary: #B4BAC0;
  --offfeed-dark-accent: #C7CDD1;
  --offfeed-dark-on-accent: #111315;
  --offfeed-dark-border-subtle: #41474C;
  --offfeed-dark-mark-top: #9DA3A8;
  --offfeed-dark-mark-bottom: #60676D;
}

[data-theme="soft"] {
  --offfeed-1: #9B8B76;
  --offfeed-2: #C8B9A4;
  --offfeed-3: #E2D8C9;
  --offfeed-4: #F4EFE8;

  --offfeed-light-page: #FFFFFF;
  --offfeed-light-surface: #FFFFFF;
  --offfeed-light-surface-subtle: #F4EFE8;
  --offfeed-light-text-primary: #29251F;
  --offfeed-light-text-secondary: #655F56;
  --offfeed-light-accent: #655A4C;
  --offfeed-light-on-accent: #FFFFFF;
  --offfeed-light-border-subtle: #E2D8C9;
  --offfeed-light-mark-top: #C8B9A4;
  --offfeed-light-mark-bottom: #9B8B76;

  --offfeed-dark-page: #171410;
  --offfeed-dark-surface: #211D18;
  --offfeed-dark-surface-subtle: #2E2821;
  --offfeed-dark-text-primary: #F6F1EA;
  --offfeed-dark-text-secondary: #C6BAAC;
  --offfeed-dark-accent: #DDD0BF;
  --offfeed-dark-on-accent: #171410;
  --offfeed-dark-border-subtle: #51473A;
  --offfeed-dark-mark-top: #E2D8C9;
  --offfeed-dark-mark-bottom: #C8B9A4;
}

/* Calm / Focus in light appearance is the application default. */
:root,
[data-theme][data-appearance="light"] {
  color-scheme: light;
  --offfeed-page: var(--offfeed-light-page);
  --offfeed-surface: var(--offfeed-light-surface);
  --offfeed-surface-subtle: var(--offfeed-light-surface-subtle);
  --offfeed-text-primary: var(--offfeed-light-text-primary);
  --offfeed-text-secondary: var(--offfeed-light-text-secondary);
  --offfeed-accent: var(--offfeed-light-accent);
  --offfeed-on-accent: var(--offfeed-light-on-accent);
  --offfeed-border-subtle: var(--offfeed-light-border-subtle);
  --offfeed-control-border: var(--offfeed-light-text-secondary);
  --offfeed-focus-ring: var(--offfeed-light-accent);
  --offfeed-mark-top: var(--offfeed-light-mark-top);
  --offfeed-mark-bottom: var(--offfeed-light-mark-bottom);

  /* System states stay recognisable across every colour theme. */
  --offfeed-error: #922D2D;
  --offfeed-error-surface: #F7EAEA;
  --offfeed-warning: #765000;
  --offfeed-warning-surface: #F8F2E6;
  --offfeed-success: #28633B;
  --offfeed-success-surface: #ECF3EE;

  --offfeed-shadow-raised: 0 0.5rem 1.5rem rgb(24 38 49 / 0.04);
  --offfeed-shadow-floating: 0 0.75rem 2rem rgb(24 38 49 / 0.16);
}

:root[data-appearance="dark"],
[data-theme][data-appearance="dark"] {
  color-scheme: dark;
  --offfeed-page: var(--offfeed-dark-page);
  --offfeed-surface: var(--offfeed-dark-surface);
  --offfeed-surface-subtle: var(--offfeed-dark-surface-subtle);
  --offfeed-text-primary: var(--offfeed-dark-text-primary);
  --offfeed-text-secondary: var(--offfeed-dark-text-secondary);
  --offfeed-accent: var(--offfeed-dark-accent);
  --offfeed-on-accent: var(--offfeed-dark-on-accent);
  --offfeed-border-subtle: var(--offfeed-dark-border-subtle);
  --offfeed-control-border: var(--offfeed-dark-text-secondary);
  --offfeed-focus-ring: var(--offfeed-dark-accent);
  --offfeed-mark-top: var(--offfeed-dark-mark-top);
  --offfeed-mark-bottom: var(--offfeed-dark-mark-bottom);

  --offfeed-error: #FFB4AB;
  --offfeed-error-surface: #382326;
  --offfeed-warning: #FFD18A;
  --offfeed-warning-surface: #332A1C;
  --offfeed-success: #A8DAB5;
  --offfeed-success-surface: #1D3025;

  --offfeed-shadow-raised: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18);
  --offfeed-shadow-floating: 0 0.75rem 2rem rgb(0 0 0 / 0.36);
}

/* Typography, reading dimensions, layout, shape and spacing. */
:root {
  --offfeed-font-ui: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --offfeed-font-reading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --offfeed-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --offfeed-reading-size: 1.125rem;
  --offfeed-reading-line-height: 1.65;
  --offfeed-reading-measure: 68ch;
  --offfeed-sidebar-width: 14rem;

  --offfeed-space-1: 0.25rem;
  --offfeed-space-2: 0.5rem;
  --offfeed-space-3: 0.75rem;
  --offfeed-space-4: 1rem;
  --offfeed-space-5: 1.25rem;
  --offfeed-space-6: 1.5rem;
  --offfeed-space-8: 2rem;
  --offfeed-space-12: 3rem;

  --offfeed-radius-control: 0.5rem;
  --offfeed-radius-panel: 0.625rem;
  --offfeed-panel-padding: 1.5rem;
  --offfeed-panel-padding-constrained: 1rem;
  --offfeed-section-gap: 1.25rem;
  --offfeed-disabled-opacity: 0.52;

  /* Compatibility aliases retained for early components. */
  --offfeed-ink: var(--offfeed-text-primary);
  --offfeed-muted: var(--offfeed-text-secondary);
  --offfeed-paper: var(--offfeed-page);
}