/* ==========================================================================
   NDIS Connect — Theme variations
   Each [data-theme] is a complete bold visual direction applied app-wide.
   Default (no attribute) = "Calm" baseline defined in colors_and_type.css.
   ========================================================================== */

/* ====================================================================
   COASTAL BOLD — saturated teal + electric coral, big confident type,
   large radii, punchy tinted shadows. Energetic but still warm/trusted.
   ==================================================================== */
[data-theme="coastal"] {
  --teal-900:#04332f; --teal-800:#065c52; --teal-700:#04857a; --teal-600:#07a094;
  --teal-500:#10bcab; --teal-300:#69d9c9; --teal-100:#c2f0e9; --teal-50:#e4f8f4;
  --ochre-700:#bf2f17; --ochre-600:#e83d1f; --ochre-500:#ff6244; --ochre-100:#ffd6cc; --ochre-50:#fff0ec;

  --ink:#08201d; --ink-2:#33514b; --ink-3:#62736e; --ink-4:#93a09b;
  --line:#dbe7e3; --line-2:#c4d4cf;
  --paper:#f2f6f5; --paper-2:#e6efed; --surface:#ffffff; --surface-tint:#f4faf8;

  --r-xs:8px; --r-sm:11px; --r-md:16px; --r-lg:22px; --r-xl:32px;
  --sh-sm: 0 2px 6px rgba(4,133,122,0.10), 0 1px 2px rgba(8,32,29,0.06);
  --sh-md: 0 8px 22px -6px rgba(4,133,122,0.20), 0 3px 8px -3px rgba(8,32,29,0.10);
  --sh-lg: 0 28px 56px -16px rgba(4,133,122,0.30), 0 10px 22px -10px rgba(8,32,29,0.14);
  --sh-focus: 0 0 0 3px rgba(4,133,122,0.34);

  --display:'Poppins', var(--sans); --display-weight:700; --display-spacing:-0.03em;
  --glass: rgba(242,246,245,0.84);
  --hero-grad: radial-gradient(1000px 520px at 80% -10%, rgba(16,188,171,0.26), transparent 60%), radial-gradient(760px 420px at -4% 104%, rgba(255,98,68,0.18), transparent 58%); /* @kind other */
}
[data-theme="coastal"] h1, [data-theme="coastal"] h2, [data-theme="coastal"] h3 { letter-spacing:-0.03em; }

/* ====================================================================
   MIDNIGHT — dramatic dark canvas, bright mint + warm amber accents.
   Premium, modern marketplace feel.
   ==================================================================== */
[data-theme="midnight"] {
  --teal-900:#06130f; --teal-800:#0a2018; --teal-700:#0e9a72; --teal-600:#1fc78f;
  --teal-500:#34e0a3; --teal-300:#5fead0; --teal-100:#123e30; --teal-50:#0f2a20;
  --ochre-700:#f6c878; --ochre-600:#f0aa3d; --ochre-500:#f5b551; --ochre-100:#3a2a16; --ochre-50:#241a0e;

  --ink:#e9f2ee; --ink-2:#a9bcb4; --ink-3:#7f938b; --ink-4:#5d6f67;
  --line:#223229; --line-2:#33453b;
  --paper:#0a120f; --paper-2:#0e1a15; --surface:#121f1a; --surface-tint:#16261f;

  --ok:#34d399; --ok-bg:#0f2a20; --warn:#f5b551; --warn-bg:#2a2110;
  --muted:#7f938b; --muted-bg:#1b2823; --danger:#f87171; --danger-bg:#2a1515;
  --info:#62a6f0; --info-bg:#13233a;

  --chip-neutral-bg:#1b2823; --chip-neutral-fg:#aebcb6;
  --chip-teal-bg:#10301f; --chip-teal-fg:#5fead0;
  --chip-ok-bg:#0f2a20; --chip-ok-fg:#46e0a6;
  --chip-warn-bg:#2a2110; --chip-warn-fg:#f7c061;
  --chip-muted-bg:#1b2823; --chip-muted-fg:#8fa49c;
  --chip-danger-bg:#2a1515; --chip-danger-fg:#f87171;
  --chip-info-bg:#13233a; --chip-info-fg:#74b0f2;
  --chip-ochre-bg:#2a2110; --chip-ochre-fg:#f7c061;
  --on-tint: var(--teal-300);

  --sh-xs: 0 1px 2px rgba(0,0,0,0.4); /* @kind shadow */
  --sh-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --sh-md: 0 6px 20px -6px rgba(0,0,0,0.6), 0 2px 8px -3px rgba(0,0,0,0.5);
  --sh-lg: 0 24px 50px -14px rgba(0,0,0,0.7), 0 8px 20px -10px rgba(0,0,0,0.55);
  --sh-focus: 0 0 0 3px rgba(31,199,143,0.4);

  --display:'Poppins', var(--sans); --display-weight:700; --display-spacing:-0.03em;
  --glass: rgba(10,18,15,0.78);
  --hero-grad: radial-gradient(1000px 540px at 80% -12%, rgba(52,224,163,0.16), transparent 60%), radial-gradient(760px 440px at -4% 104%, rgba(240,170,61,0.10), transparent 58%); /* @kind other */
}
[data-theme="midnight"] h1, [data-theme="midnight"] h2, [data-theme="midnight"] h3 { letter-spacing:-0.035em; }
/* tint photo fallbacks / map for dark */
[data-theme="midnight"] img { filter: saturate(0.92) brightness(0.94); }

/* ====================================================================
   EDITORIAL — high-contrast cream + deep forest, burnt-orange accent,
   bold serif display, sharp corners, hairline rules, flat surfaces.
   Magazine-confident and distinctive.
   ==================================================================== */
[data-theme="editorial"] {
  --teal-900:#11261d; --teal-800:#193729; --teal-700:#1e5740; --teal-600:#27654b;
  --teal-500:#327a5b; --teal-300:#8cb2a0; --teal-100:#d7e5dd; --teal-50:#e8f1ec;
  --ochre-700:#92400e; --ochre-600:#b85316; --ochre-500:#d9762a; --ochre-100:#efdcc0; --ochre-50:#f5ecd9;

  --ink:#1a1611; --ink-2:#4a443a; --ink-3:#736a5d; --ink-4:#9c9385;
  --line:#ddd2bd; --line-2:#cbbfa4;
  --paper:#f4eee1; --paper-2:#ece3d1; --surface:#fbf7ee; --surface-tint:#f2ebdb;

  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:5px; --r-xl:7px; --r-pill:4px;
  --sh-xs: none; /* @kind shadow */
  --sh-sm: 0 1px 0 rgba(26,22,17,0.04);
  --sh-md: 0 2px 0 rgba(26,22,17,0.05), 0 6px 18px -10px rgba(26,22,17,0.14);
  --sh-lg: 0 3px 0 rgba(26,22,17,0.06), 0 18px 40px -16px rgba(26,22,17,0.20);
  --sh-focus: 0 0 0 3px rgba(30,87,64,0.3);

  --display:'DM Serif Display', var(--serif); --display-weight:400; --display-spacing:-0.012em;
  --glass: rgba(244,238,225,0.88);
  --hero-grad: radial-gradient(1000px 520px at 82% -10%, rgba(46,122,91,0.12), transparent 58%), radial-gradient(700px 420px at -2% 104%, rgba(217,118,42,0.12), transparent 56%); /* @kind other */
}
[data-theme="editorial"] h1, [data-theme="editorial"] h2, [data-theme="editorial"] h3, [data-theme="editorial"] .display { font-weight:400; }
[data-theme="editorial"] h1, [data-theme="editorial"] h2 { letter-spacing:-0.02em; line-height:1.06; }
[data-theme="editorial"] h4 { font-family: var(--sans); font-weight:700; }
[data-theme="editorial"] .eyebrow { letter-spacing:0.16em; }

/* theme swap is instant — no background transition (avoids frozen-tab artifacts) */