/* ---------------------------------------------------------------------------
   TradeRapid Jobs - theme tokens
   This is the ONLY file you touch to re-skin the app to match the branded GHL
   instance. Everything else reads these variables.
   Defaults below are deliberately GHL-native (Untitled UI grey ramp + GHL blue)
   so the app disappears into the platform when embedded in an iframe.
   --------------------------------------------------------------------------- */

:root {
  /* brand ------------------------------------------------------------------ */
  /* MATCHES THE CRM SKIN. The app sits inside a platform themed ink and lime,
     so a blue action button here is the one thing that gives away that this is
     two products bolted together rather than one.

     Primary is INK, not lime, for the same reason as the skin: lime stays the
     single bright thing on screen and keeps meaning "this is where you are".
     Lime as a button on every card turns it into decoration.

     The lime here is the dark one (#5C7212) wherever it becomes TEXT on a
     light background. The bright one is 1.30:1 on white, which is invisible,
     not just hard to read. */
  --primary:        #0F1319;   /* ink, matching the CRM skin */
  --primary-hover:  #1B2330;
  --primary-soft:   #EEF1F5;
  --primary-text:   #ffffff;
  --accent:         #C6F24E;   /* only where this file also sets the text on it */
  --accent-ink:     #5C7212;   /* the accent as TEXT on a light background */

  /* surfaces --------------------------------------------------------------- */
  --bg:             #f9fafb;
  --surface:        #ffffff;
  --surface-2:      #f9fafb;
  --surface-3:      #f2f4f7;
  --border:         #eaecf0;
  --border-strong:  #d0d5dd;

  /* type ------------------------------------------------------------------- */
  --text:           #101828;
  --text-2:         #344054;
  --muted:          #667085;
  --muted-2:        #98a2b3;

  /* sidebar (standalone mode only - hidden when embedded in GHL) ------------ */
  --sidebar:        #0F1319;   /* the same ink as the CRM sidebar */
  --sidebar-2:      #1B2330;
  --sidebar-text:   #D4DBE3;
  --sidebar-active: #C6F24E;

  /* status ----------------------------------------------------------------- */
  --green:      #12b76a;  --green-soft:  #ecfdf3;  --green-text:  #027a48;
  --amber:      #f79009;  --amber-soft:  #fffaeb;  --amber-text:  #b54708;
  --red:        #f04438;  --red-soft:    #fef3f2;  --red-text:    #b42318;
  --violet:     #7a5af8;  --violet-soft: #f4f3ff;  --violet-text: #5925dc;
  --cyan:       #06aed4;  --cyan-soft:   #ecfdff;  --cyan-text:   #0e7090;

  /* shape ------------------------------------------------------------------ */
  --radius:     8px;
  --radius-sm:  6px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 2px rgba(16,24,40,.06);
  --shadow:     0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-lg:  0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Dark - GHL has a dark mode, so the embed follows it ----------------------- */
:root[data-theme="dark"] {
  --bg:            #0c111d;
  --surface:       #161b26;
  --surface-2:     #1f242f;
  --surface-3:     #262c38;
  --border:        #262c38;
  --border-strong: #333741;
  --text:          #f5f5f6;
  --text-2:        #cecfd2;
  --muted:         #94969c;
  --muted-2:       #85888e;
  --sidebar:       #0c111d;
  --sidebar-2:     #161b26;
  --primary-soft:  #10243a;
  --green-soft:  #0a2c1d; --green-text:  #75e0a7;
  --amber-soft:  #2e1c06; --amber-text:  #fec84b;
  --red-soft:    #2f1311; --red-text:    #fda29b;
  --violet-soft: #1b1839; --violet-text: #bdb4fe;
  --cyan-soft:   #0b2b35; --cyan-text:   #67e3f9;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow:    0 4px 8px -2px rgba(0,0,0,.40);
  --shadow-lg: 0 12px 16px -4px rgba(0,0,0,.45);
}

/* --- Alternate presets. Swap the class on <html> to preview a re-skin. ----- */

/* Closer to a dark-chrome GHL white label */
:root[data-preset="midnight"] {
  --primary: #3b82f6; --primary-hover:#2563eb; --primary-soft:#eff6ff;
  --sidebar: #0f172a; --sidebar-2:#1e293b;
}

/* Morello brand - for the standalone / marketing-facing view only.
   Do NOT use this inside the GHL iframe; matching the host beats branding. */
:root[data-preset="morello"] {
  --primary: #0a1530; --primary-hover:#050b1c; --primary-soft:#eef0f5;
  --sidebar: #0a1530; --sidebar-2:#16224a;
  --bg: #f2f1ed;
}