/*
 * OSA Theme — Brand colors, wave textures, and visual identity
 * Extracted from preview.osa.io design system
 *
 * Layer this after pico.css and before application.css:
 *   stylesheet_link_tag "pico", "osa_theme", "application", ...
 */

/* ═══════════════════════════════════════════
   1. COLOR PALETTE
   ═══════════════════════════════════════════ */

:root {
  /* Navy — deep blue-greens (dark backgrounds, text) */
  --osa-navy-50:  #f7f8f9;
  --osa-navy-100: #dbe1e4;
  --osa-navy-200: #c0cbcf;
  --osa-navy-400: #8c9fa7;
  --osa-navy-500: #728a94;
  --osa-navy-600: #526f7b;
  --osa-navy-700: #325563;
  --osa-navy-800: #0a3344;
  --osa-navy-900: #031a24;

  /* Teal — brand accent (links, buttons, highlights) */
  --osa-teal-50:  #f0fafc;
  --osa-teal-100: #bee7f0;
  --osa-teal-200: #89d5e4;
  --osa-teal-300: #51c0d7;
  --osa-teal-400: #14aac9;
  --osa-teal-500: #0a93af;
  --osa-teal-600: #08758b;
  --osa-teal-700: #065869;
  --osa-teal-800: #03343e;
  --osa-teal-900: #021b20;

  /* Mist — muted blue-grays (backgrounds, borders, secondary text) */
  --osa-mist-50:  #f6f8f9;
  --osa-mist-100: #d7e2e6;
  --osa-mist-200: #b9ccd2;
  --osa-mist-300: #9cb7bf;
  --osa-mist-400: #7ea2ac;
  --osa-mist-500: #618d99;
  --osa-mist-600: #4c707a;
  --osa-mist-700: #39545b;

  /* Midnight — neutral dark grays (dark mode surfaces) */
  --osa-midnight-700: #2a2a2e;
  --osa-midnight-800: #1a1a1e;
  --osa-midnight-900: #111114;

  /* Red — errors, destructive actions */
  --osa-red-50:  #faf7f7;
  --osa-red-400: #ba9292;
  --osa-red-500: #aa7a79;
  --osa-red-800: #620b09;

  /* Font stacks — default is IBM Plex Mono, switchable via font-theme classes */
  --osa-font-sans: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --osa-font-heading: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --osa-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Override Pico font-family + lighten base weight for monospace */
  --pico-font-family: var(--osa-font-sans);
  --pico-font-family-sans-serif: var(--osa-font-sans);
  --pico-font-family-monospace: var(--osa-font-mono);
  --pico-font-weight: 300;
}

/* Headings — base rules */
h1, h2, h3 {
  font-family: var(--osa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h1 { font-weight: 300; }
h2 { font-weight: 300; }
h3 { font-weight: 400; }

/* ── Font theme: Atkinson Hyperlegible ─── */
html.font-atkinson {
  --osa-font-sans: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --osa-font-heading: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --osa-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --pico-font-weight: 400;
}
html.font-atkinson h1, html.font-atkinson h2, html.font-atkinson h3 {
  text-transform: none;
  letter-spacing: normal;
}
html.font-atkinson h1 { font-weight: 400; }
html.font-atkinson h2 { font-weight: 400; }
html.font-atkinson h3 { font-weight: 500; }

/* ── Font theme: Season ────────────────── */
html.font-season {
  --osa-font-sans: "Season Sans", system-ui, -apple-system, sans-serif;
  --osa-font-heading: "Season Mix", "Times New Roman", serif;
  --osa-font-mono: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  --pico-font-weight: 400;
}
html.font-season h1, html.font-season h2, html.font-season h3 {
  text-transform: none;
  letter-spacing: normal;
}
html.font-season h1 { font-weight: 300; }
html.font-season h2 { font-weight: 400; }
html.font-season h3 { font-weight: 400; }

/* ── Font theme: System UI ────────────────── */
html.font-system {
  --osa-font-sans: system-ui, -apple-system, sans-serif;
  --osa-font-heading: system-ui, -apple-system, sans-serif;
  --osa-font-mono: ui-monospace, SFMono-Regular, monospace;
  --pico-font-weight: 400;
}
html.font-system h1, html.font-system h2, html.font-system h3 {
  text-transform: none;
  letter-spacing: normal;
}
html.font-system h1 { font-weight: 500; }
html.font-system h2 { font-weight: 500; }
html.font-system h3 { font-weight: 600; }


/* ═══════════════════════════════════════════
   2. PICO OVERRIDES — LIGHT MODE
   ═══════════════════════════════════════════ */

:root:not([data-theme="dark"]) {
  /* Primary — teal accent */
  --pico-primary: var(--osa-teal-500);
  --pico-primary-hover: var(--osa-teal-600);
  --pico-primary-focus: rgba(10, 147, 175, 0.25);
  --pico-primary-background: var(--osa-teal-400);
  --pico-primary-inverse: #fff;

  /* Text */
  --pico-color: var(--osa-navy-800);
  --pico-h1-color: var(--osa-navy-900);
  --pico-h2-color: var(--osa-navy-800);
  --pico-h3-color: var(--osa-navy-800);
  --pico-h4-color: var(--osa-navy-700);
  --pico-h5-color: var(--osa-navy-700);
  --pico-h6-color: var(--osa-navy-600);
  --pico-muted-color: var(--osa-navy-500);
  --pico-secondary: var(--osa-mist-500);
  --pico-secondary-hover: var(--osa-mist-600);

  /* Surfaces */
  --pico-background-color: var(--osa-mist-50);
  --pico-card-background-color: #fff;
  --pico-card-sectioning-background-color: var(--osa-navy-50);

  /* Borders */
  --pico-muted-border-color: var(--osa-mist-200);

  /* Table */
  --pico-table-border-color: var(--osa-mist-200);
  --pico-table-row-stripped-background-color: var(--osa-mist-50);

  /* Logo */
  --osa-logo-text-color: #000;
}


/* ═══════════════════════════════════════════
   3. PICO OVERRIDES — DARK MODE
   Three triggers match Pico's own pattern:
   a) System preference (no data-theme set)
   b) Explicit data-theme="dark"
   ═══════════════════════════════════════════ */

/* 3a. System dark preference (no explicit toggle yet) */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: var(--osa-teal-300);
    --pico-primary-hover: var(--osa-teal-200);
    --pico-primary-focus: rgba(81, 192, 215, 0.25);
    --pico-primary-background: var(--osa-teal-500);
    --pico-primary-inverse: #fff;

    --pico-color: var(--osa-navy-100);
    --pico-h1-color: #fff;
    --pico-h2-color: #fff;
    --pico-h3-color: var(--osa-navy-100);
    --pico-h4-color: var(--osa-navy-200);
    --pico-h5-color: var(--osa-navy-200);
    --pico-h6-color: var(--osa-navy-200);
    --pico-muted-color: var(--osa-navy-400);
    --pico-secondary: var(--osa-mist-400);
    --pico-secondary-hover: var(--osa-mist-300);

    --pico-background-color: var(--osa-midnight-900);
    --pico-card-background-color: var(--osa-navy-800);
    --pico-card-sectioning-background-color: var(--osa-navy-900);

    --pico-muted-border-color: var(--osa-navy-700);

    --pico-table-border-color: var(--osa-navy-700);
    --pico-table-row-stripped-background-color: var(--osa-navy-900);

    --osa-logo-text-color: #fff;
  }
}

/* 3b. Explicit dark toggle */
[data-theme="dark"] {
  --pico-primary: var(--osa-teal-300);
  --pico-primary-hover: var(--osa-teal-200);
  --pico-primary-focus: rgba(81, 192, 215, 0.25);
  --pico-primary-background: var(--osa-teal-500);
  --pico-primary-inverse: #fff;

  --pico-color: var(--osa-navy-100);
  --pico-h1-color: #fff;
  --pico-h2-color: #fff;
  --pico-h3-color: var(--osa-navy-100);
  --pico-h4-color: var(--osa-navy-200);
  --pico-h5-color: var(--osa-navy-200);
  --pico-h6-color: var(--osa-navy-200);
  --pico-muted-color: var(--osa-navy-400);
  --pico-secondary: var(--osa-mist-400);
  --pico-secondary-hover: var(--osa-mist-300);

  --pico-background-color: var(--osa-midnight-900);
  --pico-card-background-color: var(--osa-navy-800);
  --pico-card-sectioning-background-color: var(--osa-navy-900);

  --pico-muted-border-color: var(--osa-navy-700);

  --pico-table-border-color: var(--osa-navy-700);
  --pico-table-row-stripped-background-color: var(--osa-navy-900);

  --osa-logo-text-color: #fff;
}


/* ═══════════════════════════════════════════
   4. WAVE TEXTURE SYSTEM
   Topographic wave patterns from OSA brand.
   Usage: add class to a container element, e.g.
     <section class="osa-waves--mist-50">
   ═══════════════════════════════════════════ */

.osa-waves--mist-50,
.osa-waves--mist-300,
.osa-waves--navy-700,
.osa-waves--navy-800,
.osa-waves--navy-900 {
  position: relative;
  overflow: hidden;
}

/* Pseudo-element: tiled wave pattern, rotated 45° for organic feel */
.osa-waves--mist-50::before,
.osa-waves--mist-300::before,
.osa-waves--navy-700::before,
.osa-waves--navy-800::before,
.osa-waves--navy-900::before {
  content: "";
  position: absolute;
  inset: -500%;
  z-index: 0;
  width: 1100%;
  height: 1100%;
  background-image: url("/assets/osa-textures/waves--mist-50-ded235b3.png");
  background-repeat: repeat;
  background-attachment: fixed;
  rotate: 45deg;
  pointer-events: none;
}

/* Content above the texture */
.osa-waves--mist-50 > *,
.osa-waves--mist-300 > *,
.osa-waves--navy-700 > *,
.osa-waves--navy-800 > *,
.osa-waves--navy-900 > * {
  position: relative;
  z-index: 1;
}

/* Variant-specific tiles */
.osa-waves--mist-300::before {
  background-image: url("/assets/osa-textures/waves--mist-300-ec27271e.png");
}

.osa-waves--navy-700::before {
  background-image: url("/assets/osa-textures/waves--navy-700-6b2be6ef.png");
}

.osa-waves--navy-800::before {
  background-image: url("/assets/osa-textures/waves--navy-800-e1ecbde2.png");
}

.osa-waves--navy-900::before {
  background-image: url("/assets/osa-textures/waves--navy-900-2eb84ea5.png");
}

/* Convenience combos: wave texture + matching background color */
.osa-waves--mist-50  { background-color: var(--osa-mist-50); }
.osa-waves--mist-300 { background-color: var(--osa-mist-300); }
.osa-waves--navy-700 { background-color: var(--osa-navy-700); color: #fff; }
.osa-waves--navy-800 { background-color: var(--osa-navy-800); color: #fff; }
.osa-waves--navy-900 { background-color: var(--osa-navy-900); color: #fff; }

/* Subtler texture: lower opacity for light backgrounds */
.osa-waves--subtle::before {
  opacity: 0.4;
}


/* ═══════════════════════════════════════════
   5. BACKGROUND TEXTURE UTILITIES
   Apply wave textures to existing page areas.
   ═══════════════════════════════════════════ */

/* Body-level subtle wave (applies to entire page background).
   Pico CSS sets an opaque background-color on :root, which covers
   z-index:-1 pseudo-elements.  Fix: make html/body transparent when
   the wave class is active, put the base colour on the ::after layer,
   then overlay the texture on ::before. */
body.osa-bg-waves,
body.osa-bg-waves:root,
html:has(body.osa-bg-waves) {
  background-color: transparent;
}

body.osa-bg-waves {
  position: relative;
  isolation: isolate;
}

/* Solid background colour layer (sits below everything) */
body.osa-bg-waves::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--pico-background-color);
  pointer-events: none;
}

/* Wave texture layer (sits between bg colour and content) */
body.osa-bg-waves::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/osa-textures/waves--mist-50-ded235b3.png");
  background-repeat: repeat;
  background-attachment: fixed;
  opacity: 0.5;
  pointer-events: none;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) body.osa-bg-waves::before {
    background-image: url("/assets/osa-textures/waves--navy-900-2eb84ea5.png");
    opacity: 0.3;
  }
}

[data-theme="dark"] body.osa-bg-waves::before {
  background-image: url("/assets/osa-textures/waves--navy-900-2eb84ea5.png");
  opacity: 0.3;
}


/* ═══════════════════════════════════════════
   6. DECORATIVE SEXTANT
   Nautical sextant watermark for hero/feature areas.
   Usage: <div class="osa-sextant">...</div>
   ═══════════════════════════════════════════ */

.osa-sextant {
  position: relative;
  overflow: hidden;
}

.osa-sextant::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -10%;
  width: 400px;
  height: 360px;
  background-image: url("/assets/osa-textures/sextent--mist-500-4c6eada8.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.osa-sextant > * {
  position: relative;
  z-index: 1;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .osa-sextant::after {
    opacity: 0.05;
  }
}

[data-theme="dark"] .osa-sextant::after {
  opacity: 0.05;
}


/* ═══════════════════════════════════════════
   7. BRAND GRADIENTS
   ═══════════════════════════════════════════ */

.osa-gradient-navy {
  background: linear-gradient(to bottom, var(--osa-navy-800), var(--osa-navy-900));
  color: #fff;
}

.osa-gradient-teal {
  background: linear-gradient(135deg, var(--osa-teal-500), var(--osa-teal-700));
  color: #fff;
}

.osa-gradient-mist {
  background: linear-gradient(to bottom, var(--osa-mist-50), #fff);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .osa-gradient-mist {
    background: linear-gradient(to bottom, var(--osa-navy-900), var(--osa-navy-800));
  }
}

[data-theme="dark"] .osa-gradient-mist {
  background: linear-gradient(to bottom, var(--osa-navy-900), var(--osa-navy-800));
}


/* ═══════════════════════════════════════════
   8. ACCENT UTILITIES
   ═══════════════════════════════════════════ */

.text-teal    { color: var(--osa-teal-400); }
.text-navy    { color: var(--osa-navy-800); }
.text-mist    { color: var(--osa-mist-500); }
.bg-navy-800  { background-color: var(--osa-navy-800); }
.bg-navy-900  { background-color: var(--osa-navy-900); }
.bg-teal-50   { background-color: var(--osa-teal-50); }
.bg-teal-400  { background-color: var(--osa-teal-400); }
.bg-mist-50   { background-color: var(--osa-mist-50); }
.bg-mist-100  { background-color: var(--osa-mist-100); }

.border-teal  { border-color: var(--osa-teal-400); }
.border-mist  { border-color: var(--osa-mist-200); }

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .text-teal  { color: var(--osa-teal-300); }
  :root:not([data-theme]) .text-navy  { color: var(--osa-navy-200); }
  :root:not([data-theme]) .bg-teal-50 { background-color: var(--osa-teal-900); }
  :root:not([data-theme]) .bg-mist-50 { background-color: var(--osa-navy-800); }
  :root:not([data-theme]) .bg-mist-100 { background-color: var(--osa-navy-700); }
}

[data-theme="dark"] .text-teal  { color: var(--osa-teal-300); }
[data-theme="dark"] .text-navy  { color: var(--osa-navy-200); }
[data-theme="dark"] .bg-teal-50 { background-color: var(--osa-teal-900); }
[data-theme="dark"] .bg-mist-50 { background-color: var(--osa-navy-800); }
[data-theme="dark"] .bg-mist-100 { background-color: var(--osa-navy-700); }