/*
 * caarmo-theme-v2.css — Caarmo design system v2
 *
 * Loaded by every v2-styled page BEFORE its own inline <style> block.
 * Tokens, base styles, shared components. Page-specific tweaks go in the
 * page's own inline style block AFTER this file (and win via cascade order).
 *
 * Reference design: deep-green + Montserrat, with Playfair Display italic
 * reserved exclusively for personal greetings ("Welcome back, *Vinay*").
 */

/* ────────────────────────────────────────────────────────────────
 * 1. Design tokens
 * ──────────────────────────────────────────────────────────────── */
:root {
  /* — Brand greens — */
  --gl:      #3AB54A;   /* light — CTA */
  --gd:      #33A543;   /* dark — hover / accent */
  --dg:      #0F3D28;   /* deep — dark surfaces (hero, sidebars, AI blocks) */
  --green-lt:#D5EDE3;

  /* — Inks — */
  --blk:  #0F1A14;   /* primary text */
  --ink2: #2A2A28;
  --gray: #585555;   /* secondary text */
  --ink4: #9A9A92;
  --ink5: #C8C8C0;

  /* — Surfaces — */
  --wht:  #FFFFFF;
  --tint: #F5F8F5;   /* primary background */
  --bg:   var(--tint);

  /* — Borders — */
  --bdr:  #D9D9D9;
  --bdr2: #B5B5B0;

  /* — Accents — */
  --gold:    #C9A961;
  --gold-lt: #F5EDD8;
  --blue:    #1F77B4;
  --blue-lt: #D8E4F5;
  --red:     #D62728;
  --red-lt:  #F5D8DC;
  --amb:     #F28E2B;
  --amb-lt:  #FCE4CC;
  --purple:  #7B4FA1;
  --cyan:    #17BECF;

  /* — Typography — */
  --font:        'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-accent: 'Playfair Display',Georgia,serif; /* italic only, for greetings */

  /* — Radius — */
  --r-sm:  6px;
  --r:     8px;
  --r-md:  10px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill:999px;

  /* — Shadows — */
  --sh-sm: 0 1px 2px rgba(15,26,20,.04);
  --sh:    0 2px 8px rgba(15,26,20,.06);
  --sh-md: 0 8px 24px rgba(15,26,20,.10);
  --sh-lg: 0 24px 56px rgba(15,26,20,.14);

  /* — Transitions — */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t:      200ms cubic-bezier(.4,0,.2,1);

  /* ────────────────────────────────────────────────────────────
   * LEGACY ALIASES — let existing pages (index/auth/admin/etc.)
   * keep their inline CSS using the old token names; they remap
   * to v2 colours automatically. Allows full v2 rollout via just
   * an extra <link> on each page, no rewrites of inline styles.
   * ──────────────────────────────────────────────────────────── */
  --black:    #0F3D28;            /* old "black" surfaces → deep green */
  --ink:      var(--blk);
  --ink3:     var(--gray);
  --cream:    var(--tint);        /* warm cream → cool greenish-white */
  --cream2:   #ECEFEC;
  --cream3:   #E0E4E0;
  --border:   var(--bdr);
  --border2:  var(--bdr2);
  --surface:  var(--wht);
  --surface2: var(--tint);
  --green:    #1A4030;
  --green2:   var(--gd);
  --green3:   var(--gl);
  --green-mid:#EAF4EE;
  --gold-lt:  #F5EDD8;
  --amber:    #7A4A08;
  --amber-lt: #F5EDD8;
  --rose:     var(--red);
  --rose-lt:  var(--red-lt);
  --purple2:  #5B2D9E;
  --purple-lt:#EAE4F8;
  --blue2:    #1E3A6A;
  --r:        var(--r-sm);
  --rsm:      var(--r-sm);
  --shmd:     var(--sh-md);
  --shlg:     var(--sh-lg);
}

/* ────────────────────────────────────────────────────────────────
 * Global font override — Montserrat replaces Playfair Display + DM
 * Sans everywhere across the platform. Marked !important because the
 * v1 pages each have their own inline `body { font-family: 'DM Sans'... }`
 * rule in a <style> block that would otherwise win the cascade.
 * Playfair survives ONLY for the personal-greeting italic accent.
 * ──────────────────────────────────────────────────────────────── */
body,
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th,
button, input, select, textarea,
.brand, .caarmo-wordmark, .left-title, .form-title, .hero-title, .left-brand {
  font-family: var(--font) !important;
}
.hero-ttl em, .hero-title em, em.accent, .serif-accent,
.left-title em, .form-title em {
  font-family: var(--font-accent) !important;
  font-style:  italic !important;
  font-weight: 400 !important;
  color:       var(--gl);
}

/* ────────────────────────────────────────────────────────────────
 * 2. Reset + base
 * ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--blk);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Personal-greeting italic accent — the *only* place Playfair appears.
 * Use as <em class="accent">Name</em> or just <em> inside .hero-ttl. */
.hero-ttl em, .accent, em.accent {
  font-family: var(--font-accent);
  font-style:  italic;
  font-weight: 400;
  color:       var(--gl);
}

/* ────────────────────────────────────────────────────────────────
 * 3. Brand SVG logo container
 *    JS in caarmo-common.js injects the SVG. variant=dark for dark bgs,
 *    variant=light for light bgs.
 * ──────────────────────────────────────────────────────────────── */
/* Brand logo: PNG mark + Montserrat wordmark beside it.
 * The wordmark colour is set inline via the variant attribute (dark/light). */
.caarmo-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1}
.caarmo-logo .caarmo-logo-mark{display:block;height:32px;width:auto;flex-shrink:0}
.caarmo-logo .caarmo-logo-text{font-family:var(--font);font-weight:700;font-size:18px;letter-spacing:.06em;white-space:nowrap}
/* Backwards-compat: any leftover svg-style logo still renders */
.caarmo-logo svg{display:block;height:32px;width:auto}

/* ────────────────────────────────────────────────────────────────
 * 4. Buttons
 * ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:600;font-size:14px;
  padding:10px 24px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
  user-select:none;line-height:1.2;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.lg{font-size:15px;padding:14px 32px}
.btn.xl{font-size:15px;padding:16px 40px;font-weight:700}

.btn-primary{background:var(--gl);color:var(--wht)}
.btn-primary:hover{background:var(--gd)}

.btn-dark{background:var(--blk);color:var(--wht)}
.btn-dark:hover{opacity:.85}

.btn-outline{background:transparent;color:var(--gd);border-color:var(--gd)}
.btn-outline:hover{background:rgba(51,165,67,.06)}

.btn-white{background:var(--wht);color:var(--dg);font-weight:700}
.btn-white:hover{opacity:.9}

.btn-ghost{background:transparent;color:var(--gray);border-color:var(--bdr)}
.btn-ghost:hover{border-color:var(--bdr2);color:var(--blk)}

/* ────────────────────────────────────────────────────────────────
 * 5. Cards
 * ──────────────────────────────────────────────────────────────── */
.card{background:var(--wht);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:24px}
.card-ey{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.card-ttl{font-size:15px;font-weight:700;color:var(--blk)}
.card-sub{font-size:12px;color:var(--gray);margin-bottom:20px;line-height:1.4}

/* ────────────────────────────────────────────────────────────────
 * 6. Forms
 * ──────────────────────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field-label{display:block;font-size:11px;font-weight:600;color:var(--gray);margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase}
.field-input{
  width:100%;padding:11px 14px;font-size:14px;font-family:var(--font);
  background:var(--wht);color:var(--blk);
  border:1px solid var(--bdr);border-radius:var(--r);outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field-input:focus{border-color:var(--gd);box-shadow:0 0 0 3px rgba(51,165,67,.08)}
.field-input::placeholder{color:var(--ink5)}
.field-input.err{border-color:var(--red)}
.field-err{font-size:11px;color:var(--red);margin-top:4px;display:none}
.field-err.show{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ────────────────────────────────────────────────────────────────
 * 7. Status / alerts
 * ──────────────────────────────────────────────────────────────── */
.alert{padding:12px 16px;font-size:13px;border-radius:var(--r);margin-bottom:14px;border-left:3px solid;line-height:1.5}
.alert-ok  {background:rgba(51,165,67,.08);  border-color:var(--gd);   color:#1F6B2B}
.alert-err {background:rgba(214,39,40,.08);  border-color:var(--red);  color:#8B1F1F}
.alert-info{background:rgba(201,169,97,.10); border-color:var(--gold); color:#7A5A1F}
.alert-warn{background:rgba(242,142,43,.10); border-color:var(--amb);  color:#7A4A0A}

/* ────────────────────────────────────────────────────────────────
 * 8. Section / hero typography ramp
 * ──────────────────────────────────────────────────────────────── */
.section-ey{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gd);margin-bottom:14px}
.section-ttl{font-size:34px;font-weight:700;color:var(--blk);letter-spacing:-.8px;line-height:1.15;margin-bottom:12px}
.section-sub{font-size:16px;color:var(--gray);line-height:1.6;max-width:540px;margin-bottom:40px}

/* ────────────────────────────────────────────────────────────────
 * 9. Loading transition (used after diagnostic submit)
 *    Full-screen deep-green panel with Caarmo branding + spinner.
 *    Show by adding .show to the wrapper.
 * ──────────────────────────────────────────────────────────────── */
.v2-loader{
  position:fixed;inset:0;z-index:1000;
  background:var(--dg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity 320ms ease;
}
.v2-loader.show{opacity:1;pointer-events:auto}
.v2-loader .v2-loader-mark{margin-bottom:32px}
.v2-loader .v2-loader-mark svg{height:36px}
.v2-loader .v2-loader-ey{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.v2-loader .v2-loader-ttl{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  font-size:36px;color:var(--wht);letter-spacing:-1px;line-height:1.15;
  margin-bottom:14px;max-width:520px;
}
.v2-loader .v2-loader-sub{font-size:14px;color:rgba(255,255,255,.55);line-height:1.6;max-width:440px;margin-bottom:36px}
.v2-loader .v2-loader-bar-wrap{width:200px;height:2px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden;margin-bottom:32px;position:relative}
.v2-loader .v2-loader-bar{position:absolute;left:0;top:0;bottom:0;background:var(--gl);width:0;animation:v2bar 2.2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes v2bar{from{width:0}to{width:100%}}
.v2-loader .v2-loader-steps{display:flex;flex-direction:column;gap:8px;color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.04em}
.v2-loader .v2-loader-step{display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;min-width:280px}
.v2-loader .v2-loader-step-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);flex-shrink:0;transition:background var(--t-fast)}
.v2-loader .v2-loader-step.on .v2-loader-step-dot{background:var(--gl)}
.v2-loader .v2-loader-step.on{color:rgba(255,255,255,.85)}

/* ────────────────────────────────────────────────────────────────
 * 10. Utilities
 * ──────────────────────────────────────────────────────────────── */
.muted{color:var(--gray)}
.hidden{display:none !important}
.no-scroll{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Small spinner used inside buttons. HIDDEN by default — pages toggle
 * .show via JS during loading states (see auth.html setLoad). For spinners
 * that should always be visible (loaders, gates), use a dedicated class
 * like .gate-spin / .ai-spin / .v2-loader-spin. */
.spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
.spin.show{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}