/* ==========================================================================
   NewTech LLC — Frontend themes (Admin > Settings > Frontend Style)

   html[data-ntc-theme] is set on the <html> element in templates/app-layout.php.

     classic  blue / red / yellow       confident, rounded, gradient
     ocean    blue / light blue         airy, soft, large radii
     mint     teal / light green / gold calm, green, medium radii
     sunset   orange / coral / amber    warm, sunny, generous radii
     grape    violet / pink / gold      vibrant, deep, glowing shadows
     slate    slate / steel blue        corporate, crisp, tight radii

   All themes are light only (no dark mode). Values override the base
   palette AND the shape tokens (radius / shadow / ring) in app.css — so
   every theme carries its own design language, not just a primary color.
   Surfaces stay neutral white; accent colors drive buttons, hero, links
   and stat icons. Enqueued last so it wins.
   ========================================================================== */

/* ==========================================================================
   Theme: ocean (blue / light blue / light orange)
   ========================================================================== */
html[data-ntc-theme="ocean"] {
  --bg: #f0f7ff;
  --surface-3: #eaf3ff;
  --border: #e3eefb;
  --border-strong: #cfe0f5;
  --text: #1b2c48;
  --text-2: #3f5a7d;
  --text-3: #7f9cc0;

  --primary: #0284c7;
  --primary-hover: #0369a1;
  --primary-2: #38bdf8;
  --primary-soft: #e0f2fe;
  --primary-soft-border: #bae6fd;
  --primary-strong: #0369a1;
  --primary-contrast: #0284c7;

  --hero-gradient: linear-gradient(120deg, #0369a1 0%, #0284c7 48%, #7dd3fc 100%);
  --hero-glow: 0 18px 44px -16px rgba(2, 132, 199, .45);

  --accent-1: #0284c7; --accent-1-soft: #e0f2fe;
  --accent-2: #7dd3fc; --accent-2-soft: #e0f2fe;
  --accent-3: #fb923c; --accent-3-soft: #fffbeb;
  --accent-4: #38bdf8; --accent-4-soft: #e0f2fe;
  --accent-5: #f97316; --accent-5-soft: #ffedd5;

  --radius-sm: 12px; --radius: 20px; --radius-lg: 30px;
  --btn-radius: 12px; --btn-radius-sm: 9px; --btn-radius-lg: 14px;
  --input-radius: 12px; --menu-radius: 16px; --toast-radius: 14px;
  --shadow-sm: 0 1px 2px rgba(2, 132, 199, .07);
  --shadow: 0 2px 8px rgba(2, 132, 199, .07), 0 16px 38px -16px rgba(2, 132, 199, .25);
  --shadow-lg: 0 30px 70px -26px rgba(2, 132, 199, .32);
  --ring: 0 0 0 3px rgba(56, 189, 248, .30);
}

/* ==========================================================================
   Theme: mint (teal / light green / gold)
   ========================================================================== */
html[data-ntc-theme="mint"] {
  --bg: #f1fbf6;
  --surface-3: #e9f6ef;
  --border: #dcf1e6;
  --border-strong: #c3e6d4;
  --text: #12352b;
  --text-2: #2f5c4e;
  --text-3: #6fa58f;

  --primary: #0d9488;
  --primary-hover: #0f766e;
  --primary-2: #34d399;
  --primary-soft: #ccfbf1;
  --primary-soft-border: #99f6e4;
  --primary-strong: #0f766e;
  --primary-contrast: #0d9488;

  --hero-gradient: linear-gradient(120deg, #0f766e 0%, #0d9488 48%, #22c55e 100%);
  --hero-glow: 0 18px 44px -16px rgba(13, 148, 136, .45);

  --accent-1: #0d9488; --accent-1-soft: #ccfbf1;
  --accent-2: #34d399; --accent-2-soft: #d1fae5;
  --accent-3: #f59e0b; --accent-3-soft: #fffbeb;
  --accent-4: #16a34a; --accent-4-soft: #dcfce7;
  --accent-5: #22c55e; --accent-5-soft: #dcfce7;

  --radius-sm: 10px; --radius: 16px; --radius-lg: 24px;
  --btn-radius: 9px; --btn-radius-sm: 7px; --btn-radius-lg: 11px;
  --input-radius: 9px; --menu-radius: 12px; --toast-radius: 11px;
  --shadow-sm: 0 1px 2px rgba(13, 148, 136, .06);
  --shadow: 0 2px 6px rgba(13, 148, 136, .06), 0 14px 32px -14px rgba(13, 148, 136, .18);
  --shadow-lg: 0 28px 60px -24px rgba(13, 148, 136, .26);
  --ring: 0 0 0 3px rgba(52, 211, 153, .30);
}

/* ==========================================================================
   Theme: sunset (orange / coral / amber)
   ========================================================================== */
html[data-ntc-theme="sunset"] {
  --bg: #fff6f0;
  --surface-3: #ffefe4;
  --border: #ffe8d7;
  --border-strong: #f5d3b6;
  --text: #3b2113;
  --text-2: #6e4526;
  --text-3: #b07a50;

  --primary: #ea580c;
  --primary-hover: #c2410c;
  --primary-2: #fb7185;
  --primary-soft: #ffedd5;
  --primary-soft-border: #fed7aa;
  --primary-strong: #c2410c;
  --primary-contrast: #ea580c;

  --hero-gradient: linear-gradient(120deg, #c2410c 0%, #ea580c 48%, #fb7185 100%);
  --hero-glow: 0 18px 44px -16px rgba(234, 88, 12, .45);

  --accent-1: #ea580c; --accent-1-soft: #ffedd5;
  --accent-2: #fb7185; --accent-2-soft: #ffe4e6;
  --accent-3: #fbbf24; --accent-3-soft: #fef3c7;
  --accent-4: #fdba74; --accent-4-soft: #ffedd5;
  --accent-5: #ef4444; --accent-5-soft: #fef2f2;

  --radius-sm: 12px; --radius: 20px; --radius-lg: 30px;
  --btn-radius: 12px; --btn-radius-sm: 9px; --btn-radius-lg: 14px;
  --input-radius: 12px; --menu-radius: 16px; --toast-radius: 14px;
  --shadow-sm: 0 1px 2px rgba(234, 88, 12, .07);
  --shadow: 0 2px 8px rgba(234, 88, 12, .07), 0 16px 38px -16px rgba(234, 88, 12, .22);
  --shadow-lg: 0 30px 70px -26px rgba(234, 88, 12, .28);
  --ring: 0 0 0 3px rgba(251, 146, 60, .32);
}

/* ==========================================================================
   Theme: grape (violet / pink / gold)
   ========================================================================== */
html[data-ntc-theme="grape"] {
  --bg: #f8f4ff;
  --surface-3: #f1eaff;
  --border: #e9dcff;
  --border-strong: #d7c2f8;
  --text: #2a1848;
  --text-2: #4f3a77;
  --text-3: #917bb8;

  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-2: #ec4899;
  --primary-soft: #f3e8ff;
  --primary-soft-border: #ddd6fe;
  --primary-strong: #6d28d9;
  --primary-contrast: #7c3aed;

  --hero-gradient: linear-gradient(120deg, #6d28d9 0%, #7c3aed 48%, #ec4899 100%);
  --hero-glow: 0 18px 44px -16px rgba(124, 58, 237, .5);

  --accent-1: #7c3aed; --accent-1-soft: #f3e8ff;
  --accent-2: #ec4899; --accent-2-soft: #fdf0f7;
  --accent-3: #f59e0b; --accent-3-soft: #fffbeb;
  --accent-4: #8b5cf6; --accent-4-soft: #ede9fe;
  --accent-5: #d946ef; --accent-5-soft: #fdf4ff;

  --radius-sm: 12px; --radius: 20px; --radius-lg: 32px;
  --btn-radius: 12px; --btn-radius-sm: 9px; --btn-radius-lg: 15px;
  --input-radius: 12px; --menu-radius: 16px; --toast-radius: 14px;
  --shadow-sm: 0 1px 2px rgba(124, 58, 237, .08);
  --shadow: 0 2px 8px rgba(124, 58, 237, .08), 0 16px 38px -16px rgba(124, 58, 237, .28);
  --shadow-lg: 0 32px 72px -28px rgba(124, 58, 237, .34);
  --ring: 0 0 0 3px rgba(167, 139, 250, .35);
}

/* ==========================================================================
   Theme: slate (slate / steel blue — professional, corporate, crisp)
   Small radii, tight shadows, strong borders and deep-contrast text give
   this theme the feel of a business tool rather than a consumer app.
   ========================================================================== */
html[data-ntc-theme="slate"] {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef1f6;
  --border: #dfe4ec;
  --border-strong: #c3cbd8;
  --text: #0f172a;
  --text-2: #42526e;
  --text-3: #7c8aa6;

  --primary: #334155;
  --primary-hover: #1e293b;
  --primary-2: #0f172a;
  --primary-soft: #eef2f7;
  --primary-soft-border: #d8e0ea;
  --primary-strong: #1e293b;
  --primary-contrast: #334155;
  --on-primary: #ffffff;

  --hero-gradient: linear-gradient(120deg, #0f172a 0%, #334155 48%, #64748b 100%);
  --hero-glow: 0 18px 44px -16px rgba(30, 41, 59, .35);

  --success: #067a4e;
  --success-deep: #065f46;
  --success-soft: #e7f7f0;
  --success-soft-border: #bfe9d6;
  --warning: #a15c06;
  --warning-deep: #7a4d0a;
  --warning-soft: #fff6e5;
  --warning-soft-border: #f5dcab;
  --danger: #b42318;
  --danger-deep: #912018;
  --danger-soft: #fbeeed;
  --danger-soft-border: #f3c4bf;
  --info: #026aa2;
  --info-deep: #0369a1;
  --info-soft: #eef8fc;
  --info-soft-border: #bfe3f4;
  --muted: #64748b;

  --accent-1: #334155; --accent-1-soft: #eef2f7;
  --accent-2: #0f766e; --accent-2-soft: #e6f5f2;
  --accent-3: #b45309; --accent-3-soft: #fcf0e2;
  --accent-4: #0369a1; --accent-4-soft: #e9f3fa;
  --accent-5: #4f46e5; --accent-5-soft: #eef0fe;

  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --btn-radius: 7px; --btn-radius-sm: 6px; --btn-radius-lg: 8px;
  --input-radius: 7px; --menu-radius: 8px; --toast-radius: 8px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px -12px rgba(15, 23, 42, .14);
  --shadow-lg: 0 24px 48px -24px rgba(15, 23, 42, .22);
  --ring: 0 0 0 3px rgba(148, 163, 184, .35);
}