/* ==========================================================================
   Dealogy Design System  (v0.5, run r-xj9x5w)
   SINGLE SOURCE OF TRUTH. shadcn HSL-triple custom properties, imported by both
   the Next frontend and the dev pages. Edit here -> restyles every dev page now,
   and the platform later.

   v0.5: brand tokens re-aligned to the OFFICIAL brand manual (BRAND-MANUAL.pdf),
   replacing the earlier values sampled from the Lovable export. The three brand
   colours and the signature three-stop gradient now match the manual verbatim:
     Dark Blue  #2c2369  = hsl(248 50% 27%)  (Pantone 273 C) -> --primary
     Light Blue #4a7bbe  = hsl(215 47% 52%)  (Pantone 660 C) -> mid gradient stop
     Green      #01a79d  = hsl(176 98% 33%)  (Pantone 326 C) -> --accent
   Primary font is Comfortaa (brand primary, OFL, self-hosted below). See
   artifacts/branding/BRAND-KIT.md for the full spec.
   Source: BRAND-MANUAL.pdf (r-yjgky1) + Lovable structure (r-2wneg6/r-x684rf).
   ========================================================================== */

/* ---- Brand font: Comfortaa (primary, OFL). Self-hosted at /assets/fonts/. ---- */
@font-face {
  font-family: "Comfortaa";
  src: url("fonts/Comfortaa-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Dealogy / shadcn tokens (aligned to the official brand manual) ---- */
  --background: 0 0% 100%;        --foreground: 215 25% 15%;
  --card: 0 0% 100%;             --card-foreground: 215 25% 15%;
  --popover: 0 0% 100%;          --popover-foreground: 215 25% 15%;
  --primary: 248 50% 27%;        --primary-foreground: 0 0% 100%;   /* #2c2369 Dark Blue */
  --secondary: 215 20% 95%;      --secondary-foreground: 215 25% 15%;
  --muted: 215 15% 96%;          --muted-foreground: 215 15% 45%;
  --accent: 176 98% 33%;         --accent-foreground: 0 0% 100%;    /* #01a79d Green */
  --destructive: 0 84.2% 60.2%;  --destructive-foreground: 0 0% 100%;
  --border: 215 15% 90%;         --input: 215 15% 94%;   --ring: 215 47% 52%;
  /* Three brand colours by name (manual palette) */
  --dealogy-dark: 248 50% 27%;   --dealogy-blue: 215 47% 52%;   --dealogy-green: 176 98% 33%;
  --dealogy-teal: 176 98% 33%;   /* back-compat alias (was cyan; now the brand green) */
  /* Signature three-stop gradient: Dark Blue -> Light Blue -> Green */
  --dealogy-gradient:       linear-gradient(135deg, hsl(248 50% 27%) 0%, hsl(215 47% 52%) 55%, hsl(176 98% 33%) 100%);
  --dealogy-gradient-light: linear-gradient(135deg, hsl(248 50% 96%), hsl(215 47% 96%), hsl(176 98% 96%));
  --shadow-brand:  0 10px 40px -10px hsl(215 47% 52% / .35);
  --shadow-accent: 0 4px 20px -4px hsl(176 98% 33% / .28);
  --radius: .5rem;

  /* ---- Convenience aliases used by the dev pages (resolved colours) ---- */
  --ds-brand-indigo:      hsl(var(--primary));
  --ds-brand-indigo-dark: hsl(248 50% 20%);
  --ds-brand-teal:        hsl(var(--accent));
  --ds-brand-teal-dark:   hsl(176 98% 27%);
  --ds-brand-blue:        hsl(215 47% 52%);
  --ds-gradient:          var(--dealogy-gradient);
  --ds-ink:        hsl(var(--foreground));
  --ds-muted:      hsl(var(--muted-foreground));
  --ds-surface:    #ffffff;
  --ds-surface-2:  hsl(var(--muted));
  --ds-bg:         hsl(215 30% 98%);
  --ds-border:     hsl(var(--border));
  /* Green corrected from live Chrome inspection: rgb(22,163,74) = Tailwind green-600 */
  --ds-success:    hsl(142 76% 36%);
  --ds-warning:    hsl(38 92% 48%);
  --ds-danger:     hsl(var(--destructive));
  --ds-info:       hsl(var(--accent));

  --ds-font: "Comfortaa", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --ds-text-xs: .75rem;   --ds-text-sm: .875rem;  --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem; --ds-text-xl: 1.375rem; --ds-text-2xl: 1.75rem; --ds-text-3xl: 2.25rem;
  --ds-weight-normal: 400; --ds-weight-medium: 550; --ds-weight-bold: 700;

  --ds-space: 8px;
  --ds-radius: var(--radius); --ds-radius-sm: .375rem; --ds-radius-lg: .75rem;
  --ds-shadow: 0 1px 2px hsl(215 25% 15% / .06), 0 1px 3px hsl(215 25% 15% / .1);
  --ds-shadow-lg: var(--shadow-brand);
}

/* ---- Base ---- */
body.ds { margin:0; background:var(--ds-bg); color:var(--ds-ink); font-family:var(--ds-font); font-size:var(--ds-text-base); line-height:1.5; }
.ds h1 { font-size:var(--ds-text-3xl); font-weight:var(--ds-weight-bold); margin:0 0 .3rem; letter-spacing:-.01em; }
.ds h2 { font-size:var(--ds-text-2xl); font-weight:var(--ds-weight-bold); margin:1.6rem 0 .5rem; }
.ds h3 { font-size:var(--ds-text-xl); font-weight:var(--ds-weight-medium); margin:1rem 0 .4rem; }
.ds p  { margin:.4rem 0 .8rem; }
.ds a:where(:not([class*="ds-btn"]))  { color:var(--ds-brand-indigo); text-decoration:none; }
.ds a:hover { text-decoration:underline; }
.ds small { color:var(--ds-muted); }
.ds code, .ds pre { font-family:var(--ds-mono); }
.ds hr { border:0; border-top:1px solid var(--ds-border); margin:1.5rem 0; }
.ds-sub { color:var(--ds-muted); font-size:var(--ds-text-sm); margin:.2rem 0 1rem; }

/* ---- Typography utilities ---- */
/* Gradient text: confirmed from Lovable "Simple Process, Powerful Results" heading */
.ds-text-gradient { background:var(--ds-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* ALL-CAPS field label (listing cards: ANNUAL REVENUE, BUSINESS CATEGORY etc.) */
.ds-field-label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ds-muted); }

/* ---- App bar / nav (signature Dealogy gradient) ---- */
.ds-appbar { display:flex; align-items:center; gap:1.25rem; padding:.7rem 1.5rem; background:var(--ds-gradient); color:#fff; box-shadow:var(--ds-shadow); }
.ds-appbar .ds-logo { height:30px; width:auto; display:block; background:#fff; padding:4px 8px; border-radius:6px; }
.ds-nav { display:flex; gap:.25rem; flex-wrap:wrap; }
.ds-nav a { color:#eef2ff; font-size:var(--ds-text-sm); padding:.35rem .7rem; border-radius:var(--ds-radius-sm); }
.ds-nav a:hover { background:rgba(255,255,255,.16); text-decoration:none; }
.ds-nav a.active { background:rgba(255,255,255,.22); color:#fff; }
.ds-main { padding:1.5rem 2rem; max-width:1100px; }
/* ---- Dev sidebar rail ---- */
.ds-shell{display:flex;min-height:calc(100vh - 46px)}
.ds-rail{width:216px;flex-shrink:0;background:#1a2035;color:#eef2ff;display:flex;flex-direction:column;overflow:hidden;transition:width .18s cubic-bezier(.4,0,.2,1)}
.ds-shell.rail-collapsed .ds-rail{width:52px}
.ds-rail-hd{display:flex;align-items:center;justify-content:flex-start;padding:.55rem .65rem;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.ds-rail-toggle{background:none;border:none;color:#7a8aaa;cursor:pointer;padding:.28rem .35rem;border-radius:4px;line-height:0;display:flex;align-items:center}
.ds-rail-toggle:hover{color:#fff;background:rgba(255,255,255,.12)}
.ds-rail-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.35rem 0 1.2rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.ds-rail-group{margin-bottom:.1rem}
.ds-rail-group-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:#3d4d6a;padding:.6rem .85rem .18rem;white-space:nowrap;overflow:hidden;transition:opacity .15s}
.ds-shell.rail-collapsed .ds-rail-group-lbl{opacity:0;pointer-events:none}
.ds-rail-item{display:flex;align-items:center;gap:.55rem;padding:.32rem .85rem;color:#8a96b8;font-size:.81rem;font-weight:500;text-decoration:none;transition:background .1s,color .1s;white-space:nowrap;overflow:hidden}
.ds-rail-item:hover{background:rgba(255,255,255,.07);color:#cdd5ee;text-decoration:none}
.ds-rail-item.active{background:rgba(255,255,255,.12);color:#fff}
.ds-rail-ic{flex-shrink:0}
.ds-rail-lbl{transition:opacity .15s,width .18s}
.ds-shell.rail-collapsed .ds-rail-lbl{opacity:0;pointer-events:none;width:0;overflow:hidden}
.ds-shell.rail-collapsed .ds-rail-item{justify-content:center;padding:.32rem 0}
.ds-content{flex:1;min-width:0;overflow-x:hidden}
/* Keep ds-appbar logo visible; strip the old inline-nav it used to hold */
.ds-appbar .ds-nav{display:none}

/* --- Rail text contrast fix (r-xuak1z) ---
   Rail items are <a> inside .ds, so `.ds a:where(...)` (specificity 0,1,1) was
   overriding `.ds-rail-item` (0,1,0) with the indigo brand link colour -> dark
   navy text on the dark navy rail = invisible. Re-assert rail colours with a
   higher-specificity scope, and lift the group labels off the dark background. */
.ds-rail a.ds-rail-item{color:#9aa6c8}
.ds-rail a.ds-rail-item:hover{color:#eef2ff;background:rgba(255,255,255,.08);text-decoration:none}
.ds-rail a.ds-rail-item.active{color:#fff;background:rgba(255,255,255,.14)}
.ds-rail a.ds-rail-item.active:hover{color:#fff}
.ds-rail .ds-rail-group-lbl{color:#9aa8ce}


/* ---- Buttons ---- */
/* Base wrapped in :where() so it has ZERO specificity; every .ds-btn-* modifier below wins. */
:where(.ds-btn, .ds button) { font-family:inherit; font-size:var(--ds-text-sm); font-weight:600;
  padding:.5rem .9rem; border-radius:var(--ds-radius); border:none; background:var(--ds-gradient); color:#fff;
  cursor:pointer; transition:box-shadow .14s, filter .14s, transform .05s; }
:where(.ds-btn, .ds button):hover { box-shadow:var(--shadow-brand); }
:where(.ds-btn, .ds button):active { transform:translateY(1px); }
.ds-btn-sm { padding:.35rem .65rem; font-size:var(--ds-text-xs); }

/* Solid single-colour buttons */
.ds-btn-blue { background:hsl(var(--primary)); }          /* "View Details" on listing pages */
.ds-btn-teal { background:hsl(var(--accent)); }
/* Green corrected: rgb(22,163,74) = hsl(142 76% 36%), Tailwind green-600 */
.ds-btn-success { background:var(--ds-success); }         /* "Request Full Information" */
.ds-btn-danger { background:hsl(var(--destructive)); }

/* White/shadow button (on white backgrounds: "Browse Opportunities", "Start Buying")
   Confirmed: white bg + blue text + brand glow shadow. NO border. */
.ds-btn-secondary { background:#fff; color:var(--ds-brand-indigo); box-shadow:var(--shadow-brand); }
.ds-btn-secondary:hover { box-shadow:0 16px 48px -10px hsl(230 75% 56% / .45); }

/* Outline buttons (2px confirmed from live Chrome inspection — was 1px in v0.3) */
.ds-btn-outline { background:transparent; color:var(--ds-brand-indigo); border:2px solid hsl(var(--primary)); }
.ds-btn-outline:hover { background:hsl(var(--primary) / .06); box-shadow:none; }
.ds-btn-outline-teal { background:transparent; color:var(--ds-brand-teal-dark); border:2px solid hsl(var(--accent)); }
.ds-btn-outline-teal:hover { background:hsl(var(--accent) / .08); box-shadow:none; }

/* White outline: for buttons ON gradient/dark backgrounds
   Confirmed from "List Your Business" and "Start Selling" buttons on CTA section */
.ds-btn-white-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.9); }
.ds-btn-white-outline:hover { background:rgba(255,255,255,.12); box-shadow:none; }

/* Ghost buttons */
.ds-btn-ghost { background:transparent; color:var(--ds-brand-indigo); border:1px solid hsl(var(--primary) / .5); }
.ds-btn-ghost:hover { background:hsl(var(--primary) / .06); box-shadow:none; }
.ds-btn-ghost-teal { background:transparent; color:var(--ds-brand-teal-dark); border:1px solid hsl(var(--accent) / .6); }

.ds-btn.active { background:hsl(var(--primary)); color:#fff; }
.ds-btngroup { display:inline-flex; gap:.25rem; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-sm); padding:.2rem; }
.ds-btngroup .ds-btn { border:none; background:transparent; color:var(--ds-ink); box-shadow:none; }
.ds-btngroup .ds-btn.active { background:hsl(var(--primary)); color:#fff; }
.ds-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.6rem 0 1rem; }

/* ---- Forms ---- */
.ds label { display:block; font-size:var(--ds-text-sm); font-weight:var(--ds-weight-medium); margin:.6rem 0 .2rem; }
.ds input[type=text], .ds input[type=email], .ds input[type=password], .ds input[type=number], .ds select, .ds textarea {
  font-family:inherit; font-size:var(--ds-text-sm); padding:.5rem .75rem; border:1px solid hsl(var(--border));
  border-radius:var(--ds-radius-sm); background:var(--ds-surface); color:var(--ds-ink); width:100%; max-width:320px; box-sizing:border-box; }
.ds input:focus, .ds select:focus, .ds textarea:focus { outline:2px solid hsl(var(--ring)); outline-offset:0; border-color:hsl(var(--ring)); }

/* ---- Card / badge / alert ---- */
.ds-card { background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius); padding:1.1rem 1.25rem; box-shadow:var(--ds-shadow); }

/* Glassmorphism card: confirmed from "Simple, Fast, Secure" feature cards on the gradient CTA section
   rgba(255,255,255,.1) + blur(4px) + semi-white border */
.ds-card-glass { background:rgba(255,255,255,.1); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--ds-radius); padding:1.1rem 1.25rem; color:#fff; }
.ds-card-glass h3, .ds-card-glass p { color:#fff; }

/* Badge base: transparent bg + grey border (category tags: "Technology", "Marketing") */
.ds-badge { display:inline-block; font-size:var(--ds-text-xs); font-weight:600; padding:.15rem .55rem;
  border-radius:999px; background:transparent; color:var(--ds-ink); border:1px solid hsl(var(--border)); }
/* Soft tint status badges */
.ds-badge-teal { background:hsl(var(--accent) / .14); color:var(--ds-brand-teal-dark); border-color:hsl(var(--accent) / .35); }
/* Green corrected to match --ds-success */
.ds-badge-success { background:hsl(142 76% 36% / .12); color:var(--ds-success); border-color:hsl(142 76% 36% / .3); }
.ds-badge-danger { background:hsl(var(--destructive) / .12); color:var(--ds-danger); border-color:hsl(var(--destructive) / .3); }
/* Solid pills (white text on colour fill) */
.ds-badge-solid-blue { background:hsl(var(--primary)); color:#fff; border-color:transparent; }  /* "Featured" on sector listing page */
.ds-badge-solid-teal { background:hsl(var(--accent)); color:#fff; border-color:transparent; }
.ds-badge-solid-green { background:var(--ds-success); color:#fff; border-color:transparent; }
/* Gradient pill: confirmed from "Featured" on homepage listing cards */
.ds-badge-gradient { background:var(--ds-gradient); color:#fff; border-color:transparent; }

.ds-alert { border-radius:var(--ds-radius-sm); padding:.7rem .9rem; font-size:var(--ds-text-sm); border:1px solid; margin:.5rem 0; }
.ds-alert-info { background:hsl(var(--accent) / .08); border-color:hsl(var(--accent) / .35); color:var(--ds-brand-teal-dark); }
.ds-alert-success { background:hsl(142 76% 36% / .08); border-color:hsl(142 76% 36% / .35); color:var(--ds-success); }
.ds-alert-danger { background:hsl(var(--destructive) / .08); border-color:hsl(var(--destructive) / .35); color:var(--ds-danger); }

/* ---- Table ---- */
.ds table.ds-table { width:100%; border-collapse:collapse; font-size:var(--ds-text-sm); background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius); overflow:hidden; }
.ds .ds-table th { text-align:left; background:var(--ds-surface-2); color:var(--ds-muted); font-size:var(--ds-text-xs); text-transform:uppercase; letter-spacing:.04em; padding:.5rem .7rem; }
.ds .ds-table td { padding:.5rem .7rem; border-top:1px solid var(--ds-border); }

/* ---- Layout helpers ---- */
.ds-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.ds-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.ds-swatch { border-radius:var(--ds-radius-sm); height:64px; border:1px solid var(--ds-border); display:flex; align-items:flex-end; padding:.35rem; color:#fff; font-size:var(--ds-text-xs); font-family:var(--ds-mono); }
.ds-gradient-bar { background:var(--ds-gradient); }

/* Gradient section wrapper (full-width CTA blocks like "Ready to Transform...") */
.ds-gradient-section { background:var(--ds-gradient); padding:3rem 2rem; border-radius:var(--ds-radius); }
.ds-gradient-section h2, .ds-gradient-section h3 { color:#fff; margin-top:0; }
.ds-gradient-section p { color:rgba(255,255,255,.85); }

/* ==========================================================================
   Hexagon brand motif (derived from the official icon mark, BRAND-MANUAL.pdf
   pages 1/7). Three reusable assets live in the same /assets/ root:
     hexagon-mark-white.svg     double-ring mark, white  -> decoration on dark/gradient
     hexagon-mark-gradient.svg  double-ring mark, 3-stop -> decoration on light
     hex-solid.svg              filled rounded-hexagon silhouette -> CSS mask for chips
   Use the mark ONLY as decoration/icon-chips, never stretched or as the logo
   (the real logo is /assets/logo.png). This is how the shape carries across
   hero headers, section motifs and iconography.
   ========================================================================== */
:root {
  --ds-hex-mark-white: url("/assets/hexagon-mark-white.svg");
  --ds-hex-mark-grad:  url("/assets/hexagon-mark-gradient.svg");
  --ds-hex-solid:      url("/assets/hex-solid.svg");
}
/* Gradient-filled hexagon chip. Drop a number/initial/glyph inside; it stays
   centred within the silhouette. Swap the fill with the modifier classes. */
.ds-hex-chip { display:grid; place-items:center; color:#fff; font-weight:700; background:var(--ds-gradient);
  -webkit-mask:var(--ds-hex-solid) no-repeat center / contain; mask:var(--ds-hex-solid) no-repeat center / contain; }
.ds-hex-chip.blue  { background:hsl(var(--primary)); }
.ds-hex-chip.green { background:hsl(var(--accent)); }
/* Decorative ring mark as a background layer (set width/height + opacity). */
.ds-hex-deco       { background:var(--ds-hex-mark-white) no-repeat center / contain; pointer-events:none; }
.ds-hex-deco.light { background-image:var(--ds-hex-mark-grad); }
/* Short gradient rule under a heading (the brand-manual page-title device). */
.ds-head-rule::after { content:""; display:block; width:56px; height:3px; margin:.9rem 0 0;
  border-radius:3px; background:var(--ds-gradient); }
.ds-head-rule.center::after { margin-left:auto; margin-right:auto; }